<!DOCTYPE html>
<html v-bind:lang="$i18n.locale">
    <body>
        <table class="grid">
            <tbody>
                <tr>
                    <td>
                        <!-- Header block -->
                        <report-header v-bind="$props"></report-header>
                        <!-- Block -->
                        <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, issued])"></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>
                        <!-- Footer block -->
                        <report-footer id="pageFooter"
                            v-bind:left-text="$t('invoice', [invoice.ref])"
                            v-bind="$props">
                        </report-footer>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>