<vn-card class="summary">
    <h5>
        <a ng-if="::$ctrl.summary.id"
            vn-tooltip="Go to the order"
            ui-sref="order.card.summary({id: {{::$ctrl.summary.id}}})"
            name="goToSummary">
            <vn-icon-button icon="launch"></vn-icon-button>
        </a>
        <span>
            <span translate>Basket</span> #{{$ctrl.summary.id}} - {{$ctrl.summary.client.name}} 
            ({{$ctrl.summary.client.id}})
        </span>
        <vn-button
            disabled="$ctrl.order.isConfirmed" 
            class="flat"
            style="color: inherit;"
            label="Confirm" 
            ng-click="$ctrl.save()"
            vn-tooltip="Confirm lines">
        </vn-button>
    </h5>
    <vn-horizontal class="ticketSummary__data">
        <vn-one>
            <vn-label-value label="Id" 
                value="{{$ctrl.summary.id}}">
            </vn-label-value>
            <vn-label-value label="Nickname">
                <span
                    ng-click="clientDescriptor.show($event, $ctrl.summary.clientFk)"
                    class="link">
                    {{$ctrl.summary.address.nickname}}
                </span>
            </vn-label-value>
            <vn-label-value label="Company" 
                value="{{$ctrl.summary.address.companyFk}}">
            </vn-label-value>
            <vn-check label="Confirmed" disabled="true"
                ng-model="$ctrl.summary.isConfirmed">
            </vn-check>
        </vn-one>
        <vn-one>
            <vn-label-value label="Created" 
                value="{{$ctrl.summary.created | date: 'dd/MM/yyyy HH:mm'}}">
            </vn-label-value>
            <vn-label-value label="Confirmed" 
                value="{{$ctrl.summary.confirmed | date: 'dd/MM/yyyy HH:mm'}}">
            </vn-label-value>
            <vn-label-value label="Landed" 
                value="{{$ctrl.summary.landed | date: 'dd/MM/yyyy HH:mm'}}">
            </vn-label-value>
            <vn-label-value label="Phone" 
            value="{{$ctrl.summary.address.phone}}">
            </vn-label-value>
            <vn-label-value label="Created from" 
                value="{{$ctrl.summary.sourceApp}}">
            </vn-label-value>
            <vn-label-value label="Address" no-ellipsize
                value="{{$ctrl.formattedAddress}}">
            </vn-label-value>
        </vn-one>
        <vn-one>
            <vn-label-value label="Notes" no-ellipsize
                value="{{$ctrl.summary.note}}">
            </vn-label-value>
        </vn-one>
        <vn-one class="taxes">
            <p><vn-label translate>Subtotal</vn-label> {{$ctrl.summary.subTotal | currency: 'EUR':2}}</p>
            <p><vn-label translate>VAT</vn-label> {{$ctrl.summary.VAT | currency: 'EUR':2}}</p>
            <p><vn-label><strong>Total</strong></vn-label> <strong>{{$ctrl.summary.total | currency: 'EUR':2}}</strong></p>
        </vn-one>
        <vn-auto>
            <vn-table>
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink></vn-th>
                        <vn-th shrink>Item</vn-th>
                        <vn-th>Description</vn-th>
                        <vn-th number>Quantity</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Amount</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="row in $ctrl.summary.rows track by row.id">
                        <vn-td shrink>
                            <vn-icon 
                                ng-show="row.visible || row.available" 
                                color-main
                                icon="warning"
                                vn-tooltip="Visible: {{::row.visible || 0}} <br> {{::$ctrl.translate.instant('Available')}} {{::row.available || 0}}">
                            </vn-icon>
                            <vn-icon ng-show="row.reserved" icon="icon-reserva"></vn-icon>
                        </vn-td>
                        <vn-td shrink>
                            <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 number>{{::row.quantity}}</vn-td>
                        <vn-td number>{{::row.price | currency: 'EUR':2}}</vn-td>
                        <vn-td number>{{::row.quantity * row.price | currency: 'EUR':2}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </table>
        </vn-auto>
    </vn-horizontal>
</vn-card>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="client-descriptor">
</vn-client-descriptor-popover>