<vn-card class="summary">
    <h5>
        <a ng-if="::$ctrl.summary.invoiceOut.id"
            vn-tooltip="Go to the Invoice Out"
            ui-sref="invoiceOut.card.summary({id: {{::$ctrl.summary.invoiceOut.id}}})"
            name="goToSummary">
            <vn-icon-button icon="launch"></vn-icon-button>
        </a>
        <span>{{$ctrl.summary.invoiceOut.ref}} - {{$ctrl.summary.invoiceOut.client.socialName}}</span>
    </h5>
    <vn-horizontal>
        <vn-one>
            <vn-label-value label="Date" 
                value="{{$ctrl.summary.invoiceOut.issued | date: 'dd/MM/yyyy'}}">
            </vn-label-value>
            <vn-label-value label="Due" 
                value="{{$ctrl.summary.invoiceOut.dued | date: 'dd/MM/yyyy'}}">
            </vn-label-value>
            <vn-label-value label="Created" 
                value="{{$ctrl.summary.invoiceOut.created | date: 'dd/MM/yyyy'}}">
            </vn-label-value>
            <vn-label-value label="Booked" 
                value="{{$ctrl.summary.invoiceOut.booked | date: 'dd/MM/yyyy'}}">
            </vn-label-value>
            <vn-label-value label="Company" 
                value="{{$ctrl.summary.invoiceOut.company.code | dashIfEmpty}}">
            </vn-label-value>
        </vn-one>
        <vn-two>
            <h4 translate>Tax breakdown</h4>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th>Type</vn-th>
                        <vn-th>Taxable base</vn-th>
                        <vn-th>Rate</vn-th>
                        <vn-th>Fee</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="tax in $ctrl.summary.invoiceOut.taxesBreakdown">
                        <vn-td>{{tax.name}}</vn-td>
                        <vn-td>{{tax.taxableBase | currency: 'EUR': 2}}</vn-td>
                        <vn-td>{{tax.rate}}%</vn-td>
                        <vn-td>{{tax.vat | currency: 'EUR': 2}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-two>
        <vn-auto>
            <h4 translate>Ticket</h4>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th number>Ticket id</vn-th>
                        <vn-th>Alias</vn-th>
                        <vn-th expand>Shipped</vn-th>
                        <vn-th number>Amount</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="ticket in $ctrl.summary.invoiceOut.tickets">
                        <vn-td number>
                            <span 
                                ng-click="ticketDescriptor.show($event, ticket.id)"
                                class="link">
                                {{ticket.id}}
                            </span>
                        </vn-td>
                        <vn-td>
                            <span 
                                ng-click="clientDescriptor.show($event, ticket.clientFk)"
                                class="link">
                                {{ticket.nickname}}
                            </span>
                       </vn-td>
                        <vn-td expand>{{ticket.shipped | date: 'dd/MM/yyyy' | dashIfEmpty}}</vn-td>
                        <vn-td number>{{ticket.total | currency: 'EUR': 2}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-auto>
    </vn-horizontal>
</vn-card>
<vn-ticket-descriptor-popover 
    vn-id="ticketDescriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>