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

{% block title %}Alerte Sécurité - {{ system_name }}{% 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: #F3F4F6; border-left: 4px solid {{ priority_color }}; padding: 15px; margin: 20px 0; border-radius: 4px;">
        <p style="margin: 0; color: #374151; font-weight: bold;">
            Une alerte de sécurité a été déclenchée sur {{ system_name }}.
        </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%;">Type</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">{{ notification_type }}</td>
        </tr>
        <tr>
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Priorité</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">
                <span style="background: {{ priority_color }}; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                    {{ priority_label }}
                </span>
            </td>
        </tr>
        <tr style="background: #F9FAFB;">
            <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #E5E7EB;">Date</td>
            <td style="padding: 12px; border-bottom: 1px solid #E5E7EB;">{{ formatted_timestamp }}</td>
        </tr>
    </table>

    <h3 style="color: #374151; margin: 30px 0 15px 0;">Détails</h3>
    <div style="background: #F9FAFB; padding: 15px; border-radius: 4px; border: 1px solid #E5E7EB;">
        <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 12px; color: #374151;">{{ data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
    </div>

    <div style="background: #EFF6FF; border: 1px solid #BFDBFE; padding: 15px; margin: 30px 0; border-radius: 4px;">
        <p style="margin: 0; color: #1E40AF;">
            <i class="fa fa-info-circle"></i> <strong>Note:</strong>
            Consultez les logs système pour plus de détails sur cet événement.
        </p>
    </div>
{% endblock %}