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

{% block email_title %}Erreur critique système - 2AB Portal{% endblock %}

{% block preheader %}Une erreur critique s'est produite sur {{ system_name }}.{% endblock %}

{% block email_content %}
    <!-- Titre principal avec icône -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 24px 0;">
        <tr>
            <td>
                <h1 style="margin: 0; font-size: 26px; font-weight: bold; color: #dc2626;">
                    &#128308; Erreur critique
                </h1>
            </td>
        </tr>
    </table>

    <!-- Alerte principale -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 28px 0;">
        <tr>
            <td style="padding: 20px; background-color: #fee2e2; border: 2px solid #dc2626; border-radius: 4px;">
                <p style="margin: 0; font-weight: bold; color: #7f1d1d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 16px;">
                    Une erreur critique s'est produite sur {{ system_name }}
                </p>
            </td>
        </tr>
    </table>

    <!-- Détails de l'erreur -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 28px 0; border: 1px solid #e5e7eb; border-radius: 6px;">
        {% if data.error_message %}
        <tr>
            <td style="padding: 12px 20px; background-color: #fef2f2; border-bottom: 1px solid #e5e7eb;">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width: 30%; font-weight: bold; color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Message</td>
                        <td style="color: #991b1b; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 14px;">
                            <span style="background-color: #fee2e2; padding: 4px 8px; border-radius: 4px;">{{ data.error_message }}</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        {% endif %}
        {% if data.error_file %}
        <tr>
            <td style="padding: 12px 20px; border-bottom: 1px solid #e5e7eb;">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width: 30%; font-weight: bold; color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Fichier</td>
                        <td style="color: #1a1a1a; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 12px; word-break: break-all;">{{ data.error_file }}</td>
                    </tr>
                </table>
            </td>
        </tr>
        {% endif %}
        {% if data.error_line %}
        <tr>
            <td style="padding: 12px 20px; background-color: #fef2f2; border-bottom: 1px solid #e5e7eb;">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width: 30%; font-weight: bold; color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Ligne</td>
                        <td style="color: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;">{{ data.error_line }}</td>
                    </tr>
                </table>
            </td>
        </tr>
        {% endif %}
        <tr>
            <td style="padding: 12px 20px;">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width: 30%; font-weight: bold; color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">Timestamp</td>
                        <td style="color: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px;">{{ formatted_timestamp }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {% if data.stack_trace %}
    <!-- Stack Trace -->
    <h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: bold; color: #1a1a1a;">
        Stack trace
    </h2>

    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 28px 0;">
        <tr>
            <td style="padding: 20px; background-color: #f9fafb; border-radius: 6px; border: 1px solid #e5e7eb; max-height: 300px; overflow-y: auto;">
                <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 11px; color: #374151; line-height: 1.5;">{{ data.stack_trace }}</pre>
            </td>
        </tr>
    </table>
    {% endif %}

    <!-- Timestamp -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0;">
        <tr>
            <td style="padding: 16px; background-color: #f9fafb; border-radius: 4px;">
                <p style="margin: 0; color: #6b7280; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 12px;">
                    Cette alerte a &eacute;t&eacute; g&eacute;n&eacute;r&eacute;e automatiquement par le syst&egrave;me de s&eacute;curit&eacute;.
                </p>
            </td>
        </tr>
    </table>
{% endblock %}