<div style="margin-bottom: 30px;">
    <!-- Badge de sévérité -->
    <div style="display: inline-block; padding: 8px 16px; border-radius: 20px; margin-bottom: 20px; {{#if isCritical}}background-color: #FEE2E2; color: #991B1B;{{else}}background-color: #FEF3C7; color: #92400E;{{/if}}">
        <strong style="font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">
            {{#if isCritical}}🔴 Alerte Critique{{else}}⚠️ Attention{{/if}}
        </strong>
    </div>

    <!-- Titre -->
    <h2 style="color: #111827; margin: 0 0 20px 0; font-size: 24px; font-weight: 600;">
        {{alertTitle}}
    </h2>

    <!-- Message -->
    <p style="color: #374151; margin: 0 0 25px 0; font-size: 16px; line-height: 1.6;">
        {{alertMessage}}
    </p>

    <!-- Détails de l'alerte -->
    {{#if alertDetails}}
    <div style="background-color: #f9fafb; border-left: 4px solid #3B82F6; padding: 16px; margin-bottom: 25px; border-radius: 4px;">
        <p style="margin: 0; font-size: 14px; color: #6b7280;">
            <strong style="color: #374151;">Détails :</strong><br>
            {{alertDetails}}
        </p>
    </div>
    {{/if}}

    <!-- Informations contextuelles -->
    {{#if eventName}}
    <table style="width: 100%; margin-bottom: 25px; border-collapse: collapse;">
        <tr>
            <td style="padding: 8px 0; font-size: 14px; color: #6b7280;">
                <strong style="color: #374151;">Événement :</strong>
            </td>
            <td style="padding: 8px 0; font-size: 14px; color: #374151;">
                {{eventName}}
            </td>
        </tr>
        {{#if eventDate}}
        <tr>
            <td style="padding: 8px 0; font-size: 14px; color: #6b7280;">
                <strong style="color: #374151;">Date :</strong>
            </td>
            <td style="padding: 8px 0; font-size: 14px; color: #374151;">
                {{eventDate}}
            </td>
        </tr>
        {{/if}}
        {{#if equipmentName}}
        <tr>
            <td style="padding: 8px 0; font-size: 14px; color: #6b7280;">
                <strong style="color: #374151;">Équipement :</strong>
            </td>
            <td style="padding: 8px 0; font-size: 14px; color: #374151;">
                {{equipmentName}}
            </td>
        </tr>
        {{/if}}
    </table>
    {{/if}}

    <!-- Bouton d'action -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td style="border-radius: 6px; {{#if isCritical}}background: #DC2626;{{else}}background: #3B82F6;{{/if}}">
                <a href="{{actionUrl}}" target="_blank" style="display: inline-block; padding: 14px 30px; font-size: 16px; color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 6px;">
                    {{#if isCritical}}Voir l'alerte immédiatement{{else}}Consulter les détails{{/if}}
                </a>
            </td>
        </tr>
    </table>
</div>

<!-- Note de bas de page -->
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
    <p style="margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5;">
        💡 <strong>Astuce :</strong> Vous pouvez gérer vos préférences de notifications dans votre <a href="{{appUrl}}/my_account" style="color: #3B82F6; text-decoration: none;">espace personnel</a>.
    </p>
</div>

