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

{% block title %}Bienvenue chez E-Cosplay - Espace Revendeur{% 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;">Nous avons le plaisir de vous informer que votre compte <strong>revendeur</strong> a ete cree sur le CRM 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;">Votre code revendeur</p>
        <p style="font-size: 28px; font-weight: 700; color: #fabf04; text-align: center; font-family: monospace; letter-spacing: 4px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">{{ codeRevendeur }}</p>
    </div>

    <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: bold;">Pour acceder a votre espace, suivez ces etapes :</p>

    <div style="width: 100%; margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <div style="padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px; border-left: 4px solid #fabf04; background-color: #f9fafb;">
            <p style="font-size: 12px; font-weight: 700; text-transform: uppercase; color: #fabf04; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Etape 1</p>
            <p style="font-size: 14px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; mso-line-height-rule: exactly; line-height: 22px;">Cliquez sur le bouton ci-dessous pour <strong>definir votre mot de passe</strong>. Ce lien est a usage unique.</p>
        </div>
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="font-size: 1px; mso-line-height-rule: exactly; line-height: 8px;">&nbsp;</td></tr></table>
        <div style="padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px; border-left: 4px solid #fabf04; background-color: #f9fafb;">
            <p style="font-size: 12px; font-weight: 700; text-transform: uppercase; color: #fabf04; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Etape 2</p>
            <p style="font-size: 14px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; mso-line-height-rule: exactly; line-height: 22px;">Une fois votre mot de passe defini, rendez-vous sur la page de connexion et identifiez-vous avec votre email <strong>{{ email }}</strong> et votre nouveau mot de passe.</p>
        </div>
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="font-size: 1px; mso-line-height-rule: exactly; line-height: 8px;">&nbsp;</td></tr></table>
        <div style="padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px; border-left: 4px solid #fabf04; background-color: #f9fafb;">
            <p style="font-size: 12px; font-weight: 700; text-transform: uppercase; color: #fabf04; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Etape 3</p>
            <p style="font-size: 14px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; mso-line-height-rule: exactly; line-height: 22px;">Vous accederez a votre <strong>Espace Revendeur</strong> ou vous pourrez gerer vos ventes, commandes et factures.</p>
        </div>
    </div>

    <div style="margin-top: 24px; margin-right: 0; margin-bottom: 24px; margin-left: 0; text-align: center;">
        <a href="{{ setPasswordUrl }}" style="display: inline-block; background-color: #fabf04; border: 1px solid #e5e5e5; padding-top: 14px; padding-right: 24px; padding-bottom: 14px; padding-left: 24px; color: #111827; font-weight: 700; text-transform: uppercase; font-size: 14px; text-decoration: none; letter-spacing: 1px;">Definir mon mot de passe</a>
    </div>

    <div style="margin-top: 0; margin-right: 0; margin-bottom: 24px; margin-left: 0; text-align: center;">
        <a href="{{ url('app_home') }}" style="display: inline-block; background-color: #ffffff; 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: 12px; text-decoration: none; letter-spacing: 1px;">Acceder a la page de connexion</a>
    </div>

    <div style="background-color: #f9fafb; padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; border: 1px solid #e5e7eb; margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
        <p style="font-size: 12px; font-weight: bold; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0;">Informations de votre compte :</p>
        <div style="font-size: 12px;">
            <div style="padding-top: 2px; padding-right: 0; padding-bottom: 2px; padding-left: 0;">
                <span style="color: #666; display: inline-block; width: 120px;">Code revendeur</span>
                <span style="font-weight: bold; font-family: monospace;">{{ codeRevendeur }}</span>
            </div>
            <div style="padding-top: 2px; padding-right: 0; padding-bottom: 2px; padding-left: 0;">
                <span style="color: #666; display: inline-block; width: 120px;">Email</span>
                <span style="font-weight: bold;">{{ email }}</span>
            </div>
            <div style="padding-top: 2px; padding-right: 0; padding-bottom: 2px; padding-left: 0;">
                <span style="color: #666; display: inline-block; width: 120px;">Nom</span>
                <span style="font-weight: bold;">{{ firstName }} {{ lastName }}</span>
            </div>
        </div>
    </div>

    <p style="font-size: 12px; color: #999; margin-top: 16px; margin-right: 0; margin-bottom: 0; margin-left: 0;">Pour toute question, contactez-nous a <a href="mailto:client@e-cosplay.fr" style="color: #4338ca;">client@e-cosplay.fr</a>. Conservez precieusement votre code revendeur {{ codeRevendeur }}.</p>
{% endblock %}
