{% extends 'emails/base_email.html.twig' %}

{% block email_title %}Bienvenue - {{ system_name }}{% endblock %}

{% block preheader %}Votre compte employé chez {{ company.name }} a été créé avec succès{% endblock %}

{% block email_content %}
    <!-- Titre principal -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 20px 0;">
        <tr>
            <td align="center" style="padding: 20px; background-color: #f0fdf4; border-radius: 6px;">
                <h1 style="margin: 0; font-size: 24px; font-weight: bold; color: #059669;">
                    🎉 Bienvenue chez {{ company.name }} !
                </h1>
                <p style="margin: 10px 0 0 0; font-size: 16px; color: #10b981;">
                    Votre compte employé a été créé avec succès
                </p>
            </td>
        </tr>
    </table>

    <!-- Message principal -->
    <p style="margin: 0 0 15px 0;">
        Bonjour <strong>{{ user.firstName }} {{ user.lastName }}</strong>,
    </p>

    <p style="margin: 0 0 20px 0;">
        Nous sommes ravis de vous accueillir ! Un compte employé a été créé pour vous par
        <strong>{{ admin_name }}</strong> le {{ timestamp|date('d/m/Y à H:i') }}.
    </p>

    <!-- Informations entreprise -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 25px 0; background-color: #f9fafb; border-left: 4px solid #1e40af; border-radius: 4px;">
        <tr>
            <td style="padding: 15px; font-size: 14px; color: #1a1a1a;">
                <p style="margin: 0 0 5px 0;">
                    <strong style="color: #1e40af;">📍 Entreprise :</strong>
                </p>
                <p style="margin: 0; line-height: 1.6;">
                    {{ company.name }}
                    {% if company.city or company.country %}
                        <br>{{ company.city }}{% if company.city and company.country %}, {% endif %}{{ company.country }}
                    {% endif %}
                </p>
            </td>
        </tr>
    </table>

    <!-- Identifiants de connexion -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 25px 0; background-color: #fffbeb; border: 2px solid #f59e0b; border-radius: 6px; overflow: hidden;">
        <tr>
            <td style="padding: 20px;">
                <p style="margin: 0 0 15px 0; font-size: 16px; font-weight: bold; color: #92400e;">
                    🔐 Vos identifiants de connexion :
                </p>

                <!-- Email -->
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 10px 0;">
                    <tr>
                        <td style="padding: 12px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px;">
                            <p style="margin: 0; font-size: 14px;">
                                <span style="font-weight: bold; color: #92400e;">Email :</span>
                                <span style="font-family: 'Courier New', monospace; color: #1a1a1a;">{{ user.email }}</span>
                            </p>
                        </td>
                    </tr>
                </table>

                <!-- Mot de passe temporaire -->
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding: 12px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px;">
                            <p style="margin: 0; font-size: 14px;">
                                <span style="font-weight: bold; color: #92400e;">Mot de passe temporaire :</span>
                                <span style="font-family: 'Courier New', monospace; color: #1a1a1a; font-weight: bold;">{{ temporary_password }}</span>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Avertissement de sécurité -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 25px 0; background-color: #fef2f2; border-left: 4px solid #dc2626; border-radius: 4px;">
        <tr>
            <td style="padding: 15px; font-size: 14px; color: #991b1b;">
                <p style="margin: 0 0 8px 0;">
                    <strong style="color: #dc2626;">⚠️ Important - Sécurité</strong>
                </p>
                <p style="margin: 0; line-height: 1.6;">
                    Pour votre sécurité, vous devrez obligatoirement changer ce mot de passe lors de votre première connexion.
                    Ne partagez jamais vos identifiants avec qui que ce soit.
                </p>
            </td>
        </tr>
    </table>

    <!-- Bouton bulletproof -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto 25px auto;">
        <tr>
            <td align="center" style="border-radius: 6px; background-color: #059669;">
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
                             href="{{ base_url }}/login"
                             style="height:48px;v-text-anchor:middle;width:240px;"
                             arcsize="13%"
                             fillcolor="#059669">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-family:Arial;font-size:16px;font-weight:bold;">
                        Se connecter maintenant
                    </center>
                </v:roundrect>
                <![endif]-->
                <!--[if !mso]><!-->
                <a href="{{ base_url }}/login"
                   target="_blank"
                   style="display: inline-block; padding: 14px 28px; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; border-radius: 6px; background-color: #059669;">
                    Se connecter maintenant
                </a>
                <!--<![endif]-->
            </td>
        </tr>
    </table>

    <!-- Divider -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 20px 0;">
        <tr>
            <td style="border-top: 1px solid #e5e7eb;"></td>
        </tr>
    </table>

    <!-- Informations supplémentaires -->
    <p style="margin: 0 0 20px 0; line-height: 1.6;">
        Une fois connecté(e), vous aurez accès à votre tableau de bord et aux fonctionnalités de la plateforme.
    </p>

    <!-- Informations de sécurité -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0; background-color: #f9fafb; border-radius: 4px;">
        <tr>
            <td style="padding: 15px; font-size: 13px; color: #6b7280;">
                <p style="margin: 0 0 5px 0;">
                    <strong style="color: #1a1a1a;">Informations de sécurité</strong>
                </p>
                <p style="margin: 0; line-height: 1.6;">
                    Cette action a été effectuée depuis l'adresse IP <code style="background-color: #e5e7eb; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace;">{{ ip_address }}</code>
                    {% if location and location.country %}
                        ({{ location.city }}, {{ location.country }})
                    {% endif %}
                    le {{ timestamp|date('d/m/Y à H:i') }}.
                </p>
            </td>
        </tr>
    </table>
{% endblock %}