{% set background = "#bad6ef" %}
{% set fontsize = "9pt" %}
{% set foreground = "#160679" %}

    {#<div id="header">
    <div style="width: 800px; float: left" class="emitter" >
        <div class="logo"><img src="{{ infos.logo }}" alt="logo"></div>
    </div>
    <div style="width: 800px; float: right" class="header-right-part">
        <div class="estimate-infos">
            <div class="title">Devis</div>
            <div class="ref">Ref {{ ref }}</div>
            <div class="client-id">Client {{ client.ref }}</div>
            <div class="validity">Devis valable {{ validity_date }}</div>
        </div>
        <div class="client">
            <div class="name">{{ client.name }}</div>
            <div class="address">{{ client.address }}</div>
            <div class="city">{{ client.zip }} {{ client.city }}</div>
        </div>
    </div>
</div>#}

<style>
    li {
        margin-top: 14pt;
        margin-bottom: 14pt;
    }
    .title {
        font-size: 18pt;
        text-align: center;
    }
    .row-logo {
        width: 50%;
        text-align: center;
    }
    .row-logo img {
        max-width: 70mm;
    }
    .row-estimate-info {
        width: 50%;
        padding-left: 20mm;
    }
    .client {
        margin-top: 8mm;
        border: 1px solid #000000;
        border-radius: 5px;
        padding: 4mm;
        width: 40mm;
        margin-bottom: 8mm;
    }
    .client * {
        text-align: center;
    }
    .estimate-infos {
        width: 40mm;
        padding: 2mm;
    }
    .estimate-infos .title {
        font-size: 22pt;
        font-weight: bold;
        text-align: center;
        margin-bottom: 2mm;
    }
    table.products {
        border-spacing: 0;
        border-collapse: collapse;
        font-size: {{ fontsize }};
    }
    table.products .total-ht td {
        padding-top: 15mm;
        padding-bottom: 1mm;
    }
    table.products .total-tva td {

    }
    table.products .total-ttc td {

    }
    table.products th {
        padding: 4mm;
        background: #bad6ef;
    }
    table.products td {
        border-bottom: solid 1px #bad6ef;
        padding: 3mm;
        font-size: {{ fontsize }};
    }

    .payment-method {
        background: {{ background }};
        padding: 10px;
        border-radius: 7px;
        border: 1px solid #000000;
        width: fit-content;
    }


    .no-border-bottom, tr.no-border-bottom td {
        border-bottom: none;
    }
    .product-title {
        font-weight: bold;
    }
    .footer {
        text-align: center;
        position: absolute;
        bottom: 15mm;
        width: 100%;
        font-size: 8pt;
    }
    .page-header {
        text-align: center;
        width: 100%;
        font-size: 8pt;
    }
    .page-footer {
        text-align: center;
        width: 100%;
        font-size: 8pt;
    }
    .qrcode-container {
        width: 100mm;
        background: #6bc7be;
        padding: 10px;
        border-radius: 10px;
    }
    table.products td.col-description { padding-left: 0}

    .colspan2 {
        width: 70%;
    }

    .delivery-time {max-width: 350px;}

    table.products .col-description {width: 55%;}
    table.products .col-pu {width: 15%;}
    table.products .col-qty {width: 15%;}
    table.products .col-price-ht {width: 15%;}

    .signature {
        height: 5mm;
        border: 1px solid #000000;
        padding: 10px;
    }

    .page, table {
        font-size: 10pt;
    }

</style>

<page class="page" style="font-size: 10pt;" backtop="10mm" backbottom="20mm" backleft="10mm" backright="10mm">

    <table style="width:100%">
        <tr>
            <td class="row-logo"><img src="{{ infos.logo }}" alt="logo"></td>
            {#<td class="row-logo">{{ infos.logo|raw }}</td>#}
            <td class="row-estimate-info">
                <div class="estimate-infos">
                    <div class="title">FACTURE</div>
                    <div class="ref">N° {{ name }}</div>
                    <div class="ref">Ref: {{ ref }}</div>
                    <div class="date">Date : {{ date }}</div>
                </div>
                <div class="client">
                    <div class="name">{{ client.name|raw }}</div>
                    <div class="address">{{ client.address|raw }}</div>
                    <div class="city">{{ client.zip }} {{ client.city|raw }}</div>
                </div>
            </td>
        </tr>
    </table>

    {% if (title) %}
        <p class="title">{{ title }}</p>
    {% endif %}

    <table class="products">
        <tr>
            {#<th style="text-align: left">Type</th>#}
            <th style="text-align: left" class="col-description">Description</th>
            <th style="text-align: right" class="col-pu">Prix unitaire HT</th>
            <th style="text-align: left" class="col-qty">Qté</th>
            {#<th style="text-align: right">TVA</th>#}
            <th style="text-align: right" class="col-price-ht">Prix HT</th>
        </tr>
        {% for product in products.data %}
            <tr>
                {#<td>{{ product.type }}</td>#}
                <td class="col-description">
                    <div class="product-title">{{ product.category|raw }} : {{ product.title|raw }}</div>
                    <div class="product-description">{{ product.description|raw }}</div>
                </td>
                <td style="text-align: right" class="col-pu">{{ product.price }}</td>
                <td class="col-qty">{{ product.qty }}</td>
                {#<td style="text-align: right">0%</td>#}
                <td class="col-price-ht" style="text-align: right">{{ product.price }}</td>
            </tr>
        {% endfor %}

        <tr class="ntotal-ht">
            <td colspan="2" style="border-bottom: none;" class="no-border-bottom colspan2"></td>
            <td style="text-align: right">Total HT</td>
            <td style="text-align: right">{{ products.totalHT }}</td>
        </tr>

        <tr class="total-tva">
            <td colspan="2" style="border-bottom: none;" class="no-border-bottom colspan2">{{ infos.notva }}</td>
            <td style="text-align: right">Total TVA</td>
            <td style="text-align: right">{{ products.totalTVA }}</td>
        </tr>

        <tr class="total-ttc">
            <td colspan="2" style="border-bottom: none;padding: 0;" class="no-border-bottom colspan2"><div class="delivery-time">Payé {{ paid_with_method }}</div></td>
            <td style="text-align: right;font-weight: bold;font-size: 12pt;background: #bad6ef;">Total TTC</td>
            <td style="text-align: right;font-weight: bold;font-size: 12pt;background: #bad6ef;">{{ products.totalTTC }}</td>
        </tr>
    </table>

    <div>{{ extra_content }}</div>

    {#<nobreak>
        <table>
            <tr>
                <td style="width: 50%;">
                    <div class="payment-method">
                        <p style="font-weight: bold">Modalité de règlement</p>
                        <p><b>Acompte de 30% à la commande, soit {{ products.account_30 }}</b>,<br>Solde restant, <b>soit {{ products.balance_30 }} à la livraison</b></p>
                        <p>Paiement par virement/versement bancaire :<br>{{ infos.iban }}<br> avec la référence "{{ ref }}"</p>
                    </div>
                </td>
                <td style="width: 50%;">
                    {% if qrcode %}
                        <table class="qrcode-container">
                            <tr>
                                <td>Paiement plus facile en ligne</td>
                                <td rowspan="3"><qrcode value="{{ qrcode }}" style="width: 20mm;"></qrcode></td>
                            </tr>
                            <tr>
                                <td><a href="{{ qrcode }}">{{ qrcode }}</a></td>
                            </tr>
                            <tr>
                                <td>OU en flashant le QR Code</td>
                            </tr>
                        </table>
                    {% endif %}
                </td>
            </tr>
        </table>



    </nobreak>#}

    {#<nobreak>
        <p style="font-weight: bold">Merci de nous retourner ce devis signé avec la mention "bon pour accord"</p>
        <table class="signbox" style="width: 50%">
            <tr>
                <td>Votre paraphe mentionne que vous avez lu <br>et accepté les Conditions Générales de Vente avec <br>la référence {{ ref }},présentes sur ce devis.</td>
                <td style="border: 1px solid #000000;padding: 5px" valign="top">Paraphe<br>pour les CGV</td>
                <td style="width: 70mm">
                    <div class="signcard" style="height: 45mm;border: 1px solid #000000">
                        <table style="width: 100%">
                            <tr>
                                <td style="text-align: center;width: 50%">Date</td>
                                <td style="text-align: center;width: 50%">Signature<br>précédée de<br>"bon pour accord"</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>


        #}{#<p>En signant je déclare avoir lu et accepté les condition générales de vente avec la référence {{ ref }}, présents sur ce devis.</p>
        <div class="signature">
            <table>
                <tr>
                    <td>Date</td>
                    <td>Signature</td>
                </tr>
            </table>
        </div>#}{#
    </nobreak>#}

    {#<nobreak>
        <p style="font-weight: bold">Délai prévisionnel de réalisation</p>
        <p>Livraison (mise en production du site) sous {{ delivery_time}} à compter de la réception du devis dûment accepté, sous réserve de la fourniture des
            contenus et de l'accès à un espace d'hébergement opérationnel conformes aux spécifications.</p>
    </nobreak>#}

    {#<div class="footer">{{ infos.footer }}</div>#}



    {#{{ cgv|raw }}#}



    {#<page>
        <page_footer>
            Page [[page_cu]] sur [[page_nb]]
        </page_footer>
    </page>#}

    <page_footer class="page-footer" align="center">
        <hr>
        {{ infos.footer }} - Page [[page_cu]] sur [[page_nb]]
    </page_footer>

</page>