<vn-data-viewer data="$ctrl.rows" class="vn-w-lg">
    <vn-card class="vn-pa-lg header" ng-if="$ctrl.rows.length > 0">
        <div>
            <vn-label translate>Subtotal</vn-label>
            {{$ctrl.subtotal | currency: 'EUR':2}}
        </div>
        <div>
            <vn-label translate>VAT</vn-label>
            {{$ctrl.VAT | currency: 'EUR':2}}
        </div>
        <div>
            <vn-label>Total</vn-label>
            {{$ctrl.order.total | currency: 'EUR':2}}
        </div>
    </vn-card>
    <vn-card class="vn-mt-md">
        <vn-table>
            <vn-thead>
                <vn-tr>
                    <vn-th></vn-th>
                    <vn-th number>Id</vn-th>
                    <vn-th>Description</vn-th>
                    <vn-th>Warehouse</vn-th>
                    <vn-th>Shipped</vn-th>
                    <vn-th number>Quantity</vn-th>
                    <vn-th number>Price</vn-th>
                    <vn-th number>Amount</vn-th>
                    <vn-th ng-if="::!$ctrl.order.isConfirmed"></vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="row in $ctrl.rows">
                    <vn-td shrink>
                        <img 
                            ng-src="{{::$root.imagePath('catalog', '50x50', row.item.id)}}"
                            zoom-image="{{::$root.imagePath('catalog', '1600x900', row.item.id)}}"
                            on-error-src/>
                    </vn-td>
                    <vn-td number>
                        <span ng-click="itemDescriptor.show($event, row.itemFk)"
                            class="link">
                            {{::row.itemFk | zeroFill:6}}
                        </span>
                    </vn-td>
                    <vn-td vn-fetched-tags>
                        <div>
                            <vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one>
                            <vn-one ng-if="::row.item.subName">
                                <h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3>
                            </vn-one>
                        </div>
                        <vn-fetched-tags
                            max-length="6"
                            item="::row.item"
                            tabindex="-1">
                        </vn-fetched-tags>
                    </vn-td>
                    <vn-td>{{::row.warehouse.name}}</vn-td>
                    <vn-td>{{::row.shipped | date: 'dd/MM/yyyy'}}</vn-td>
                    <vn-td number>{{::row.quantity}}</vn-td>
                    <vn-td number>
                        {{::row.price | currency: 'EUR':2}}
                    </vn-td>
                    <vn-td number>
                        {{::row.price * row.quantity | currency: 'EUR':2}}
                    </vn-td>
                    <vn-td shrink ng-if="::!$ctrl.order.isConfirmed">
                        <vn-icon-button
                            vn-tooltip="Remove item"
                            icon="delete"
                            ng-click="deleteRow.show($index)"
                            tabindex="-1">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-float-button
    icon="check"
    vn-tooltip="Confirm" 
    ng-click="$ctrl.save()"
    ng-if="!$ctrl.order.isConfirmed"
    fixed-bottom-right>
</vn-float-button>
<vn-item-descriptor-popover 
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-confirm
    vn-id="delete-row"
    on-accept="$ctrl.deleteRow($data)"
    question="Delete row"
    message="Are you sure you want to delete this row?">
</vn-confirm>