<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-w-xl vn-mb-xl">
    <vn-card>
        <vn-table
            model="model"
            show-fields="$ctrl.showFields"
            vn-smart-table="itemIndex">
            <vn-thead>
                <vn-tr>
                    <vn-th shrink></vn-th>
                    <vn-th field="id" shrink>Id</vn-th>
                    <vn-th field="grouping" shrink>Grouping</vn-th>
                    <vn-th field="packing" shrink>Packing</vn-th>
                    <vn-th field="name">Description</vn-th>
                    <vn-th field="stems" shrink>Stems</vn-th>
                    <vn-th field="size" shrink>Size</vn-th>
                    <vn-th field="typeFk" shrink>Type</vn-th>
                    <vn-th field="category" shrink>Category</vn-th>
                    <vn-th field="intrastat" shrink>Intrastat</vn-th>
                    <vn-th field="origin" shrink>Origin</vn-th>
                    <vn-th field="salesperson" shrink>Buyer</vn-th>
                    <vn-th field="density" shrink>Density</vn-th>
                    <vn-th field="stemMultiplier" shrink>Multiplier</vn-th>
                    <vn-th field="active" shrink>Active</vn-th>
                    <vn-th field="landed" shrink-date>Landed</vn-th>
                    <vn-th></vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <a ng-repeat="item in model.data"
                    class="clickable vn-tr search-result"
                    ui-sref="item.card.summary({id: item.id})">
                    <vn-td shrink>
                        <img 
                            ng-src="{{::$root.imagePath('catalog', '50x50', item.id)}}"
                            zoom-image="{{::$root.imagePath('catalog', '1600x900', item.id)}}"
                            vn-click-stop
                            on-error-src/>
                    </vn-td>
                    <vn-td shrink>
                        <span
                            vn-click-stop="itemDescriptor.show($event, item.id)"
                            class="link">
                            {{::item.id}}
                        </span>
                    </vn-td>
                    <vn-td shrink>{{::item.grouping | dashIfEmpty}}</vn-td>
                    <vn-td shrink>{{::item.packing | dashIfEmpty}}</vn-td>
                    <vn-td vn-fetched-tags>
                        <div>
                            <vn-one title="{{::item.name}}">{{::item.name}}</vn-one>
                            <vn-one ng-if="::item.subName">
                                <h3 title="{{::item.subName}}">{{::item.subName}}</h3>
                            </vn-one>
                        </div>
                        <vn-fetched-tags
                            max-length="6"
                            item="item"
                            tabindex="-1">
                        </vn-fetched-tags>
                    </vn-td>
                    <vn-td shrink>{{::item.stems}}</vn-td>
                    <vn-td shrink>{{::item.size}}</vn-td>
                    <vn-td shrink title="{{::item.typeName}}">
                        {{::item.typeName}}
                    </vn-td>
                    <vn-td shrink title="{{::item.category}}">
                        {{::item.category}}
                    </vn-td>
                    <vn-td shrink title="{{::item.intrastat}}">
                        {{::item.intrastat}}
                    </vn-td>
                    <vn-td shrink>{{::item.origin}}</vn-td>
                    <vn-td shrink title="{{::item.userName}}">
                        <span 
                            class="link" 
                            vn-click-stop="workerDescriptor.show($event, item.buyerFk)">
                            {{::item.userName}}
                        </span>
                    </vn-td>
                    <vn-td shrink>{{::item.density}}</vn-td>
                    <vn-td shrink >{{::item.stemMultiplier}}</vn-td>
                    <vn-td shrink>
                        <vn-check
                            disabled="true"
                            ng-model="::item.isActive">
                        </vn-check> 
                    </vn-td>
                    <vn-td shrink-date>{{::item.landed | date:'dd/MM/yyyy'}}</vn-td> 
                    <vn-td shrink>
                        <vn-horizontal class="buttons">
                            <vn-icon-button
                                vn-click-stop="clone.show(item.id)"
                                vn-tooltip="Clone"
                                icon="icon-clone">
                            </vn-icon-button>
                            <vn-icon-button
                                vn-click-stop="$ctrl.preview(item)"
                                vn-tooltip="Preview"
                                icon="preview">
                            </vn-icon-button>
                        </vn-horizontal>
                    </vn-td>
                </a>
            </vn-tbody>
        </vn-table>
    </vn-card>
</vn-data-viewer>
<a ui-sref="item.create" vn-tooltip="New item" vn-bind="+" fixed-bottom-right>
    <vn-float-button icon="add"></vn-float-button>
</a>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-worker-descriptor-popover 
    vn-id="worker-descriptor">
</vn-worker-descriptor-popover>
<vn-confirm 
    vn-id="clone"
    on-accept="$ctrl.onCloneAccept($data)"
    question="Do you want to clone this item?"
    message="All it's properties will be copied">
</vn-confirm>
<vn-popup vn-id="preview">
    <vn-item-summary
        item="$ctrl.itemSelected">
    </vn-item-summary>
</vn-popup>
<vn-contextmenu 
    vn-id="contextmenu" 
    targets="['vn-data-viewer']" 
    model="model"
    expr-builder="$ctrl.exprBuilder(param, value)">
        <slot-menu>
            <vn-item translate
                ng-if="contextmenu.isFilterAllowed()"
                ng-click="contextmenu.filterBySelection()">
                Filter by selection
            </vn-item>
            <vn-item translate 
                ng-if="contextmenu.isFilterAllowed()" 
                ng-click="contextmenu.excludeSelection()">
                Exclude selection
            </vn-item>
            <vn-item translate 
                ng-if="contextmenu.isFilterAllowed()" 
                ng-click="contextmenu.removeFilter()">
                Remove filter
            </vn-item>
            <vn-item translate 
                ng-click="contextmenu.removeAllFilters()">
                Remove all filters
            </vn-item>
        </slot-menu>
</vn-contextmenu>