<div style="margin-bottom: 30px;">
    <!-- En-tête du digest -->
    <div style="margin-bottom: 25px;">
        <h2 style="color: #111827; margin: 0 0 10px 0; font-size: 24px; font-weight: 600;">
            📬 Votre résumé quotidien
        </h2>
        <p style="color: #6b7280; margin: 0; font-size: 14px;">
            {{digestDate}} • {{alertCount}} nouvelle(s) alerte(s)
        </p>
    </div>

    <!-- Message d'introduction -->
    <p style="color: #374151; margin: 0 0 30px 0; font-size: 16px; line-height: 1.6;">
        Bonjour <strong>{{userName}}</strong>,<br>
        Voici le récapitulatif de vos alertes des dernières 24 heures.
    </p>

    <!-- Liste des alertes -->
    {{#each alerts}}
    <div style="background-color: #f9fafb; border-left: 4px solid {{#if this.isCritical}}#DC2626{{else}}#3B82F6{{/if}}; padding: 20px; margin-bottom: 15px; border-radius: 4px;">
        <!-- Badge type -->
        <div style="display: inline-block; padding: 4px 12px; border-radius: 12px; margin-bottom: 10px; background-color: {{#if this.isCritical}}#FEE2E2{{else}}#DBEAFE{{/if}}; color: {{#if this.isCritical}}#991B1B{{else}}#1E40AF{{/if}}; font-size: 11px; font-weight: 600; text-transform: uppercase;">
            {{this.typeLabel}}
        </div>

        <!-- Titre de l'alerte -->
        <h3 style="color: #111827; margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">
            {{this.title}}
        </h3>

        <!-- Message -->
        <p style="color: #4b5563; margin: 0 0 12px 0; font-size: 14px; line-height: 1.5;">
            {{this.message}}
        </p>

        <!-- Contexte -->
        {{#if this.context}}
        <p style="color: #6b7280; margin: 0; font-size: 13px;">
            <strong>Contexte :</strong> {{this.context}}
        </p>
        {{/if}}

        <!-- Timestamp -->
        <p style="color: #9ca3af; margin: 8px 0 0 0; font-size: 12px;">
            🕐 {{this.timestamp}}
        </p>
    </div>
    {{/each}}

    <!-- Aucune alerte -->
    {{#unless alerts}}
    <div style="background-color: #f0fdf4; border: 1px solid #86efac; padding: 20px; margin-bottom: 20px; border-radius: 8px; text-align: center;">
        <p style="color: #166534; margin: 0; font-size: 16px;">
            ✅ <strong>Aucune alerte aujourd'hui</strong><br>
            <span style="font-size: 14px; color: #15803d;">Tout est en ordre !</span>
        </p>
    </div>
    {{/unless}}

    <!-- Bouton d'action principal -->
    <div style="text-align: center; margin-top: 30px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
            <tr>
                <td style="border-radius: 6px; background: #3B82F6;">
                    <a href="{{appUrl}}/alerts" target="_blank" style="display: inline-block; padding: 14px 30px; font-size: 16px; color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 6px;">
                        Voir toutes mes alertes
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- Statistiques -->
{{#if stats}}
<div style="margin-top: 30px; padding: 20px; background-color: #fef3c7; border-radius: 8px;">
    <h3 style="color: #92400e; margin: 0 0 15px 0; font-size: 16px; font-weight: 600;">
        📊 Vos statistiques
    </h3>
    <table style="width: 100%;">
        <tr>
            <td style="padding: 8px 0; font-size: 14px; color: #78350f;">
                <strong>Alertes non lues :</strong>
            </td>
            <td style="padding: 8px 0; font-size: 14px; color: #78350f; text-align: right;">
                {{stats.unreadCount}}
            </td>
        </tr>
        <tr>
            <td style="padding: 8px 0; font-size: 14px; color: #78350f;">
                <strong>Événements en cours :</strong>
            </td>
            <td style="padding: 8px 0; font-size: 14px; color: #78350f; text-align: right;">
                {{stats.activeEvents}}
            </td>
        </tr>
    </table>
</div>
{{/if}}

<!-- 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;">
        💡 Ce résumé est envoyé quotidiennement à 8h. Vous pouvez modifier cette préférence dans votre <a href="{{appUrl}}/my_account" style="color: #3B82F6; text-decoration: none;">espace personnel</a>.
    </p>
</div>

