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

{% block email_title %}Code de vérification 2FA - 2AB Portal{% endblock %}

{% block preheader %}Votre code de vérification à deux facteurs : {{ code }}. Expire dans {{ expiration_minutes }} minutes.{% endblock %}

{% block email_content %}
    <!-- Titre principal -->
    <h1 style="margin: 0 0 24px 0; font-size: 26px; font-weight: bold; color: #1a1a1a;">
        Code de v&eacute;rification
    </h1>

    <!-- Message d'accueil -->
    <p style="margin: 0 0 16px 0;">
        Bonjour <strong>{{ user.firstName ?: user.email }}</strong>,
    </p>

    <p style="margin: 0 0 24px 0;">
        Voici votre code de v&eacute;rification &agrave; deux facteurs :
    </p>

    <!-- Code de vérification (table pour compatibilité Outlook) -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 28px 0;">
        <tr>
            <td align="center" style="padding: 32px 20px; background-color: #667eea; border-radius: 8px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center">
                            <p style="margin: 0; font-size: 48px; font-weight: bold; color: #ffffff; letter-spacing: 12px; font-family: 'Courier New', Courier, monospace;">
                                {{ code }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Expiration info -->
    <p style="margin: 0 0 28px 0;">
        <strong>Ce code expire dans {{ expiration_minutes }} minutes.</strong>
    </p>

    {% if device is defined and device is not null %}
        <!-- Informations de connexion (table pour compatibilité Outlook) -->
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 28px 0; background-color: #f9fafb; border-radius: 6px; overflow: hidden;">
            <tr>
                <td style="padding: 20px; font-size: 14px; line-height: 1.8; color: #374151;">
                    <h3 style="margin: 0 0 16px 0; text-align: center; font-size: 16px; color: #1a1a1a;">
                        Informations de connexion
                    </h3>

                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            &#128187; Appareil :
                                        </td>
                                        <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            {{ device.name }}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>

                        {% if device.platform is defined and device.platform in ['android', 'ios'] %}
                            <!-- Mobile device -->
                            <tr>
                                <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                &#128241; Syst&egrave;me d'exploitation :
                                            </td>
                                            <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                {{ device.platform|capitalize }} {{ device.os }}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                            {% if device.manufacturer is defined and device.model is defined %}
                            <tr>
                                <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                &#127981; Mod&egrave;le :
                                            </td>
                                            <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                {{ device.model }} ({{ device.manufacturer }})
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            {% endif %}
                        {% else %}
                            <!-- Web device -->
                            <tr>
                                <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                &#127760; Navigateur :
                                            </td>
                                            <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                {{ device.browser }}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                            <tr>
                                <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                &#128421; Syst&egrave;me d'exploitation :
                                            </td>
                                            <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                                {{ device.os }}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        {% endif %}

                        {% if ip_address is defined %}
                        <tr>
                            <td style="padding: 6px 0; border-bottom: 1px solid #e5e7eb;">
                                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            &#127757; Adresse IP :
                                        </td>
                                        <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            {{ ip_address }}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        {% endif %}

                        {% if location is defined and location is not null %}
                        <tr>
                            <td style="padding: 6px 0;">
                                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td style="font-weight: 600; color: #4a5568; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            &#128205; Localisation :
                                        </td>
                                        <td align="right" style="color: #2d3748; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                                            {{ location.city }}, {{ location.country }}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        {% endif %}
                    </table>
                </td>
            </tr>
        </table>
    {% endif %}

    <!-- Alerte sécurité -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0;">
        <tr>
            <td style="padding: 16px 20px; background-color: #fef3c7; border-left: 4px solid #f59e0b; border-radius: 4px;">
                <p style="margin: 0; font-weight: bold; color: #92400e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                    &#9888; Attention :
                </p>
                <p style="margin: 8px 0 0 0; color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">
                    Si vous n'avez pas demand&eacute; ce code, ignorez cet email et changez votre mot de passe imm&eacute;diatement.
                </p>
            </td>
        </tr>
    </table>

    <!-- Signature -->
    <p style="margin: 32px 0 0 0;">
        Cordialement,<br>
        L'&eacute;quipe {{ system_name|default('Application') }}
    </p>
{% endblock %}