{% extends 'email/base.html.twig' %}

{% block content %}
<table width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td style="padding: 32px;">
            {% set greeting = customer.raisonSociale ? 'Chez ' ~ customer.raisonSociale : 'Bonjour ' ~ customer.firstName %}
            <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 16px;">{{ greeting }},</h1>
            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 0 0 16px;">
                Votre contrat E-Flex <strong>{{ eflex.reference }}</strong> a ete signe avec succes. Le contrat signe et le certificat d'audit sont en piece jointe.
            </p>
            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0; border: 1px solid #e5e7eb;">
                <tr><td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb; width: 35%;">Reference</td><td style="padding: 10px 16px; font-family: monospace; font-size: 13px; font-weight: 700;">{{ eflex.reference }}</td></tr>
                <tr><td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Montant total</td><td style="padding: 10px 16px; font-family: monospace; font-size: 16px; font-weight: 700;">{{ eflex.totalAmount|number_format(2, ',', ' ') }} &euro;</td></tr>
                <tr><td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Mensualite</td><td style="padding: 10px 16px; font-family: monospace; font-size: 14px; font-weight: 700; color: #fabf04;">{{ eflex.monthlyAmount|number_format(2, ',', ' ') }} &euro;/mois x {{ eflex.nbLines }}</td></tr>
            </table>

            <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #111827; margin: 20px 0 10px;">Coordonnees bancaires pour virement :</h2>
            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 10px 0 20px; border: 1px solid #e5e7eb;">
                <tr><td style="padding: 8px 16px; font-size: 11px; font-weight: 700; color: #9ca3af; background: #f9fafb; width: 30%;">Titulaire</td><td style="padding: 8px 16px; font-size: 13px; font-weight: 700;">Association E-Cosplay</td></tr>
                <tr><td style="padding: 8px 16px; font-size: 11px; font-weight: 700; color: #9ca3af; background: #f9fafb;">IBAN</td><td style="padding: 8px 16px; font-family: monospace; font-size: 13px;">FR76 XXXX XXXX XXXX XXXX XXXX XXX</td></tr>
                <tr><td style="padding: 8px 16px; font-size: 11px; font-weight: 700; color: #9ca3af; background: #f9fafb;">BIC</td><td style="padding: 8px 16px; font-family: monospace; font-size: 13px;">XXXXXXXX</td></tr>
                <tr><td style="padding: 8px 16px; font-size: 11px; font-weight: 700; color: #9ca3af; background: #f9fafb;">Reference</td><td style="padding: 8px 16px; font-family: monospace; font-size: 13px;">{{ eflex.reference }}</td></tr>
            </table>

            {% if processUrl is defined and processUrl %}
                <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 0 0 16px;">
                    Pour configurer le prelevement automatique ou payer par carte bancaire, cliquez ci-dessous :
                </p>
                <table cellpadding="0" cellspacing="0" style="margin: 24px auto;"><tr><td style="background-color: #fabf04; padding: 14px 32px;"><a href="{{ processUrl }}" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111827; text-decoration: none;">Configurer mes paiements</a></td></tr></table>
            {% endif %}

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #9ca3af; margin: 16px 0 0;">Pour toute question : <a href="mailto:client@e-cosplay.fr" style="color: #fabf04;">client@e-cosplay.fr</a></p>
        </td>
    </tr>
</table>
{% endblock %}
