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

{% block content %}
<table width="600" cellpadding="0" cellspacing="0" style="margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
    <tr>
        <td style="padding-top: 32px; padding-right: 32px; padding-bottom: 32px; padding-left: 32px;">
            <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #111827; margin-top: 0; margin-bottom: 16px; line-height: 28px;">Bienvenue {{ firstName }} !</h1>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin-top: 0; margin-bottom: 16px;">
                Votre espace client <strong>E-Cosplay</strong> a ete cree. Vous pouvez desormais acceder a vos factures, devis et suivre vos services.
            </p>

            <table width="100%" cellpadding="0" cellspacing="0" style="margin-top: 24px; margin-bottom: 24px; border-top-width: 1px; border-top-style: solid; border-top-color: #e5e7eb; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e5e7eb;">
                <tr>
                    <td style="padding-top: 16px; padding-right: 0; padding-bottom: 16px; padding-left: 0;">
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; padding-bottom: 4px;">Plateforme</td>
                            </tr>
                            <tr>
                                <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #111827;">client.e-cosplay.fr</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 0; padding-right: 0; padding-bottom: 16px; padding-left: 0;">
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; padding-bottom: 4px;">Identifiant</td>
                            </tr>
                            <tr>
                                <td style="font-family: monospace; font-size: 14px; font-weight: 700; color: #111827;">{{ email }}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin-top: 0; margin-bottom: 24px;">
                Pour activer votre compte, veuillez choisir votre mot de passe en cliquant sur le bouton ci-dessous :
            </p>

            <table cellpadding="0" cellspacing="0" style="margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
                <tr>
                    <td style="background-color: #fabf04; padding-top: 14px; padding-right: 32px; padding-bottom: 14px; padding-left: 32px;">
                        <a href="{{ setPasswordUrl }}" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111827; text-decoration: none;">Choisir mon mot de passe</a>
                    </td>
                </tr>
            </table>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #9ca3af; line-height: 18px; margin-top: 24px; margin-bottom: 0;">
                Si le bouton ne fonctionne pas, copiez ce lien dans votre navigateur :<br>
                <span style="font-family: monospace; font-size: 11px; color: #6366f1; word-break: break-all;">{{ setPasswordUrl }}</span>
            </p>
        </td>
    </tr>
</table>
{% endblock %}
