<vn-crud-model
    vn-id="model"
    url="sales"
    link="{ticketFk: $ctrl.$params.id}"
    filter="::$ctrl.filter"
    limit="20"
    data="sales"
    auto-load="true">
</vn-crud-model>
<vn-vertical>
    <vn-card
        ng-if="!model.data || model.data.length == 0"
        style="text-align: center"
        class="vn-pa-md">
        <span translate>No results</span>
    </vn-card>
    <vn-horizontal class="catalog-list">
        <section ng-repeat="sale in sales" class="product">
        <vn-card>
            <div class="image">
                <img
                    ng-src="{{::$root.imagePath('catalog', '200x200', sale.itemFk)}}" 
                    zoom-image="{{::$root.imagePath('catalog', '1600x900', sale.itemFk)}}"
                    on-error-src/>
            </div>
            <div class="description">
                <h3>
                    <span class="link" ng-click="itemDescriptor.show($event, sale.item.id)">
                        {{::sale.item.name}}
                    </span>
                </h3>
                <h4 class="ellipsize">
                    <span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
                </h4>
                <div class="tags">
                    <vn-label-value
                        ng-if ="sale.item.tag5"
                        label="{{::sale.item.tag5}}"
                        value="{{::sale.item.value5}}">
                    </vn-label-value>
                    <vn-label-value
                        ng-if ="sale.item.tag6"
                        label="{{::sale.item.tag6}}"
                        value="{{::sale.item.value6}}">
                    </vn-label-value>
                    <vn-label-value 
                        ng-if ="sale.item.tag7"
                        label="{{::sale.item.tag7}}"
                        value="{{::sale.item.value7}}">
                    </vn-label-value>
                </div>
                <div class="footer">
                    <div class="price">
                        <span>{{::sale.quantity}}</span> 
                        <span translate>by</span>
                        <span>{{::sale.price | currency: 'EUR': 2}}</span>
                    </div>
                </div>
            </div>
        </vn-card>
        </section>
    </vn-horizontal>
    <vn-pagination model="model"></vn-pagination>
</vn-vertical>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.ticket.warehouseFk">
</vn-item-descriptor-popover>