{#- Reusable notification template (any feature can use it).
    Context:
      subject, preheader        : strings (preheader = inbox preview line)
      heading                   : big title line
      greeting                  : optional "Hello X,"
      paragraphs                : list[str] body paragraphs
      details                   : optional list[{label, value}] -> a key/value table
      primary_action            : optional {url, label}  (dark bulletproof button)
      secondary_action          : optional {url, label}  (outline-style link button)
      footer_note               : optional override line in the footer
-#}
{% extends "base.html" %}
{% block content %}
  {% if heading %}
  <h1 style="margin:0 0 14px 0;font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:28px;font-weight:bold;color:#121621;">{{ heading }}</h1>
  {% endif %}
  {% if greeting %}
  <p style="margin:0 0 14px 0;font-size:15px;line-height:23px;color:#1b2030;">{{ greeting }}</p>
  {% endif %}
  {% for p in paragraphs or [] %}
  <p style="margin:0 0 14px 0;font-size:15px;line-height:23px;color:#3a4151;">{{ p }}</p>
  {% endfor %}

  {% if details %}
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:6px 0 18px 0;border:1px solid #e6e9f0;border-radius:10px;">
    {% for row in details %}
    <tr>
      <td style="padding:10px 16px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#8a90a0;width:42%;border-bottom:{{ '1px solid #eef0f4' if not loop.last else 'none' }};">{{ row.label }}</td>
      <td style="padding:10px 16px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;color:#1b2030;border-bottom:{{ '1px solid #eef0f4' if not loop.last else 'none' }};">{{ row.value }}</td>
    </tr>
    {% endfor %}
  </table>
  {% endif %}

  {% if primary_action %}
  <div style="margin:20px 0 6px 0;">
    {{ button(primary_action.url, primary_action.label) }}
  </div>
  {% endif %}
  {% if secondary_action %}
  <div style="margin:6px 0 10px 0;">
    {{ button(secondary_action.url, secondary_action.label, bg='#ffffff', color='#121621') }}
  </div>
  {% endif %}

  {% if primary_action or secondary_action %}
  <p style="margin:16px 0 0 0;font-size:12px;line-height:18px;color:#8a90a0;">
    If a button doesn't work, copy this link into your browser:<br>
    <span style="color:#3a4151;word-break:break-all;">{{ (primary_action and primary_action.url) or (secondary_action and secondary_action.url) }}</span>
  </p>
  {% endif %}
{% endblock %}
{% block footer %}
  {{ footer_note or "This is an automated message from NID. Please do not reply." }}
{% endblock %}