<md-toolbar layout="row" class="md-toolbar-tools md-whiteframe-4dp small-toolbar" layout-align="start center" >
	<span flex></span>
   	<h5><span ng-if="largeScreen()">Disposizioni di Allineamento Elettronico </span>SEDA <small>({{ctrl.maxItems}} elementi)</small></h5>
    <span flex></span>

		<div ng-if="largeScreen()" layout="row">
			<md-button aria-label="Firma distinta" style="width:140px" class="md-icon-button toolbar-long-button" ng-click="ctrl.firmaDistinta()" layout="row" ng-if="ctrl.abilitaFirma">
	            <md-icon md-font-icon="fa-pencil-square-o" class="fa" aria-label="Firma distinta" title="Firma distinta"></md-icon>
	            <span>Firma distinta</span>
	          </md-button>
			<md-button  aria-label="Ricerca disposizioni" class="md-icon-button toolbar-long-button" >
 				<md-checkbox class="md-icon-button toolbar-long-button" ng-model="ctrl.filter.inErrore" ng-change="ctrl.cercaErrori()"> Disposizioni in errore</md-checkbox>
			</md-button>
	          <md-button  aria-label="Ricerca disposizioni" class="md-icon-button toolbar-long-button" ng-click="ctrl.ricercaDisposizioni($event)" layout="row">
	            <md-icon md-font-icon="fa-search" class="fa" aria-label="Ricerca disposizioni" title="Ricerca disposizioni">
	            </md-icon>
	            <span>Ricerca disposizioni</span>
	          </md-button>
	          <md-button  aria-label="Stampa disposizioni" class="md-icon-button toolbar-long-button" ng-click="ctrl.stampaDisposizioni()" layout="row">
	            <md-icon md-font-icon="fa-print" class="fa" aria-label="Stampa disposizioni" title="Stampa disposizioni"></md-icon>
	            <span>Stampa disposizioni</span>
	          </md-button>
	          <md-button aria-label="Esporta Excel" class="md-icon-button toolbar-long-button" ng-click="ctrl.exportExcel()" layout="row">
	            <md-icon md-font-icon="fa-file-excel-o" class="fa" aria-label="Esporta in Excel" title="Esportazione lista in Excel"></md-icon>
	           	<span>Esporta Excel</span>
	          </md-button>
			<md-button aria-label="Cancellazione disposizioni" class="md-icon-button toolbar-long-button" ng-click="ctrl.cancellaDisposizioni($event)" layout="row" ng-if="ctrl.getSelectedIds().length>0">
	            <md-icon md-font-icon="fa-trash" class="fa" aria-label="Cancella disposizioni" title="Cancella disposizioni"></md-icon>
	            <span>Cancella selezionate</span>
	          </md-button>	          
        </div>
        
		<md-menu md-offset="0 50" ng-if="!largeScreen()" style="margin-top: -8px;">
			<md-button aria-label="Opzioni" class="md-icon-button" ng-click="$mdMenu.open($event)" >
            	<md-icon  md-font-icon="fa-ellipsis-v" class="fa"></md-icon>
          	</md-button>
			<md-menu-content width="4">
			 <md-button aria-label="Firma distinta" style="width:140px" class="md-icon-button toolbar-long-button" ng-click="ctrl.firmaDistinta()" layout="row" ng-if="ctrl.abilitaFirma">
	            <md-icon md-font-icon="fa-pencil-square-o" class="fa" aria-label="Firma distinta" title="Firma distinta"></md-icon>
	            <span>Firma distinta</span>
	          </md-button>
				<md-button aria-label="Ricerca disposizioni" class="md-icon-button toolbar-long-button" >
					<md-checkbox ng-model="ctrl.filter.inErrore" ng-change="ctrl.cercaErrori()"> Disposizioni in errore</md-checkbox>
				</md-button>
				<md-button aria-label="Ricerca disposizioni" class="md-icon-button toolbar-long-button" ng-click="ctrl.ricercaDisposizioni($event)" layout="row">
		            <md-icon md-font-icon="fa-search" class="fa" aria-label="Ricerca disposizioni" title="Ricerca disposizioni">
		            </md-icon>
		            <span>Ricerca disposizioni</span>
		          </md-button>
	          <md-button aria-label="Stampa disposizioni" class="md-icon-button toolbar-long-button" ng-click="ctrl.stampaDisposizioni()" layout="row">
	            <md-icon md-font-icon="fa-print" class="fa" aria-label="Stampa disposizioni" title="Stampa disposizioni"></md-icon>
	            <span>Stampa disposizioni</span>
	          </md-button>
	          <md-button aria-label="Esporta excel" class="md-icon-button toolbar-long-button" ng-click="ctrl.exportExcel()" layout="row">
	            <md-icon md-font-icon="fa-file-excel-o" class="fa" aria-label="Esporta Excel" title="Esportazione lista in Excel"></md-icon>
	           	<span>Esporta Excel</span>
	          </md-button>
          </md-menu-content>
        </md-menu>
	    		
 </md-toolbar>
 
 <div layout="row" flex="100" style="width:100%;overflow:scroll">
 	<md-list id="list" flex>
 		<md-subheader layout="row" style="width:400%">
 			<div flex layout="row" id="header" ng-if="ctrl.largeScreen()">
				<div style="width:24px;margin-top:8px;font-size:smaller" style="text-align:center">
 					<md-checkbox ng-checked="ctrl.allSelected" aria-label="Seleziona tutto" ng-click="ctrl.toggleSelectAll()"></md-checkbox>
				</div> 			
	 		 	<md-button  ng-click="ctrl.setOrderField('iddisposizione')" ng-style="ctrl.getColumnWidth(0)">
	 				ID
	 				<md-icon md-font-icon="fa fa-sort" class="fa"></md-icon>
 				</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('rendicontazioneSepa')" ng-style="ctrl.getColumnWidth(1)">
		 			SEDA
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		
		 		<md-button  ng-click="ctrl.setOrderField('codiceClienteDebitore')" ng-style="ctrl.getColumnWidth(2)">
		 			Codice destinatario
		 			<i class="fa fa-sort"></i>
		 		</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('funzioneOrdinante')" ng-style="ctrl.getColumnWidth(3)">
		 			Funzione
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('iddistintaBanca')" ng-style="ctrl.getColumnWidth(4)">
		 			Distinta
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('statoDisposizione')" ng-style="ctrl.getColumnWidth(5)">
		 			Stato
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('provenienzaDisposizione')" ng-style="ctrl.getColumnWidth(6)">
		 			Provenienza
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('dataInserimentoDisposizione')" ng-style="ctrl.getColumnWidth(7)">
		 			Inserimento
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('esito')" ng-style="ctrl.getColumnWidth(8)">
		 			Esito
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button  ng-click="ctrl.setOrderField('denominazioneDestinatario')" ng-style="ctrl.getColumnWidth(9)">
		 			Destinatario
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('codiceAbiDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(10)">
		 			ABI
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('cabDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(11)">
		 			CAB
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('contoDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(12)">
		 			Conto corrente
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('bancaSportelloDomic')" style="text-align:center" ng-style="ctrl.getColumnWidth(13)">
		 			Descrizione conto
		 			<i class="fa fa-sort"></i>
	 			</md-button>
		 		<md-button  ng-click="ctrl.setOrderField('iddisposizioneFunzioneOrdinante')" style="text-align:center" ng-style="ctrl.getColumnWidth(14)">
		 			ID Funzione Ordinante
		 			<i class="fa fa-sort"></i>
	 			</md-button>
 			</div>
 			
 			<!--  small screen header -->
 			<div flex="100" layout="column" id="header" ng-if="!ctrl.largeScreen()">
 				<div flex="100" layout="row">
		 		 	<a href=''  ng-click="ctrl.setOrderField('iddisposizione')" ng-style="ctrl.getColumnWidth(0)" class="small-screen-col-title">
		 				<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">ID</div>
		 				<md-icon md-font-icon="fa fa-sort" class="fa"></md-icon>
	 				</a>
			 		<a href=''  ng-click="ctrl.setOrderField('rendicontazioneSepa')" ng-style="ctrl.getColumnWidth(1)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">SEDA</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		
			 		<a href=''  ng-click="ctrl.setOrderField('codiceClienteDebitore')" ng-style="ctrl.getColumnWidth(2)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Codice destinatario</div>
			 			<i class="fa fa-sort"></i>
			 		</a>
			 		<a href=''  ng-click="ctrl.setOrderField('funzioneOrdinante')" ng-style="ctrl.getColumnWidth(3)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Funzione</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
					<a href=''  ng-click="ctrl.setOrderField('provenienzaDisposizione')" ng-style="ctrl.getColumnWidth(6)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Provenienza</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
					<a href=''  ng-click="ctrl.setOrderField('dataInserimentoDisposizione')" ng-style="ctrl.getColumnWidth(7)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Inserimento</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
					<a href=''  ng-click="ctrl.setOrderField('esito')" ng-style="ctrl.getColumnWidth(8)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Esito</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		<a href=''  ng-click="ctrl.setOrderField('codiceAbiDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(10)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">ABI</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		<a href=''  ng-click="ctrl.setOrderField('cabDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(11)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">CAB</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		<a href=''  ng-click="ctrl.setOrderField('contoDestinatario')" style="text-align:center" ng-style="ctrl.getColumnWidth(12)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Conto corrente</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		<a href=''  ng-click="ctrl.setOrderField('bancaSportelloDomic')" style="text-align:center" ng-style="ctrl.getColumnWidth(13)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Descrizione conto</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
			 		<a href=''  ng-click="ctrl.setOrderField('iddisposizioneFunzioneOrdinante')" style="text-align:center" ng-style="ctrl.getColumnWidth(14)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">ID Funzione Ordinante</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
	 			</div>
	 			<div flex="100" layout="row">
					<a href=''  ng-click="ctrl.setOrderField('statoDisposizione')" ng-style="ctrl.getColumnWidth(5)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Stato</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
					<a href=''  ng-click="ctrl.setOrderField('iddistintaBanca')" ng-style="ctrl.getColumnWidth(4)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Distinta</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
					<a href=''  ng-click="ctrl.setOrderField('denominazioneDestinatario')" ng-style="ctrl.getColumnWidth(9)" class="small-screen-col-title">
			 			<div ng-style="ctrl.getColumnWidth(0);" style="display:inline">Destinatario</div>
			 			<i class="fa fa-sort"></i>
		 			</a>
	 			</div>
 			</div> 			
		</md-subheader>
 		
		<div class="virtualRepeatVerticalUsage" id="container" ng-style="ctrl.getListHeight()" ng-style="ctrl.getMaxListWidth()">
			<md-virtual-repeat-container id="vertical-container" ng-style="ctrl.getMaxListWidth()">
			     <div class="md-2-line hilight"  md-on-demand md-virtual-repeat="data in ctrl.infiniteItems" md-item-size="25" ng-style="ctrl.getMaxListWidth()" md-top-index="ctrl.topIndex">
				     <div ng-if="ctrl.largeScreen()" class="md-2-line hilight" ng-style="ctrl.getGridItemHeight()" ng-style="ctrl.getMaxListWidth()"  layout="row"  
				     		ng-class="{'status-ok':data.statoConvalida==-1,'status-warning':data.statoConvalida==2,'status-error':data.statoConvalida==0, 'odd-row':$index%2==1,'even-row':$index%2==0, 'selectedRow': ctrl.selectedIndex===$index}"
				     		layout-align="start center">
						<div style="width:24px;margin-top:8px;font-size:smaller" style="text-align:center"><span ><md-checkbox ng-model="data.selected" aria-label="Checkbox 1"></md-checkbox></span></div>

						<div ng-click="ctrl.mostraDisposizione($index, $event)" layout="row" flex>
			     		<div style="width:0" ng-style="ctrl.getGridItemHeight()"></div>
				     	<div ng-style="ctrl.getColumnWidth(0)" style="text-align:center"><span >{{data.iddisposizione}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(1)" style="text-align:center"> <i class="fa fa-check" ng-if="data.regolarizzazioneSepa"  aria-label="Regolarizzazione SEPA"  flex></i></div>
				     	<div ng-style="ctrl.getColumnWidth(2)"><span >{{data.codiceClienteDebitore}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(3)"><span >{{data.funzioneOrdinante}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(4)" style="text-align:center"><span >{{data.iddistintaBanca}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(5)"><span >{{data.statoDisposizione}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(6)"><span >{{data.provenienzaDisposizione}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(7)" style="text-align:center"><span >{{data.dataInserimentoDisposizione.formatAsDate()}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(8)" style="text-align:center"><span >
				     		<i class="fa" ng-class="{'fa-check':data.esito==1, 'fa-circle': data.esito==2}" ng-style="ctrl.getEsitoColor(data.esito)"></i>
			     		</span></div>
				     	<div ng-style="ctrl.getColumnWidth(9)"><span >{{data.denominazioneDestinatario}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(10)" style="text-align:center"><span >{{data.codiceAbiDestinatario}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(11)" style="text-align:center"><span >{{data.cabDestinatario}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(12)"><span >{{data.contoDestinatario}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(13)"><span >{{data.bancaSportelloDomic}}</span></div>
				     	<div ng-style="ctrl.getColumnWidth(14)" style="text-align:center"><span>{{data.iddisposizioneFunzioneOrdinante}}</span></div>
				     </div>
			     </div>
				     
				     <div ng-if="!ctrl.largeScreen()" class="hilight" ng-style="ctrl.getGridItemHeight()" ang-style="ctrl.getMaxListWidth()"  layout="column" ng-click="ctrl.mostraDisposizione($index, $event)"  
				     		ng-class="{'status-ok':data.statoConvalida==-1,'status-warning':data.statoConvalida==2,'status-error':data.statoConvalida==0, 'odd-row':$index%2==1,'even-row':$index%2==0, 'selectedRow': ctrl.selectedIndex===$index}"
				     	>
			     		<div flex="100" layout="row">
					     	<div ng-style="ctrl.getColumnWidth(0)" style="text-align:right"><span >{{data.iddisposizione}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(1)" style="text-align:center"> <i class="fa fa-check" ng-if="data.regolarizzazioneSepa"  aria-label="Regolarizzazione SEPA"  flex></i></div>
					     	<div ng-style="ctrl.getColumnWidth(2)"><span >{{data.codiceClienteDebitore}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(3)"><span >{{data.funzioneOrdinante}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(6)"><span >{{data.provenienzaDisposizione}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(7)" style="text-align:center"><span >{{data.dataInserimentoDisposizione.formatAsDate()}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(8)" style="text-align:center"><span >
					     		<i class="fa" ng-class="{'fa-check':data.esito==1, 'fa-circle': data.esito==2}" ng-style="ctrl.getEsitoColor(data.esito)"></i>
				     		</span></div>
					     	<div ng-style="ctrl.getColumnWidth(10)" style="text-align:center"><span >{{data.codiceAbiDestinatario}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(11)" style="text-align:center"><span >{{data.cabDestinatario}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(12)"><span >{{data.contoDestinatario}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(13)"><span >{{data.bancaSportelloDomic}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(14)" style="text-align:center"><span>{{data.iddisposizioneFunzioneOrdinante}}</span></div>
					    </div>			     
						<div flex="100" layout="row">
							<div ng-style="ctrl.getColumnWidth(5)" style="text-align:right"><span >{{data.statoDisposizione}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(4)" style="text-align:center"><span >{{data.iddistintaBanca}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(9)"><span >{{data.denominazioneDestinatario}}</span></div>
						</div>
				     </div>
		     </md-virtual-repeat-container>
	     </div>
			 	
 	</md-list>
 
 </div>
