<!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"> <div class="columns"> <div class="size50"> <div class="size75"> <h1 class="title uppercase">{{$t('title')}}</h1> <table class="row-oriented"> <tbody> <tr> <td class="font gray uppercase">{{$t('clientId')}}</td> <th>{{client.id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('date')}}</td> <th>{{dated}}</th> </tr> </tbody> </table> </div> </div> <div class="size50"> <div class="panel"> <div class="header">{{$t('clientData')}}</div> <div class="body"> <h3 class="uppercase">{{client.socialName}}</h3> <div> {{client.street}} </div> <div> {{client.postcode}}, {{client.city}} ({{client.province}}) </div> <div> {{client.country}} </div> </div> </div> </div> </div> <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 v-for="sale in sales" :key="sale.id"> <tr> <td>{{sale.issued | date('%d-%m-%Y')}}</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() | currency('EUR', $i18n.locale)}} </td> <td class="number">{{getTotalDebtIn() | currency('EUR', $i18n.locale)}}</td> <td class="number">{{totalBalance | currency('EUR', $i18n.locale)}}</td> </tr> </tfoot> </table> </div> </div> <!-- Footer block --> <report-footer id="pageFooter" v-bind:left-text="$t('client', [client.id])" v-bind:center-text="client.socialName" v-bind="$props"> </report-footer> </td> </tr> </tbody> </table> </body> </html>