<report-body v-bind="$props">
    <template v-slot:header>
        <report-header v-bind="$props" v-bind:company-code="invoice.companyCode"></report-header>
    </template>
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns vn-mb-lg">
                <div class="size50">
                    <div class="size75 vn-mt-ml">
                        <h1 class="title uppercase">{{$t('title')}}</h1>
                        <table class="row-oriented ticket-info">
                            <tbody>
                                <tr>
                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
                                    <th>{{client.id}}</th>
                                </tr>
                                <tr>
                                    <td class="font gray uppercase">{{$t('invoice')}}</td>
                                    <th>{{invoice.ref}}</th>
                                </tr>
                                <tr>
                                    <td class="font gray uppercase">{{$t('date')}}</td>
                                    <th>{{formatDate(invoice.issued, '%d-%m-%Y')}}</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="size50">
                    <div class="panel">
                        <div class="header">{{$t('invoiceData')}}</div>
                        <div class="body">
                            <h3 class="uppercase">{{client.socialName}}</h3>
                            <div>{{client.postalAddress}}</div>
                            <div>{{client.postcodeCity}}</div>
                            <div>{{$t('fiscalId')}}: {{client.fi}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="incoterms" class="panel">
                <div class="header">{{$t('incotermsTitle')}}</div>
                <div class="body">
                    <table class="row-oriented">
                        <tbody>
                            <tr>
                                <th>{{$t('incoterms')}}</th>
                                <td>{{incoterms.incotermsFk}} - {{incoterms.incotermsName}}</td>
                            </tr>
                            <tr>
                                <th>{{$t('productDescription')}}</th>
                                <td>{{incoterms.intrastat}}</td>
                            </tr>
                            <tr>
                                <th>{{$t('expeditionDescription')}}</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th>{{$t('packageNumber')}}</th>
                                <td>{{incoterms.packages}}</td>
                            </tr>
                            <tr>
                                <th>{{$t('packageGrossWeight')}}</th>
                                <td>{{incoterms.weight}} KG</td>
                            </tr>
                            <tr>
                                <th>{{$t('packageCubing')}}</th>
                                <td>{{incoterms.volume}} m3</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="font bold">
                        <span>{{$t('customsInfo')}}</span>
                        <span>{{incoterms.customsAgentName}}</span>
                    </div>
                    <div class="font bold">
                        <span>(</span>
                        <span>{{incoterms.customsAgentNif}}</span>
                        <span>{{incoterms.customsAgentStreet}}</span>
                        <span v-if="incoterms.customsAgentPhone"> &#9742; {{incoterms.customsAgentPhone}} </span>
                        <span v-if="incoterms.customsAgentEmail"> &#9993; {{incoterms.customsAgentEmail}} </span>
                        <span>)</span>
                    </div>
                    <p>
                        <strong>{{$t('productDisclaimer')}}</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <template v-slot:footer>&nbsp;</template>
</report-body>