<vn-watcher
    vn-id="watcher"
    data="$ctrl.rows">
</vn-watcher>
<vn-vertical>
    <vn-card pad-large>
        <vn-vertical>
            <vn-horizontal class="header">
                <vn-one class="taxes" ng-if="$ctrl.rows.length > 0">
                    <p><vn-label translate>Subtotal</vn-label> {{$ctrl.subtotal | currency: 'EUR':2}}</p>
                    <p><vn-label translate>VAT</vn-label> {{$ctrl.VAT | currency: 'EUR':2}}</p>
                    <p><vn-label><strong>Total</strong></vn-label> <strong>{{$ctrl.order.total | currency: 'EUR':2}}</strong></p>
                </vn-one>
            </vn-horizontal>
            <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 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="//verdnatura.es/vn-image-data/catalog/50x50/{{::row.item.image}}"
                                zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::row.item.image}}"
                                on-error-src/>
                        </vn-td>
                        <vn-td number>
                            <span ng-click="$ctrl.showDescriptor($event, row.itemFk)"
                                class="link">
                                {{::row.itemFk | zeroFill:6}}
                            </span>
                        </vn-td>
                        <vn-td expand>
                            <vn-fetched-tags
                                max-length="6"
                                item="::row.item"
                                sub-name="::row.item.subName">
                            </vn-fetched-tags>
                        </vn-td>
                        <vn-td>{{::row.warehouse.name}}</vn-td>
                        <vn-td>{{::row.shipped | dateTime: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td number>{{::row.quantity}}</vn-td>
                        <vn-td number>
                            {{::row.price | currency: 'EUR':2}}
                        </vn-td>
                        <vn-td shrink ng-if="!$ctrl.order.isConfirmed">
                            <vn-icon-button
                                vn-tooltip="Remove item"
                                icon="delete"
                                ng-click="$ctrl.showDeleteRow($index)"
                                tabindex="-1">
                            </vn-icon-button>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-vertical>
    </vn-card>
    <vn-button-bar ng-if="!$ctrl.order.isConfirmed">
        <vn-button
            label="Confirm" 
            ng-click="$ctrl.save()">
        </vn-button>
    </vn-button-bar>
</vn-vertical>
<vn-item-descriptor-popover 
    vn-id="descriptor">
</vn-item-descriptor-popover>
<vn-confirm
    vn-id="delete-row"
    on-response="$ctrl.deleteRow(response)"
    question="Delete row"
    message="Are you sure you want to delete this row?">
</vn-confirm>