<!DOCTYPE html> <html lang="es"> <body> <section class="container"> <!-- Header component --> <report-header :locale="locale"></report-header> <!-- End header component --> <section class="main"> <section class="columns"> <section class="size50"> <section class="size75"> <h1 class="title uppercase">{{$t('title')}}</h1> <table class="row-oriented"> <tbody> <tr> <td class="font gray uppercase">{{$t('clientId')}}</td> <th>{{clientId}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('date')}}</td> <th>{{dated()}}</th> </tr> </tbody> </table> </section> </section> <section class="size50"> <section class="panel"> <section class="header">{{$t('clientData')}}</section> <section class="body"> <h3 class="uppercase">{{clientName}}</h3> <section> {{street}} </section> <section> {{postcode}}, {{city}} ({{province}}) </section> <section> {{country}} </section> </section> </section> </section> </section> <table class="column-oriented"> <thead> <tr> <th>{{$t('date')}}</th> <th>{{$t('concept')}}</th> <th class="number">{{$t('invoiced')}}</th> <th class="number">{{$t('payed')}}</th> <th class="number">{{$t('balance')}}</th> </tr> </thead> <tbody> <tr v-for="sale in sales" :key="sale.id"> <td>{{toISOString(sale.issued)}}</td> <td>{{sale.ref}}</td> <td class="number">{{sale.debtOut}}</td> <td class="number">{{sale.debtIn}}</td> <td class="number">{{getBalance(sale)}}</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td class="number"><strong class="pull-left">Total</strong> {{getTotalDebtOut()}}</td> <td class="number">{{getTotalDebtIn()}}</td> <td class="number">{{totalBalance}}</td> </tr> </tfoot> </table> </section> <!-- Footer component --> <report-footer id="pageFooter" :left-text="$t('client', [clientId])" :center-text="clientName" :locale="locale"> </report-footer> <!-- End footer component --> </section> </body> </html>