{# templates/emails/security/user_agent_change.html.twig #}
{% extends 'emails/admin/alert.html.twig' %}

{% block title %}Changement d'Appareil Détecté{% endblock %}

{% block content %}
    <h2 style="color: {{ priority_color }}; margin: 0 0 20px 0;">
        <i class="fa {{ type_icon }}"></i> {{ type_label }}
    </h2>

    <div style="background: #FEF2F2; border-left: 4px solid #F97316; padding: 15px; margin: 20px 0; border-radius: 4px;">
        <p style="margin: 0; color: #9A3412; font-weight: bold;">
            Un changement d'appareil ou de navigateur a été détecté pour un token API actif.
        </p>
    </div>

    <table style="width: 100%; margin: 20px 0; border-collapse: collapse;">
        <tr style="background: #F9FAFB;">
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB; width: 30%;">Utilisateur</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <strong>{{ data.user_email }}</strong>
                <br><small style="color: #6B7280;">ID: {{ data.user_id }}</small>
            </td>
        </tr>
        <tr>
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Token ID</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <code style="background: #F3F4F6; padding: 4px 8px; border-radius: 4px;">{{ data.token_id }}</code>
            </td>
        </tr>
        <tr style="background: #F9FAFB;">
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Date de détection</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">{{ data.detected_at }}</td>
        </tr>
    </table>

    <h3 style="color: #374151; margin: 30px 0 15px 0;">User-Agent Original</h3>
    <div style="background: #F9FAFB; padding: 15px; border-radius: 4px; border: 1px solid #E5E7EB;">
        <code style="word-break: break-all; color: #059669;">{{ data.original_user_agent }}</code>
    </div>

    <h3 style="color: #374151; margin: 30px 0 15px 0;">Nouveau User-Agent</h3>
    <div style="background: #FEE2E2; padding: 15px; border-radius: 4px; border: 1px solid #FCA5A5;">
        <code style="word-break: break-all; color: #DC2626;">{{ data.current_user_agent }}</code>
    </div>

    {% if data.similarity %}
        <p style="margin: 20px 0; color: #374151;">
            <strong>Similarité:</strong>
            <span style="color: {{ data.similarity < 50 ? '#DC2626' : '#F97316' }}; font-weight: bold;">{{ data.similarity }}%</span>
        </p>
    {% endif %}

    <div style="background: #FEF2F2; border: 1px solid #FCA5A5; padding: 15px; margin: 20px 0; border-radius: 4px;">
        <p style="margin: 0 0 10px 0; color: #7F1D1D; font-weight: bold;">
            <i class="fa fa-exclamation-triangle"></i> Attention:
        </p>
        <p style="margin: 0; color: #991B1B;">
            Ce changement peut indiquer qu'un token API a été volé ou compromis. Vérifiez immédiatement avec l'utilisateur.
        </p>
    </div>
{% endblock %}