<vn-crud-model
    vn-id="model"
    url="/ticket/api/Tickets/filter"
    filter="::$ctrl.filter"
    limit="20"
    data="tickets"
    auto-load="false">
</vn-crud-model>
<div margin-medium>
    <div class="vn-list">
        <vn-card pad-medium-h>
            <vn-searchbar
                panel="vn-ticket-search-panel"
                model="model"
                expr-builder="$ctrl.exprBuilder(param, value)">
            </vn-searchbar>
        </vn-card>
    </div>
    <vn-card margin-medium-v pad-medium>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th></vn-th>
                    <vn-th field="id" number>Id</vn-th>
                    <vn-th field="salesPersonFk">Salesperson</vn-th>
                    <vn-th field="shipped">Date</vn-th>
                    <vn-th>Hour</vn-th>
                    <vn-th field="nickname">Alias</vn-th>
                    <vn-th field="provinceFk">Province</vn-th>
                    <vn-th field="stateFk" >State</vn-th>
                    <vn-th field="agencyModeFk">Agency</vn-th>
                    <vn-th field="warehouseFk">Warehouse</vn-th>
                    <vn-th field="refFk" number>Invoice</vn-th>
                    <vn-th field="routeFk" number>Route</vn-th>
                    <vn-th number>Total</vn-th>
                    <vn-th></vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="ticket in tickets"
                    class="{{::$ctrl.compareDate(ticket.shipped)}} clickable"
                    ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
                    <vn-td>
                        <vn-icon ng-show="ticket.problem" class="bright"
                            vn-tooltip="{{ticket.problem}}"
                            icon="warning">
                        </vn-icon>
                    </vn-td>
                    <vn-td number>{{::ticket.id}}</vn-td>
                    <vn-td>{{::ticket.salesPerson | dashIfEmpty}}</vn-td>
                    <vn-td>{{::ticket.shipped | date:'dd/MM/yyyy'}}</vn-td>
                    <vn-td>{{::ticket.shipped | date:'HH:mm'}}</vn-td>
                    <vn-td>
                        <span 
                            class="link" 
                            ng-click="$ctrl.showDescriptor($event, ticket.clientFk)">
                            {{::ticket.nickname}}
                        </span>
                    </vn-td>
                    <vn-td>{{::ticket.province}}</vn-td>
                    <vn-td>{{::ticket.state}}</vn-td>
                    <vn-td>{{::ticket.agencyMode}}</vn-td>
                    <vn-td>{{::ticket.warehouse}}</vn-td>
                    <vn-td number>{{::ticket.refFk | dashIfEmpty}}</vn-td>
                    <vn-td number>{{::ticket.routeFk | dashIfEmpty}}</vn-td>
                    <vn-td number>{{::ticket.total | currency: '€': 2}}</vn-td>
                    <vn-td>
                        <vn-icon-button
                            ng-click="$ctrl.preview($event, ticket)"
                            vn-tooltip="Preview"
                            icon="desktop_windows">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-card>
    <vn-pagination
        model="model"
        scroll-selector="ui-view">
    </vn-pagination>
</div>
<vn-dialog class="dialog-summary"
    vn-id="dialog-summary-ticket">
    <tpl-body>
        <vn-ticket-summary ticket="$ctrl.ticketSelected"></vn-ticket-summary>
    </tpl-body>
</vn-dialog>
<vn-client-descriptor-popover vn-id="descriptor"></vn-client-descriptor-popover>