<report-body v-bind="$props">
    <div class="grid-row">
        <div class="grid-block">
            <h1 class="title centered uppercase">{{$t('title')}}</h1>
            <p>{{$t('toAttention')}}</p>
            <p v-html="$t('declaration', [invoice.ref, formatDate(invoice.issued, '%d-%m-%Y')])"></p>
            <p>
            <ul>
                <li v-for="responsibility in $t('responsibilities')">
                    {{responsibility}}
                </li>
            </ul>
            </p>
            <div class="signature">
                <p>{{$t('issued', [
                    'Algemesí',
                    invoice.issued.getDate(),
                    $t('months')[invoice.issued.getMonth()],
                    invoice.issued.getFullYear()])
                    }}
                </p>
                <p><em>({{$t('signature')}})</em></p>
                <img v-bind:src="getReportSrc('signature.png')">
                <p>
                <div>{{$t('signer.name')}}: {{company.manager}}</div>
                <div>{{$t('signer.ID')}}: {{company.managerFi}}</div>
                <div>{{$t('signer.position')}}: {{$t('manager')}}</div>
                </p>
            </div>
        </div>
    </div>
    <template v-slot:footer>
        <report-footer id="pageFooter" v-bind:left-text="$t('invoice', [invoice.ref])" v-bind="$props"></report-footer>
    </template>
</report-body>