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

{% block email_title %}Nouveau appareil - Code d'approbation - 2AB Portal{% endblock %}

{% block preheader %}Votre code de vérification : {{ code }}. Valide pendant {{ remainingMinutes }} minutes.{% endblock %}

{% block email_content %}
    <!-- Titre principal -->
    <h1 style="margin: 0 0 24px 0; font-size: 26px; font-weight: bold; color: #1a1a1a;">
        Nouveau appareil d&eacute;tect&eacute;
    </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;">
        Un nouveau appareil a tent&eacute; de se connecter &agrave; votre compte :
    </p>

    <!-- Informations appareil (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; border-left: 4px solid #1e40af; overflow: hidden;">
        <tr>
            <td style="padding: 20px; font-size: 14px; line-height: 1.8; color: #374151;">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Appareil :</strong> {{ device.displayName }}
                        </td>
                    </tr>
                    {% if device.browser %}
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Navigateur :</strong> {{ device.browser }}
                        </td>
                    </tr>
                    {% endif %}
                    {% if device.os %}
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Syst&egrave;me d'exploitation :</strong> {{ device.os }}
                        </td>
                    </tr>
                    {% endif %}
                    {% if device.deviceType %}
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Type d'appareil :</strong>
                            {% if device.deviceType == 'desktop' %}
                                Ordinateur
                            {% elseif device.deviceType == 'mobile' %}
                                Mobile
                            {% elseif device.deviceType == 'tablet' %}
                                Tablette
                            {% else %}
                                Inconnu
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Adresse IP :</strong> {{ device.lastIpAddress }}
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Pays :</strong> {{ device.lastCountry ?? 'Inconnu' }}
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Ville :</strong> {{ device.lastCity ?? 'Inconnue' }}
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 4px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                            <strong style="color: #1a1a1a;">Date :</strong> {{ device.firstSeenAt|date('d/m/Y à H:i') }}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Instructions -->
    <p style="margin: 0 0 20px 0;">
        Pour approuver cet appareil, veuillez utiliser le code suivant :
    </p>

    <!-- Code d'approbation (table pour compatibilité Outlook) -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 24px 0;">
        <tr>
            <td align="center" style="padding: 28px 20px; background-color: #10b981; border-radius: 6px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center">
                            <p style="margin: 0; font-size: 36px; font-weight: bold; color: #ffffff; letter-spacing: 8px; font-family: 'Courier New', Courier, monospace;">
                                {{ code }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Expiration warning (table pour compatibilité Outlook) -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 32px 0;">
        <tr>
            <td style="padding: 16px 20px; background-color: #fef2f2; border-left: 4px solid #dc2626; border-radius: 4px;">
                <p style="margin: 0; font-size: 14px; font-weight: bold; color: #991b1b; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                    &#9200; Ce code expire dans {{ remainingMinutes }} minutes.
                </p>
            </td>
        </tr>
    </table>

    <!-- Alerte sécurité -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 16px 0;">
        <tr>
            <td style="padding: 20px; background-color: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 4px;">
                <p style="margin: 0 0 12px 0; font-weight: bold; color: #92400e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;">
                    Si ce n'&eacute;tait pas vous :
                </p>
                <p style="margin: 0 0 12px 0; color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">
                    Quelqu'un tente peut-&ecirc;tre d'acc&eacute;der &agrave; votre compte. Nous vous recommandons de :
                </p>
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding: 2px 0 2px 0;">
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding-right: 8px; vertical-align: top; color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">&bull;</td>
                                    <td style="color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Changer votre mot de passe imm&eacute;diatement</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 2px 0 2px 0;">
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding-right: 8px; vertical-align: top; color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">&bull;</td>
                                    <td style="color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Activer l'authentification &agrave; deux facteurs si ce n'est pas d&eacute;j&agrave; fait</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 2px 0 2px 0;">
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding-right: 8px; vertical-align: top; color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">&bull;</td>
                                    <td style="color: #78350f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">V&eacute;rifier vos appareils de confiance</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Signature -->
    <p style="margin: 32px 0 0 0;">
        Cordialement,<br>
        L'&eacute;quipe {{ system_name ?? 'S&eacute;curit&eacute;' }}
    </p>
{% endblock %}