<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; color: #333;">
    <table cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f5f5;">
        <tr>
            <td style="padding: 10px;">
                <table cellpadding="0" cellspacing="0" width="100%" style="max-width: 800px; margin: 0 auto; background-color: #ffffff; border-collapse: collapse;">
                    <!-- Header -->
                    <tr>
                        <td style="background-color: #1e40af; color: white; padding: 20px; text-align: center; border-collapse: collapse;">
                            <h1 style="margin: 0; font-size: 28px; font-weight: 600; color: white;">Cavaliba Notification</h1>
                        </td>
                    </tr>

                    <!-- Title/Severity/... -->
                    <tr>
                        <td style="padding: 30px 20px; line-height: 1.6;">
                            <!-- Context Block (Title, Category, Severity) -->
                            <table cellpadding="0" cellspacing="0" width="100%" style="background-color: #f0f9ff; border: 1px solid #bfdbfe; border-collapse: collapse; margin-bottom: 20px;">
                                <tr>
                                    <td style="padding: 8px 15px; background-color: #ffffff; font-size: 22px; font-weight: 700; color: #000; text-align: center;">
                                        {{ title|default:"—" }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 8px 15px;">
                                        <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
                                            <tr>
                                                <td style="width: 50%; text-align: center; padding-right: 6px;">
                                                    <div style="font-size: 9px; font-weight: 600; color: #0369a1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Category</div>
                                                    <div style="font-size: 13px; font-weight: 600; color: #1e40af;">{{ category|default:"—" }}</div>
                                                </td>
                                                <td style="width: 50%; text-align: center; padding-left: 6px;">
                                                    <div style="font-size: 9px; font-weight: 600; color: #0369a1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Severity</div>
                                                    <div style="font-size: 13px; font-weight: 600; color: #1e40af;">{{ severity|default:"—" }}</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <!-- Updates Section -->
                            {% if updates %}
                            {% for update in updates %}
                            <table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px; border-top: 1px solid #e5e7eb; border-collapse: collapse;">
                                <tr>
                                    <td style="padding-top: 20px;">
                                        <h2 style="margin: 0 0 20px 0; font-size: 18px; color: #1f2937; border-bottom: 2px solid #3b82f6; padding-bottom: 10px;">Update #{{ forloop.revcounter }}</h2>
                                        <table cellpadding="0" cellspacing="0" width="100%" style="background-color: #f9fafb; border-left: 4px solid #3b82f6; margin-bottom: 20px; border-collapse: collapse;">
                                            <tr>
                                                <td style="padding: 15px;">
                                                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 8px;">
                                                        <strong>{{ update.created_by }}</strong> — {{ update.created_at }}
                                                    </div>
                                                    <p style="color: #374151; margin: 0; line-height: 1.6;">{{ update.content|safe }}</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            {% endfor %}
                            {% endif %}

                            <!-- Initial Notification -->
                            <table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px; border-top: 1px solid #e5e7eb; border-collapse: collapse;">
                                <tr>
                                    <td style="padding-top: 20px;">
                                        <h2 style="margin: 0 0 20px 0; font-size: 18px; color: #1f2937; border-bottom: 2px solid #3b82f6; padding-bottom: 10px;">Initial Notification</h2>
                                        <table cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f4f6; border-left: 4px solid #6b7280; margin-bottom: 20px; border-collapse: collapse;">
                                            <tr>
                                                <td style="padding: 15px;">
                                                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 8px;">
                                                        <strong>{{ created_by }}</strong> — {{ created_at }}
                                                    </div>
                                                    <p style="color: #374151; margin: 0; line-height: 1.6;">{{ content|safe }}</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <!-- Recipients Block -->
                            <table cellpadding="0" cellspacing="0" width="100%"
                                style="background-color: #f3f4f6; border: 1px solid #d1d5db; margin-top: 20px; border-collapse: collapse;">
                                <tr>
                                <td style="padding: 12px 15px; font-size: 12px; font-weight: 400; color: #374151">
                                    <strong>Recipients:</strong> {{ notify_target|default:"—" }}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f9fafb; border-top: 1px solid #e5e7eb; padding: 20px; text-align: center; font-size: 12px; color: #6b7280;">
                            <p style="margin: 5px 0;">&copy; cavaliba.com - All rights reserved</p>
                            <p style="margin: 5px 0;">This is an automated message. Please do not reply directly to this email.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
