<md-toolbar layout="row" class="md-toolbar-tools md-whiteframe-4dp small-toolbar" >
	<span flex></span>
   	<h5>Anagrafica ordinanti</h5>
    <span flex></span>
   	<div ng-if="largeScreen()" layout="row">
	      <md-input-container md-theme="toolbar" md-no-float class="md-hue-1" layout="row" layout-align="end center">
				<input type="text" ng-model="ctrl.filter.filterText" ng-change="ctrl.getOrdinanti()" aria-label="filtro ricerca" class="toolbar-search" ng-model-options="{debounce: 400}" style="min-width:120px">
				<i class="fa fa-search"></i>
			</md-input-container>	   
	     <md-button ng-click="ctrl.nuovoOrdinante()" aria-label="Aggiungi un ordinante" class="hilight" style="margin-left:8px" layout="row">
	      	<md-icon  md-font-icon="fa-plus" class="fa"></md-icon>
	       	Nuovo
			<md-tooltip>Nuovo</md-tooltip>
	     </md-button>
	     <md-button ng-click="ctrl.stampaOrdinanti()" aria-label="Stampa anagrafica ordinanti" class="hilight" style="margin-left:8px" layout="row">
	      	<md-icon  md-font-icon="fa-print" class="fa"></md-icon>
	       	Stampa
			<md-tooltip>Stampa anagrafica ordinanti</md-tooltip>
	     </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-input-container md-theme="toolbar" md-no-float class="md-hue-1" layout="row" layout-align="end center">
				<input type="text" ng-model="ctrl.filter.filterText" ng-change="ctrl.getOrdinanti()" aria-label="filtro ricerca" class="toolbar-search" ng-model-options="{debounce: 400}" style="min-width:120px">
				<i class="fa fa-search"></i>
			</md-input-container>	   
		     <md-button ng-click="ctrl.nuovoOrdinante()" aria-label="Aggiungi un ordinante" class="hilight" style="margin-left:8px" layout="row">
		      	<md-icon  md-font-icon="fa-plus" class="fa"></md-icon>
		       	Nuovo
				<md-tooltip>Nuovo</md-tooltip>
		     </md-button>
		     <md-button ng-click="ctrl.stampaOrdinanti()" aria-label="Stampa anagrafica ordinanti" class="hilight" style="margin-left:8px" layout="row">
		      	<md-icon  md-font-icon="fa-print" class="fa"></md-icon>
		       	Stampa
				<md-tooltip>Stampa anagrafica ordinanti</md-tooltip>
		     </md-button>
         </md-menu-content>
    </md-menu>	    		
 </md-toolbar> 
 
 <div layout="row" flex="100" style="width:100%">
 	<md-list id="list" flex>
 		<md-subheader layout="row" class="md-1-line" ng-style="ctrl.getMaxListWidth()">
 			<div flex="100" layout="row" id="header">
				<div style="width:20px">&nbsp;</div>				
				<md-button ng-click="ctrl.setOrderField('ordinante')" ng-style="ctrl.getColumnWidth(0)" >
	 				Ordinante
	 				<md-icon md-font-icon="fa fa-sort" class="fa"></md-icon>
 				</md-button>
		 		<md-button ng-click="ctrl.setOrderField('codiceSia')" ng-style="ctrl.getColumnWidth(1)">
		 			Codice SIA
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('codiceFiscale')" ng-style="ctrl.getColumnWidth(2)">
		 			Codice Fiscale
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('firmaEmittente')" ng-style="ctrl.getColumnWidth(3)">
		 			Firma emittente
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('indirizzo')" ng-style="ctrl.getColumnWidth(4)">
		 			Indirizzo
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('cap')" ng-style="ctrl.getColumnWidth(5)">
		 			CAP
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('comune')" ng-style="ctrl.getColumnWidth(6)">
		 			Comune
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button ng-click="ctrl.setOrderField('provincia')" ng-style="ctrl.getColumnWidth(7)">
		 			Provincia
		 			<i class="fa fa-sort"></i>
	 			</md-button>
 			</div>
		</md-subheader>
 		
		<div class="virtualRepeatVerticalUsage" id="container" ng-style="ctrl.getListHeight()" ng-style="ctrl.getMaxListWidth()">
			<md-virtual-repeat-container id="vertical-container" >
			     <div class="md-1-line hilight" md-on-demand md-virtual-repeat="data in ctrl.infiniteItems" md-item-size="25" style="width:100%">
				     <div class="md-1-line hilight"  ng-style="ctrl.getGridItemHeight()" layout="row" flex				       
				     		ng-class="{'status-unknown':data.statoDistinta=='In carico','status-error':data.statoDistinta=='Annullato', 'status-ok': data.statoDistinta=='Elaborato', 'odd-row':$index%2==1,'even-row':$index%2==0, 'selectedRow': ctrl.selectedIndex===$index}"
				     		 layout-align="start center" 
				     		 ng-style="ctrl.getMaxListWidth()">

						<div style="width:54px;text-align:center"><i class="fa fa-trash icon-button" ng-click="ctrl.eliminaOrdinante($index,$event)" ></i></div>
						<div ng-click="ctrl.showCommands(data, $index, $event)" layout="row" layout-align="start center">
							<div style="min-width:36px" ng-style="ctrl.getGridItemHeight()">&nbsp;</div>
					     	<div ng-style="ctrl.getColumnWidth(0)" style="text-overflow: ellipsis;overflow: hidden;">{{data.ordinante}}</div>
					     	<div ng-style="ctrl.getColumnWidth(1)" style="text-align:center"><span >{{data.codiceSia}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(2)"><span >{{data.codiceFiscale}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(3)"><span >{{data.firmaEmittente}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(4)"><span >{{data.indirizzo}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(5)"><span >{{data.cap}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(6)"><span >{{data.comune}}</span></div>
					     	<div ng-style="ctrl.getColumnWidth(7)"><span >{{data.provincia}}</span></div>
					     	<div flex></div>
				     	</div>
				     </div>
			     </div>
		     </md-virtual-repeat-container>
	     </div>
 	</md-list>
 </div>
