<!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>