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

{% block title %}Votre compte Association E-Cosplay{% endblock %}

{% block content %}
    <h1 style="font-size: 20px; font-weight: bold; text-transform: uppercase; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">Bienvenue {{ firstName }} !</h1>
    <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;">Votre compte sur le <strong>CRM E-Cosplay</strong> a ete cree par l'administration de la Association E-Cosplay.</p>

    <div style="background-color: #111827; color: #fff; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0;">
        <p style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; opacity: 0.7;">Vos identifiants de connexion</p>
        <div style="font-size: 14px;">
            <div style="padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0;">
                <span style="color: #fabf04; font-weight: bold; display: inline-block; width: 120px;">Email</span>
                <span style="color: #fff;">{{ email }}</span>
            </div>
            <div style="padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0;">
                <span style="color: #fabf04; font-weight: bold; display: inline-block; width: 120px;">Mot de passe</span>
                <span style="color: #fff; font-family: monospace; letter-spacing: 1px;">{{ tempPassword }}</span>
            </div>
        </div>
    </div>

    <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;">Lors de votre premiere connexion, il vous sera demande de :</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><strong>Changer votre mot de passe</strong></li>
        <li><strong>Configurer la double authentification (OTP)</strong> via une application telle que Google Authenticator, Authy ou Microsoft Authenticator</li>
    </ul>

    {% if groups|length > 0 %}
        <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;">Acces attribues :</p>
        <ul style="font-size: 13px; mso-line-height-rule: exactly; line-height: 23px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; padding-left: 20px;">
            {% for group in groups %}
                <li>
                    {% if group == 'gp_ticket' %}Billetterie
                    {% elseif group == 'gp_asso' %}Association
                    {% elseif group == 'gp_contest' %}Concours
                    {% elseif group == 'gp_mail' %}Mail
                    {% elseif group == 'gp_mailing' %}Mailing
                    {% elseif group == 'gp_sign' %}Signature electronique
                    {% elseif group == 'gp_ndd' %}Nom de domaine
                    {% else %}{{ group }}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}

    <div style="margin-top: 24px; margin-right: 0; margin-bottom: 24px; margin-left: 0;">
        <a href="{{ url('app_home') }}" style="display: inline-block; background-color: #fabf04; border: 1px solid #e5e5e5; padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 24px; color: #111827; font-weight: 700; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Se connecter</a>
    </div>

    <p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">Une fois sur la page de connexion, cliquez sur le bouton <strong>"Connexion E-Cosplay"</strong> puis saisissez vos identifiants ci-dessus.</p>

    <p style="font-size: 12px; color: #999; margin-top: 16px; margin-right: 0; margin-bottom: 0; margin-left: 0;">Pour des raisons de securite, ne partagez jamais vos identifiants. Si vous n'etes pas a l'origine de cette demande, contactez <a href="mailto:client@e-cosplay.fr" style="color: #4338ca;">client@e-cosplay.fr</a>.</p>
{% endblock %}
