<!DOCTYPE html> <html lang="es"> <body> <section class="container"> <!-- Header component --> <report-header :locale="locale"></report-header> <!-- End header component --> <section class="main"> <h1 class="title centered">{{$t('title')}}</h1> <section class="panel"> <section class="header">{{$t('Creditor')}}</section> <section class="body"> <table class="row-oriented"> <tbody> <tr> <td >{{$t('supplier.name')}}:</td> <th>{{supplierName}}</th> </tr> <tr> <td>{{$t('supplier.street')}}:</td> <th>{{supplierStreet}}</th> </tr> <tr> <td></td> <th>{{supplierPostCode}}, {{supplierCity}} ({{supplierProvince}})</th> </tr> <tr> <td></td> <th>{{supplierCountry}}</th> </tr> </tbody> </table> </section> </section> <section class="panel"> <section class="header">{{$t('Deptor')}}</section> <section class="body"> <table class="row-oriented"> <tbody> <tr> <td>{{$t('client.name')}}:</td> <th>{{clientName}}</th> </tr> <tr> <td>{{$t('client.street')}}:</td> <th>{{clientStreet}}</th> </tr> <tr> <td></td> <th>{{clientPostCode}}, {{clientCity}} ({{clientProvince}})</th> </tr> <tr> <td></td> <th>{{clientCountry}}</th> </tr> <tr> <td>{{$t('client.fi')}}:</td> <th> <section class="field square"> <span v-for="i in 12">{{fi.charAt(i)}}</span> </section> </th> </tr> </tbody> </table> </section> </section> <p class="font">{{$t('description')}}</p> <section class="panel"> <section class="header">{{$t('Bank')}}</section> <section class="body"> <section class="vertical-text"> {{$t('client.toCompleteByClient')}} </section> <table class="row-oriented input-table"> <tbody> <tr> <td>{{$t('bank.name')}}:</td> <th><span class="emptyField"></span></th> </tr> <tr> <td>{{$t('bank.street')}}:</td> <th><span class="emptyField"></span></th> </tr> </tbody> </table> <!-- RIB --> <table class="table-margin"> <tbody> <tr> <td>{{$t('bank.account')}}:</td> </tr> <tr> <td style="padding-right: 1em"> <section class="field square"> <span v-for="i in 5"></span> </section> </td> <td style="padding-right: 1em"> <section class="field square"> <span v-for="i in 5"></span> </section> </td> <td style="padding-right: 1em"> <section class="field square"> <span v-for="i in 11"></span> </section> </td> <td> <section class="field square" > <span v-for="i in 2"></span> </section> </td> </tr> <tr> <td style="padding-right: 1em"> <div class="line"> <div class="vertical-aligned"> <span>{{$t('bank.bankCode')}}</span> </div> </div> </td> <td style="padding-right: 1em"> <div class="line"> <div class="vertical-aligned"> <span>{{$t('bank.agencyCode')}}</span> </div> </div> </td> <td style="padding-right: 1em"> <div class="line"> <div class="vertical-aligned"> <span>{{$t('bank.accountNumber')}}</span> </div> </div> </td> <td> <div class="line"> <div class="vertical-aligned"> <span>{{$t('bank.ribKey')}}</span> </div> </div> </td> </tr> </tbody> </table> <!-- IBAN --> <table class="table-margin"> <tbody> <tr> <td>IBAN:</td> </tr> <tr> <td> <section class="field square"> <span class="grey-background">F</span> <span class="grey-background">R</span> <span v-for="i in 23"></span> </section> </td> </tr> </tbody> </table> </section> </section> <p>{{$t('authorization')}}</p> <!-- signature --> <section class="signature panel"> <section class="header">{{$t('client.sign')}}</section> <section class="body centered"> <section> <p>{{$t('client.signDate')}}:</p> </section> </section> </section> </section> <!-- Footer component --> <report-footer id="pageFooter" :left-text="$t('order', [mandateCode])" :center-text="clientName" :locale="locale"> </report-footer> <!-- End footer component --> </section> </body> </html>