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

{% block title %}Email de test - Association E-Cosplay{% endblock %}

{% block content %}

    {# ─── Bandeau environnement ─── #}
    {% if env == 'prod' %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td style="background-color: #dc2626; color: #ffffff; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;">
                    ENVIRONNEMENT PRODUCTION
                </td>
            </tr>
        </table>
    {% else %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td style="background-color: #f59e0b; color: #111827; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;">
                    ENVIRONNEMENT DEVELOPPEMENT
                </td>
            </tr>
        </table>
    {% endif %}

    {# ─── Titre ─── #}
    <h1 style="font-size: 20px; font-weight: 700; text-transform: uppercase; margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">Email de test CRM E-Cosplay</h1>

    {# ─── Texte d'introduction ─── #}
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        Bonjour,
    </p>
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        Ceci est un <strong>email de test</strong> envoye depuis le CRM E-Cosplay le <strong>{{ date|date('d/m/Y') }}</strong> a <strong>{{ date|date('H:i:s') }}</strong>.
        Cet email permet de verifier le rendu sur differents clients email (Outlook, Gmail, Apple Mail, Orange, etc.).
    </p>

    {# ─── Bloc info sombre ─── #}
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <tr>
            <td style="background-color: #111827; color: #ffffff; padding-top: 16px; padding-bottom: 16px; padding-left: 20px; padding-right: 20px;">
                <p style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; color: #fabf04; font-weight: 700;">Informations du test</p>
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px; width: 120px;">Destinataire</td>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ email }}</td>
                    </tr>
                    <tr>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px;">Environnement</td>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ env|upper }}</td>
                    </tr>
                    <tr>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px;">Date</td>
                        <td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ date|date('d/m/Y H:i:s') }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {# ─── Tableau de donnees ─── #}
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
        Exemple de tableau de donnees :
    </p>
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; border: 1px solid #e5e5e5;">
        <tr>
            <td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #333333;">Service</td>
            <td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: right; border-bottom: 1px solid #333333;">Tarif</td>
            <td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; border-bottom: 1px solid #333333;">Statut</td>
        </tr>
        <tr>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">Esy-Web</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">100,00 &#8364; / mois</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #16a34a; font-weight: 700;">ACTIF</td>
        </tr>
        <tr>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">E-Mail</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">30,00 &#8364; / mois</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #16a34a; font-weight: 700;">ACTIF</td>
        </tr>
        <tr>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">E-Protect Pro</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">60,00 &#8364; / mois</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #dc2626; font-weight: 700;">IMPAYE</td>
        </tr>
        <tr style="background-color: #f9fafb;">
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700;">TOTAL</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; text-align: right;">190,00 &#8364; / mois</td>
            <td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px;"></td>
        </tr>
    </table>

    {# ─── Texte avec mise en forme ─── #}
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0;">
        Verification des styles de texte :
    </p>
    <ul style="font-size: 14px; mso-line-height-rule: exactly; line-height: 25px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; padding-left: 20px;">
        <li>Texte <strong>gras</strong></li>
        <li>Texte <em>italique</em></li>
        <li>Texte <span style="text-decoration: underline;">souligne</span></li>
        <li>Texte avec <a href="https://crm.e-cosplay.fr" style="color: #4338ca; text-decoration: underline;">lien cliquable</a></li>
        <li>Texte en <span style="color: #16a34a; font-weight: 700;">vert (succes)</span></li>
        <li>Texte en <span style="color: #dc2626; font-weight: 700;">rouge (erreur)</span></li>
        <li>Texte en <span style="color: #fabf04; font-weight: 700;">or (accent)</span></li>
    </ul>

    {# ─── Bloc alerte ─── #}
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <tr>
            <td style="border-left: 3px solid #fabf04; background-color: #f9fafb; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; font-size: 13px; mso-line-height-rule: exactly; line-height: 20px;">
                <strong>Information :</strong> ceci est un bloc d'alerte avec bordure laterale gold. Il est utilise pour mettre en avant une information importante dans les emails.
            </td>
        </tr>
    </table>

    {# ─── Boutons ─── #}
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
        Verification des boutons :
    </p>
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <tr>
            <td align="center" style="padding-top: 8px; padding-bottom: 8px;">
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://crm.e-cosplay.fr" style="height:44px;v-text-anchor:middle;width:280px;" arcsize="0%" fillcolor="#fabf04" stroke="f">
                <center style="color:#111827;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;">Bouton principal (Gold)</center>
                </v:roundrect>
                <![endif]-->
                <!--[if !mso]><!-->
                <a href="https://crm.e-cosplay.fr" style="display: inline-block; background-color: #fabf04; border: 1px solid #e5a800; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; color: #111827; font-weight: 700; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Bouton principal (Gold)</a>
                <!--<![endif]-->
            </td>
        </tr>
        <tr>
            <td align="center" style="padding-top: 8px; padding-bottom: 8px;">
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://crm.e-cosplay.fr" style="height:44px;v-text-anchor:middle;width:280px;" arcsize="0%" fillcolor="#111827" stroke="f">
                <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;">Bouton secondaire (Dark)</center>
                </v:roundrect>
                <![endif]-->
                <!--[if !mso]><!-->
                <a href="https://crm.e-cosplay.fr" style="display: inline-block; background-color: #111827; border: 1px solid #111827; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; color: #ffffff; font-weight: 700; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Bouton secondaire (Dark)</a>
                <!--<![endif]-->
            </td>
        </tr>
    </table>

    {# ─── Liens vers les applications ─── #}
    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
        Liens vers les applications E-Cosplay :
    </p>
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; border: 1px solid #e5e5e5;">
        <tr>
            <td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
                <a href="https://crm.e-cosplay.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">crm.e-cosplay.fr</a>
                <span style="font-size: 11px; color: #888888;"> - Plateforme de gestion</span>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
                <a href="https://sign.e-cosplay.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">sign.e-cosplay.fr</a>
                <span style="font-size: 11px; color: #888888;"> - Signature electronique</span>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
                <a href="https://payment.e-cosplay.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">payment.e-cosplay.fr</a>
                <span style="font-size: 11px; color: #888888;"> - Portail de paiement</span>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
                <a href="https://status.e-cosplay.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">status.e-cosplay.fr</a>
                <span style="font-size: 11px; color: #888888;"> - Status des services</span>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px;">
                <a href="https://stripe.e-cosplay.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">stripe.e-cosplay.fr</a>
                <span style="font-size: 11px; color: #888888;"> - Webhooks Stripe / Dashboard Connect</span>
            </td>
        </tr>
    </table>

    {# ─── Fichier joint simule ─── #}
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <tr>
            <td style="background-color: #f9fafb; border: 1px solid #e5e5e5; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-right: 12px; vertical-align: middle;">
                            <span style="font-size: 24px;">&#128206;</span>
                        </td>
                        <td style="vertical-align: middle;">
                            <p style="font-size: 13px; font-weight: 700; margin-top: 0; margin-right: 0; margin-bottom: 2px; margin-left: 0;">facture-exemple-2026-04.pdf</p>
                            <p style="font-size: 11px; color: #888888; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">Simulation d'un fichier joint (128 Ko)</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {# ─── Pied de mail ─── #}
    <p style="font-size: 12px; color: #888888; mso-line-height-rule: exactly; line-height: 18px; margin-top: 16px; margin-right: 0; margin-bottom: 0; margin-left: 0;">
        Cet email a ete envoye automatiquement par la commande <strong>app:mail:test</strong>.
        Si vous recevez cet email, la configuration du service de messagerie est fonctionnelle.
    </p>

{% endblock %}
