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

{% block title %}Activité suspecte détectée sur votre compte{% endblock %}

{% block content %}
<h2 style="color: #f44336;">⚠️ Alerte de sécurité</h2>

<p>Bonjour {{ user.firstName ?? user.email }},</p>

<p style="background-color: #fff3cd; border-left: 4px solid #f44336; padding: 15px; margin: 20px 0;">
    <strong>Une activité suspecte a été détectée sur votre compte.</strong>
</p>

<h3>Raison de l'alerte</h3>
<p>{{ reason }}</p>

<h3>Appareil concerné</h3>
<div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin: 20px 0;">
    <strong>Appareil :</strong> {{ device.displayName }}<br>
    {% if device.browser %}
        <strong>Navigateur :</strong> {{ device.browser }}<br>
    {% endif %}
    {% if device.os %}
        <strong>Système d'exploitation :</strong> {{ device.os }}<br>
    {% endif %}
    {% if device.deviceType %}
        <strong>Type d'appareil :</strong>
        {% if device.deviceType == 'desktop' %}
            🖥️ Ordinateur
        {% elseif device.deviceType == 'mobile' %}
            📱 Mobile
        {% elseif device.deviceType == 'tablet' %}
            📱 Tablette
        {% else %}
            ❓ Inconnu
        {% endif %}
        <br>
    {% endif %}
    <strong>Adresse IP :</strong> {{ device.lastIpAddress }}<br>
    <strong>Localisation :</strong> {{ device.lastCity ? device.lastCity ~ ', ' : '' }}{{ device.lastCountry ?? 'Inconnue' }}<br>
    <strong>Dernière activité :</strong> {{ device.lastSeenAt|date('d/m/Y à H:i') }}
</div>

<h3 style="color: #f44336;">Actions immédiates recommandées</h3>
<ul style="line-height: 1.8;">
    <li><strong>Changez votre mot de passe immédiatement</strong></li>
    <li>Déconnectez tous vos appareils depuis les paramètres de sécurité</li>
    <li>Vérifiez la liste de vos appareils de confiance</li>
    <li>Activez l'authentification à deux facteurs si ce n'est pas déjà fait</li>
    <li>Vérifiez l'historique de vos activités récentes</li>
</ul>

<div style="background-color: #e3f2fd; border-left: 4px solid #2196F3; padding: 15px; margin: 20px 0;">
    <strong>ℹ️ Note :</strong><br>
    Si vous reconnaissez cette activité et qu'elle est légitime, vous pouvez ignorer cet email.
    Sinon, veuillez prendre les mesures de sécurité ci-dessus immédiatement.
</div>

<p>Pour toute question ou assistance, contactez notre support à {{ support_email ?? 'support@example.com' }}</p>

<p>Cordialement,<br>
L'équipe {{ system_name ?? 'Sécurité' }}</p>

<p style="margin-top: 30px; color: #666; font-size: 12px;">
    Timestamp : {{ timestamp|date('d/m/Y à H:i:s') }}
</p>
{% endblock %}