{% extends 'mails/base.twig' %}

{% block content %}
    <mj-section background-color="#ffffff" padding-top="20px">
        <mj-column width="100%">
            <mj-text font-size="14px" color="#475569" font-family="Arial, sans-serif" line-height="1.6">
                Bonne nouvelle ! Le client <strong>{{ datas.devis.customer.name }} {{ datas.devis.customer.surname }}</strong> vient de signer numériquement son devis.
            </mj-text>
        </mj-column>
    </mj-section>

    <mj-section background-color="#ffffff" padding="0px">
        <mj-column width="90%" background-color="#f8fafc" border="1px solid #e2e8f0" border-radius="8px">
            <mj-table font-family="Arial, sans-serif" font-size="14px" padding="15px">
                <tr>
                    <td style="padding: 5px 0; color: #64748b;">N° Devis :</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: bold;">{{ datas.devis.num }}</td>
                </tr>
                <tr>
                    <td style="padding: 5px 0; color: #64748b;">Client :</td>
                    <td style="padding: 5px 0; text-align: right;">{{ datas.devis.customer.name }}</td>
                </tr>
                <tr>
                    <td style="padding: 5px 0; color: #64748b;">Montant HT :</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: bold; color: #2563eb;">{{ (datas.devis|totalQuoto)|number_format(2, ',', ' ') }} €</td>
                </tr>
                <tr>
                    <td style="padding: 5px 0; color: #64748b;">Date de signature :</td>
                    <td style="padding: 5px 0; text-align: right;">{{ "now"|date("d/m/Y à H:i") }}</td>
                </tr>
            </mj-table>
        </mj-column>
    </mj-section>

    <mj-section background-color="#ffffff">
        <mj-column width="100%">
            <mj-text font-size="13px" color="#ef4444" font-family="Arial, sans-serif" font-style="italic" align="center">
                Rappel : Le client a reçu l'instruction de régler l'acompte sous 3 jours.
            </mj-text>
            <mj-button background-color="#1e293b" color="white" font-size="14px" font-weight="bold" href="https://reservation.ludikevent.fr/crm/devis" border-radius="6px" padding-top="20px">
                VOIR LE DEVIS SUR LE CRM
            </mj-button>
        </mj-column>
    </mj-section>
{% endblock %}
