<md-toolbar layout="row" class="md-toolbar-tools md-whiteframe-4dp small-toolbar" >
	<span flex></span>
   	<h5>Tabella funzioni</h5>
    <span flex></span>
   	<div ng-if="largeScreen()" layout="row">
	     <md-button ng-click="ctrl.nuovaFunzione($event)" aria-label="Inserisci funzione" class="hilight" style="margin-left:8px" layout="row">
	      	<md-icon  md-font-icon="fa-plus" class="fa"></md-icon>
	       	Nuova
			<md-tooltip>Inserisci funzione</md-tooltip>
	     </md-button>
 		<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" aria-label="filtro ricerca" class="toolbar-search" ng-model-options="{debounce: 200}" ng-change="ctrl.getTblFunzioni()">
				<i class="fa fa-search"></i>
		</md-input-container>	   	     
	</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 ng-click="ctrl.nuovaFunzione($event)" aria-label="Inserisci funzione" class="hilight" style="margin-left:8px" layout="row">
				<md-icon  md-font-icon="fa-plus" class="fa"></md-icon>
					Nuova
				<md-tooltip>Inserisci funzione</md-tooltip>
			</md-button>
			<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" aria-label="filtro ricerca" class="toolbar-search" ng-model-options="{debounce: 200}"  ng-change="ctrl.getTblOrdinanti()">
				<i class="fa fa-search"></i>
			</md-input-container>	         
     	</md-menu-content>
   	</md-menu>
	    		
 </md-toolbar>
 
 <div layout="row" ng-style="ctrl.getMaxListWidth()" style="overflow:scroll">
	<md-list id="list" flex>
 		<md-subheader layout="row" >
 			<div flex="100" layout="row" id="header">
				<div style="width:20px">&nbsp;</div>				
	 		 	<md-button class="wrap-button" ng-click="ctrl.setOrderField('funzioneOrdinante')" ng-style="ctrl.getColumnWidth(0)">
	 				<span ng-if="ctrl.largeScreen()">Funzione ordinante</span><span ng-if="!ctrl.largeScreen()">Fun.ord.</span>
	 				<md-icon md-font-icon="fa fa-sort" class="fa"></md-icon>
 				</md-button>
		 		<md-button class="wrap-button" ng-click="ctrl.setOrderField('descrizione')" ng-style="ctrl.getColumnWidth(1)">
		 			Descrizione
		 			<i class="fa fa-sort"></i>
	 			</md-button>
	 			<md-button class="wrap-button" ng-click="ctrl.setOrderField('abilitaCausali')" ng-style="ctrl.getColumnWidth(2)">
		 			<span ng-if="ctrl.largeScreen()">Causali bonifico</span><span ng-if="!ctrl.largeScreen()">Bonfico</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>
				<md-button class="wrap-button" ng-click="ctrl.setOrderField('abilitaGiroconti')" ng-style="ctrl.getColumnWidth(3)">
		 			<span ng-if="ctrl.largeScreen()">Giroconti</span><span ng-if="!ctrl.largeScreen()">Giroc.</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>	 			
				<md-button class="wrap-button" ng-click="ctrl.setOrderField('abilitaCircuitoCassa')" ng-style="ctrl.getColumnWidth(4)">
		 			<span ng-if="ctrl.largeScreen()">Circuito cassa</span><span ng-if="!ctrl.largeScreen()">C. cassa</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>	 			
				<md-button class="wrap-button" ng-click="ctrl.setOrderField('abilitaCircuitoPoste')" ng-style="ctrl.getColumnWidth(5)">
		 			<span ng-if="ctrl.largeScreen()">Circuito poste</span><span ng-if="!ctrl.largeScreen()">C. posto</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>	 			
				<md-button class="wrap-button" ng-click="ctrl.setOrderField('gestioneDatiContabili')" ng-style="ctrl.getColumnWidth(6)">
		 			<span ng-if="ctrl.largeScreen()">Tabelle dati contabili</span><span ng-if="!ctrl.largeScreen()">Dati contabili</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>	 			
				<md-button class="wrap-button" ng-click="ctrl.setOrderField('approvazioneAutomatica')" ng-style="ctrl.getColumnWidth(7)">
		 			<span ng-if="ctrl.largeScreen()">Approvazione automatica bonifici</span><span ng-if="!ctrl.largeScreen()">App. auto. bonifici</span>
		 			<i class="fa fa-sort"></i>
	 			</md-button>	 			
	 			<div style="width:48px">&nbsp;</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-1-line hilight" md-on-demand md-virtual-repeat="data in ctrl.infiniteItems" md-item-size="30" ng-style="ctrl.getGridItemHeight()" ang-style="ctrl.getMaxListWidth()">
				     <div class="md-1-line" style="padding-left:42px" layout="row" ng-class="{'odd-row':$index%2==1,'even-row':$index%2==0, 'selectedRow': ctrl.selectedIndex===$index}"
				     		 ng-style="ctrl.getGridItemHeight()" layout-align="start center">
				     	<div flex layout="row" layout-align="start center" ng-click="ctrl.editFunzione($index, $event)" ng-style="ctrl.getGridItemHeight()" style="border-color:none!important">
	 	 					<div style="width:0" ng-style="ctrl.getGridItemHeight()"></div>
				     		<div ng-style="ctrl.getColumnWidth(0)"><span >{{data.funzioneOrdinante}}</span></div>
				     		<div ng-style="ctrl.getColumnWidth(1)"><span >{{data.descrizione}}</span></div>
				     		<div ng-style="ctrl.getColumnWidth(2)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.abilitaCausali" disabled="disabled"></md-checkbox></div>
				     		<div ng-style="ctrl.getColumnWidth(3)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.abilitaGiroconti" disabled="disabled"></md-checkbox></div>
				     		<div ng-style="ctrl.getColumnWidth(4)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.abilitaCircuitoCassa" disabled="disabled"></md-checkbox></div>
				     		<div ng-style="ctrl.getColumnWidth(5)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.abilitaCircuitoPoste" disabled="disabled"></md-checkbox></div>
				     		<div ng-style="ctrl.getColumnWidth(6)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.gestioneDatiContabili" disabled="disabled"></md-checkbox></div>
				     		<div ng-style="ctrl.getColumnWidth(7)" style="text-align:center;padding-top:10px;min-height:35px;height:35px"><md-checkbox ng-model="data.approvazioneAutomatica" disabled="disabled"></md-checkbox></div>
				     		<div style="width:48px">
			     				<i class="fa fa-trash icon-button" ng-click="ctrl.cancellaFunzione($index,$event)"></i>
				     		</div>
			     		</div>
				     </div>
			     </div>
		     </md-virtual-repeat-container>
	     </div>
			 	
 	</md-list> 
 </div>				     		 	 			