{% extends "notifications/email/_base.html" %}

{% block content %}
              <!-- Amber, not red. A declined card is a thing to fix, not an
                   emergency, and the red banner this file first carried made
                   a retriable renewal read like a security incident. -->
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 20px;">
                <tr>
                  <td style="background-color: #FFF3CD; border-radius: 8px; padding: 12px 16px; border-left: 4px solid #F59E0B;">
                    <p style="margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; color: #92400E;">
                      {{ heading }}
                    </p>
                  </td>
                </tr>
              </table>
              <p style="margin: 0 0 8px 0; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 22px; color: {{ brand_text|default:"#1C1D20" }};">
                {{ body }}
              </p>
              {% if decline_reason %}
              <p style="margin: 0 0 8px 0; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 22px; color: {{ brand_text|default:"#1C1D20" }};">
                {{ reason }}
              </p>
              {% endif %}
              {% if retry_url %}
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="button-td" style="padding: 28px 0 0 0;">
                <tr>
                  <td align="left">
                    <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="background-color: {{ brand_primary_dark|default:"#2A90D9" }}; border-radius: 20px;">
                          <a href="{{ retry_url }}" style="display: inline-block; padding: 12px 32px; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; color: #FFFFFF; text-decoration: none; border-radius: 20px;">
                            {{ cta }}
                          </a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              {% endif %}
              {% if note %}
              <p style="margin: 20px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #7D7E81;">
                {{ note }}
              </p>
              {% endif %}
{% endblock %}