<md-toolbar layout="row" class="md-toolbar-tools md-whiteframe-4dp small-toolbar">
    <span flex></span>
    <h5>
        <span ng-if="largeScreen()">Report pagamenti da file guida</span> <small>({{ctrl.maxItems}}
            elementi)</small>
    </h5>
    <span flex></span>

    <div layout="row" ng-if="ctrl.largeScreen()" layout-align="space-between center">
        <md-button class="" ngf-select="ctrl.uploadFile($file, $invalidFiles)">
            <i class="fa fa-upload"></i> Carica file 0000_EXTSCT<md-tooltip>Carica
                file 0000_EXTSCT</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-button class=" md-icon-button" ngf-select="uploadHosts($file, $invalidFiles)">
            <i class="fa fa-upload"></i>
            <md-tooltip>Carica file </md-tooltip>
            </md-button>
            <md-button aria-label="Firma distinta" style="width:140px" class="md-icon-button toolbar-long-button" ng-click="ctrl.caricaFile()" layout="row">
                <md-icon md-font-icon="fa-pencil-square-o" class="fa" aria-label="Firma distinta" title="Firma distinta"></md-icon>
                <span>Carica file</span>
            </md-button>
        </md-menu-content>
    </md-menu>
</md-toolbar>

<div layout="row" style="overflow: scroll">
    <md-list id="list">
        <md-subheader layout="row" style="width:300%">
            <div layout="row" id="header">
                <md-button ng-click="ctrl.setOrderField('dataRichiesta')" ng-style="ctrl.getColumnWidth(0)"> Data richiesta <i class="fa fa-sort"></i> </md-button>
                <md-button ng-click="ctrl.setOrderField('filenameOut')" ng-style="ctrl.getColumnWidth(1)"> Denominazione file
                    guida <i class="fa fa-sort"></i> </md-button>
                <md-button ng-click="ctrl.setOrderField('statoRichiesta')" ng-style="ctrl.getColumnWidth(2)"> Stato richiesta <i class="fa fa-sort"></i> </md-button>
                <div style="min-width: 60px; max-width: 60px"></div>
                <md-button ng-click="ctrl.setOrderField('userIDRichiesta')" ng-style="ctrl.getColumnWidth(4)"> Utente <i class="fa fa-sort"></i> </md-button>
                <md-button ng-click="ctrl.setOrderField('dataInizioEsecuzione')" ng-style="ctrl.getColumnWidth(5)"> Inizio esecuzione <i class="fa fa-sort"></i> </md-button>
                <md-button ng-click="ctrl.setOrderField('dataFineEsecuzione')" ng-style="ctrl.getColumnWidth(6)"> Fine esecuzione <i class="fa fa-sort"></i> </md-button>
            </div>

        </md-subheader>

        <div class="virtualRepeatVerticalUsage" id="container" ng-style="ctrl.getListHeight()"  ng-style="ctrl.getMaxListWidth()" ng-keydown="ctrl.key($event)">
            <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="25" ng-style="ctrl.getMaxListWidth()" md-top-index="ctrl.topIndex" >

                    <div ng-if="ctrl.largeScreen()" class="md-1-line hilight" style="padding: 16px;" ang-style="ctrl.getGridItemHeight()" ang-style="ctrl.getMaxListWidth()" layout="row"
                        ng-class="{'odd-row':$index%2==1,'even-row':$index%2==0, 'selectedRow': ctrl.selectedIndex===$index, 'status-warning':data.statoRichiesta=='In elaborazione','status-ok':data.statoRichiesta=='Completata', 'status-error':data.statoRichiesta=='Errata', 'status-warning':data.statoRichiesta=='Inserita'}"
                        layout-align="start center">

                         <md-button aria-label="Scarica file" style="width:48px" class="md-icon-button toolbar-long-button" ng-click="ctrl.showDetails(data)" layout="row" >
                             <md-icon md-font-icon="fa-search" class="fa" aria-label="Visualizza i dettagli" title="Visualizza i dettagli"></md-icon>
                         </md-button>

                        <div ng-style="ctrl.getColumnWidth(0)">
                            <span>{{data.dataRichiesta.formatAsDateTime()}}</span>
                        </div>
                        <div ng-style="ctrl.getColumnWidth(1)">
                            <span>{{data.filenameIn}}</span>
                        </div>
                        <div ng-style="ctrl.getColumnWidth(2)">
                            <span>{{data.statoRichiesta}}</span>
                        </div>
                        <div style="min-width: 60px; max-width: 60px">
                            <span a-ng-if="data.esitoEsecuzione=='Completata'">
                                <md-button aria-label="Scarica file" style="width:140px" class="md-icon-button toolbar-long-button" ng-click="ctrl.downloadFile(data)" layout="row"
                                    ng-if="data.filenameOut!=null&&data.filenameOut!=''">
                                    <md-icon md-font-icon="fa-download" style="color:green" class="fa" aria-label="Scarica documento" title="Scarica documento"></md-icon>
                                </md-button>
                            </span>
                        </div>
                        <div ng-style="ctrl.getColumnWidth(4)">
                            <span>{{data.userIDRichiesta}}</span>
                        </div>
                        <div ng-style="ctrl.getColumnWidth(5)">
                            <span>{{data.dataInizioEsecuzione.formatAsDateTime()}}</span>
                        </div>
                        <div ng-style="ctrl.getColumnWidth(6)">
                            <span>{{data.dataFineEsecuzione.formatAsDateTime()}}</span>
                        </div>
                    </div>
                </div>
        </div>
        </md-virtual-repeat-container>
</div>

</md-list>

</div>