{% extends "base.html" %}

{% block preheader %}{{ severity | upper }}: {{ alert_title }}{% endblock %}

{% block content %}
<!-- Severity banner -->
{% if severity == "error" %}
{% set banner_bg = "#fef2f2" %}
{% set banner_border = "#fca5a5" %}
{% set banner_text = "#991b1b" %}
{% set banner_icon = "!" %}
{% elif severity == "warning" %}
{% set banner_bg = "#fffbeb" %}
{% set banner_border = "#fcd34d" %}
{% set banner_text = "#92400e" %}
{% set banner_icon = "!" %}
{% else %}
{% set banner_bg = "#eff6ff" %}
{% set banner_border = "#93c5fd" %}
{% set banner_text = "#1e40af" %}
{% set banner_icon = "i" %}
{% endif %}

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 0 28px 0;">
  <tr>
    <td style="background-color: {{ banner_bg }}; border-left: 4px solid {{ banner_border }}; border-radius: 0 8px 8px 0; padding: 16px 20px;">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
          <td style="width: 32px; vertical-align: top; padding-right: 12px;">
            <div style="width: 28px; height: 28px; border-radius: 50%; background-color: {{ banner_border }}; text-align: center; line-height: 28px; font-size: 14px; font-weight: 700; color: {{ banner_text }};">
              {{ banner_icon }}
            </div>
          </td>
          <td style="vertical-align: top;">
            <p style="margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: {{ banner_text }}; text-transform: uppercase; letter-spacing: 0.3px;">
              {{ severity | upper }}
            </p>
            <p style="margin: 0; font-size: 18px; font-weight: 700; color: {{ banner_text }}; line-height: 1.3;">
              {{ alert_title }}
            </p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Greeting -->
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  {% if user_name %}Hi {{ user_name }},{% else %}Hi there,{% endif %}
</p>

<!-- Alert message -->
<p style="margin: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  {{ alert_message }}
</p>

<!-- Optional action button -->
{% if action_url and action_text %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
  <tr>
    <td style="text-align: center; padding: 4px 0 16px 0;">
      {% if severity == "error" %}
      {% set btn_color = "#dc2626" %}
      {% elif severity == "warning" %}
      {% set btn_color = "#d97706" %}
      {% else %}
      {% set btn_color = "#6366f1" %}
      {% endif %}
      <a href="{{ action_url }}" style="display: inline-block; background-color: {{ btn_color }}; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; padding: 14px 36px; border-radius: 8px; mso-padding-alt: 0; text-align: center;">
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%; mso-text-raise: 26pt;">&nbsp;</i><![endif]-->
        <span style="mso-text-raise: 13pt;">{{ action_text }}</span>
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%;">&nbsp;</i><![endif]-->
      </a>
    </td>
  </tr>
</table>
{% endif %}

<p style="margin: 16px 0 0 0; font-size: 14px; line-height: 1.5; color: #8c8c9a; text-align: center;">
  This is an automated alert from {{ product_name }}. If you believe this was sent in error, please contact support.
</p>
{% endblock %}