<!DOCTYPE html>
<html lang="es">
    <body>
        <section class="container" id="report">
            <!-- Header component -->
            <report-header :locale="locale"></report-header>
            <!-- End header component -->
            <section class="main">
                <!-- Report start -->
                <h1 class="title">{{$t('title')}}</h1>
                <p>{{$t('date')}} {{dated()}}</p>
                <table class="column-oriented">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>{{$t('concept')}}</th>
                            <th>{{$t('quantity')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="sale in sales" :key="sale.id">
                            <td class="font gray">{{sale.id}}</td>
                            <td>{{sale.concept}}</td>
                            <td>{{sale.quantity}}</td>
                        </tr>
                    </tbody>
                </table>
                <!-- Report end -->
            </section>
            <!-- Footer component -->           
            <report-footer id="pageFooter"
                :left-text="$t('client', [client.id])"
                :center-text="client.name"
                :locale="locale">
            </report-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>