<!DOCTYPE html>
<html lang="es">
    <body>
        <section class="container" id="report">
            <!-- Header component -->
            <report-header :locale="client.locale"></report-header>
            <!-- End header component -->
            <section class="main">
                <!-- Report start -->
                <section class="content">
                    <h1 class="title centered uppercase">{{$t('title')}}</h1>
                    <p class="centered">
                        Recibo de <strong class="uppercase">{{client.socialName}}</strong>, 
                        la cantidad de <strong>{{receipt.amountPaid}} €</strong> en concepto de 'entrega a cuenta', 
                        quedando pendiente en la cuenta del cliente
                        un saldo de <strong>{{receipt.amountUnpaid}} €</strong>.
                    </p>
                    <section class="signature">
                        <img :src="embeded['/assets/images/signature.png']">
                        <p class="centered">{{$t('payed', [
                            'Silla', 
                                receipt.payed.getDate(), 
                                $t('months')[receipt.payed.getMonth()], 
                                receipt.payed.getFullYear()])
                            }}
                        </p>
                    </section>
                </section>
                <!-- Report end -->
            </section>
            <!-- Footer component -->           
            <report-footer id="pageFooter"
                :left-text="$t('client', [client.id])"
                :center-text="client.socialName"
                :locale="client.locale">
            </report-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>