<vn-crud-model
    vn-id="model"
    url="Items/getDiary"
    filter="$ctrl.filter"
    data="sales"
    auto-load="false">
</vn-crud-model>
<vn-vertical>
    <vn-card class="vn-pa-lg vn-w-lg">
    <vn-vertical>
        <vn-horizontal>
            <vn-autocomplete
                vn-focus
                url="Warehouses"
                show-field="name"
                value-field="id"
                initial-data="$ctrl.warehouseFk"
                ng-model="$ctrl.warehouseFk"
                label="Select warehouse">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th expand>Date</vn-th>
                    <vn-th number order="DESC">Id</vn-th>
                    <vn-th>State</vn-th>
                    <vn-th>Reference</vn-th>
                    <vn-th>Client</vn-th>
                    <vn-th number>In</vn-th>
                    <vn-th number>Out</vn-th>
                    <vn-th number>Balance</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr
                    ng-class="::{
                        'isIn': sale.in,
                        'balanceNegative': sale.balance < 0}" 
                    ng-repeat="sale in sales"
                    vn-repeat-last
                    on-last="$ctrl.scrollToLine()">
                    <vn-td expand>
                        <span class="chip" 
                            ng-class="::{warning: $ctrl.isToday(sale.date)}">
                            {{::sale.date | date:'dd/MM/yyyy' }}
                        </span>
                    </vn-td>
                    <vn-td number>
                        <span class="chip"
                            ng-class="::{link: sale.isTicket}" 
                            ng-click="$ctrl.showDescriptor($event, sale)"
                            name="origin">
                            {{::sale.origin | dashIfEmpty}}
                        </span>
                    </vn-td>
                    <vn-td>{{::sale.stateName | dashIfEmpty}}</vn-td>
                    <vn-td>{{::sale.reference | dashIfEmpty}}</vn-td>
                    <vn-td class="truncate">
                        <span 
                            ng-class="::{link: sale.isTicket}" 
                            ng-click="$ctrl.showClientDescriptor($event, sale)">
                            {{::sale.name | dashIfEmpty}}
                        </span>
                    </vn-td>
                    <vn-td number class="in">{{::sale.in | dashIfEmpty}}</vn-td>
                    <vn-td number>{{::sale.out | dashIfEmpty}}</vn-td>
                    <vn-td number class="balance">
                        <span class="chip balanceSpan">
                            {{::sale.balance | dashIfEmpty}}
                        </span>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-vertical>
    </vn-card>
</vn-vertical>
<vn-ticket-descriptor-popover 
    vn-id="descriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover 
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>

<vn-scroll-up></vn-scroll-up>