<vn-crud-model
    vn-id="model"
    url="Buys/latestBuysFilter"
    limit="20"
    data="$ctrl.buys"
    auto-load="true">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-latest-buys-search-panel"
        placeholder="Search by item id or name"
        info="You can search by item id or name"
        suggested-filter="{isActive: true}"
        model="model"
        auto-state="false">
    </vn-searchbar>
</vn-portal>
<vn-data-viewer
    model="model"
    class="vn-mb-xl vn-w-xl">
    <vn-card>
    <vn-table
        model="model"
        show-fields="$ctrl.showFields"
        vn-smart-table="latestBuys">
        <vn-thead>
            <vn-tr>
                <vn-th shrink>
                    <vn-multi-check
                        model="model">
                    </vn-multi-check>
                </vn-th>
                <vn-th field="Image">Picture</vn-th>
                <vn-th smart-table-ignore field="id">Id</vn-th>
                <vn-th field="packing">Packing</vn-th>
                <vn-th field="grouping">Grouping</vn-th>
                <vn-th field="quantity">Quantity</vn-th>
                <vn-th field="description" style="text-align: center">Description</vn-th>
                <vn-th field="size">Size</vn-th>
                <vn-th field="name" style="text-align: center">Tags</vn-th>
                <vn-th field="code">Type</vn-th>
                <vn-th field="intrastat">Intrastat</vn-th>
                <vn-th field="origin">Origin</vn-th>
                <vn-th field="density">Density</vn-th>
                <vn-th field="isActive">Active</vn-th>
                <vn-th field="family">Family</vn-th>
                <vn-th field="entryFk">Entry</vn-th>
                <vn-th field="buyingValue">Buying value</vn-th>
                <vn-th field="freightValue">Freight value</vn-th>
                <vn-th field="comissionValue" expand>Commission value</vn-th>
                <vn-th field="packageValue" expand>Package value</vn-th>
                <vn-th field="isIgnored">Is ignored</vn-th>
                <vn-th expand field="price2">Grouping price</vn-th>
                <vn-th expand field="price3">Packing price</vn-th>
                <vn-th field="minPrice">Min price</vn-th>
                <vn-th field="ektFk">Ekt</vn-th>
                <vn-th field="weight">Weight</vn-th>
                <vn-th field="packageFk" expand>PackageName</vn-th>
            </vn-tr>
        </vn-thead>
        <vn-tbody>
            <a ng-repeat="buy in $ctrl.buys" 
                class="clickable vn-tr search-result"
                ui-sref="entry.card.buy.index({id: {{::buy.entryFk}}})">
                <vn-td shrink>
                    <vn-check 
                        ng-model="buy.checked"
                        vn-click-stop>
                    </vn-check>
                </vn-td>
                <vn-td shrink >
                    <img 
                        ng-src="{{::$root.imagePath('catalog', '50x50', buy.itemFk)}}"
                        zoom-image="{{::$root.imagePath('catalog', '1600x900', buy.itemFk)}}"
                        vn-click-stop
                        on-error-src/>
                </vn-td>
                <vn-td shrink>
                    <span
                        vn-click-stop="itemDescriptor.show($event, buy.itemFk)"
                        class="link">
                        {{::buy.itemFk | zeroFill:6}}
                    </span>
                </vn-td>
                <vn-td number>
                    <vn-chip class="transparent" translate-attr="buy.groupingMode == 2 ? {title: 'Minimun amount'} : {title: 'Packing'}" ng-class="{'message': buy.groupingMode == 2}"> 
                        <span translate>{{::buy.packing | dashIfEmpty}}</span>
                    </vn-chip>
                </vn-td>
                <vn-td number>
                    <vn-chip class="transparent" translate-attr="buy.groupingMode == 1 ? {title: 'Minimun amount'} : {title: 'Grouping'}" ng-class="{'message': buy.groupingMode == 1}"> 
                        <span translate>{{::buy.grouping | dashIfEmpty}}</span>
                    </vn-chip>
                </vn-td>
                <vn-td number>{{::buy.quantity}}</vn-td>
                <vn-td vn-two title="{{::buy.description}}">
                    {{::buy.description | dashIfEmpty}}
                </vn-td>
                <vn-td number>{{::buy.size}}</vn-td>
                <vn-td vn-fetched-tags>
                    <vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one>
                    <vn-one ng-if="::buy.subName">
                        <h3 title="{{::buy.subName}}">{{::buy.subName}}</h3>
                    </vn-one>
                    <vn-fetched-tags
                        max-length="6"
                        item="::buy"
                        tabindex="-1">
                    </vn-fetched-tags>
                </vn-td>
                <vn-td shrink title="{{::buy.type}}">
                    {{::buy.code}}
                </vn-td>
                <vn-td shrink title="{{::item.intrastat}}">
                    {{::buy.intrastat}}
                </vn-td>
                <vn-td shrink>{{::buy.origin}}</vn-td>
                <vn-td shrink>{{::buy.density}}</vn-td>
                <vn-td shrink>
                    <vn-check
                        disabled="true"
                        ng-model="::buy.isActive">
                    </vn-check> 
                </vn-td>
                <vn-td shrink>{{::buy.family}}</vn-td>
                <vn-td shrink>
                    <span
                        vn-click-stop="entryDescriptor.show($event, buy.entryFk)"
                        class="link">
                        {{::buy.entryFk}}
                    </span>
                </vn-td>
                <vn-td number>{{::buy.buyingValue | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.freightValue | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.comissionValue | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.packageValue | currency: 'EUR':2}}</vn-td>
                <vn-td shrink>
                    <vn-check
                        disabled="true"
                        ng-model="::buy.isIgnored">
                    </vn-check> 
                </vn-td>
                <vn-td number>{{::buy.price2 | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.price3 | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.minPrice | currency: 'EUR':2}}</vn-td>
                <vn-td number>{{::buy.ektFk | dashIfEmpty}}</vn-td>
                <vn-td number>{{::buy.weight}}</vn-td>
                <vn-td number>{{::buy.packageFk}}</vn-td>
            </a>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<div fixed-bottom-right>
    <vn-vertical style="align-items: center;">
        <vn-button class="round sm vn-mb-sm"
            icon="edit"
            ng-show="$ctrl.totalChecked > 0"
            ng-click="edit.show($event)"
            vn-tooltip="Edit buy(s)"
            tooltip-position="left">
        </vn-button>
    </vn-vertical>
</div>
<vn-dialog class="edit" 
    vn-id="edit"
    on-accept="$ctrl.onEditAccept()"
    on-close="$ctrl.editedColumn = null">
    <tpl-body>
            <span translate>Edit</span>
            <span class="countLines">
                {{::$ctrl.totalChecked}}
            </span>
            <span translate>buy(s)</span>
        <vn-horizontal>
            <vn-autocomplete
                vn-two
                ng-model="$ctrl.editedColumn.field"
                data="$ctrl.columns"
                value-field="field"
                show-field="displayName"
                label="Field to edit">
            </vn-autocomplete>
            <vn-textfield
                vn-one
                label="Value"
                ng-model="$ctrl.editedColumn.newValue">
            </vn-textfield>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Create</button>
    </tpl-buttons>
</vn-dialog>
<vn-item-descriptor-popover
    vn-id="itemDescriptor">
</vn-item-descriptor-popover>
<vn-entry-descriptor-popover
    vn-id="entryDescriptor">
</vn-entry-descriptor-popover>