<vn-crud-model
    vn-id="model"
    url="item/api/Items/getDiary"
    filter="$ctrl.filter"
    data="sales" auto-load="false">
</vn-crud-model>
<vn-vertical>
    <vn-card pad-large compact>
        <vn-vertical>
                <vn-horizontal>
                    <vn-autocomplete
                        vn-focus
                        url="/item/api/Warehouses"
                        show-field="name"
                        value-field="id"
                        initial-data="$ctrl.warehouseFk"
                        field="$ctrl.warehouseFk"
                        label="Select warehouse">
                    </vn-autocomplete>
                </vn-horizontal>
                <vn-table model="model">
                    <vn-thead>
                        <vn-tr>
                            <vn-th>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="::{'isToday': $ctrl.isToday(sale.date), 'isIn': sale.in, 'balanceNegative': sale.balance < 0}" 
                            ng-repeat="sale in sales" vn-repeat-last on-last="$ctrl.scrollToLine()">
                            <vn-td class="date">
                                {{::sale.date | date:'dd/MM/yyyy' }}
                            </vn-td>
                            <vn-td number>
                                <span ng-class="::{'link pointer': sale.isTicket}" 
                                    ng-click="$ctrl.showDescriptor($event, sale)"
                                    class="id">
                                    {{::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 pointer': 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="balanceSpan">
                                    {{::sale.balance | dashIfEmpty}}
                                </span>
                            </vn-td>
                        </vn-tr>
                    </vn-tbody>
                    <vn-empty-rows ng-if="model.data.length === 0" translate>
                        No results
                    </vn-empty-rows>
                </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>