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

{% block content %}
              <h1 style="margin: 0 0 16px 0; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 26px; color: {{ brand_text|default:"#1C1D20" }};">
                {{ heading }}
              </h1>

              <p style="margin: 0 0 24px 0; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 22px; color: {{ brand_text|default:"#1C1D20" }};">
                {{ body }}
              </p>

              <!-- Code block -->
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                  <td align="center" style="padding: 20px 0;">
                    <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="background-color: {{ brand_bg|default:"#F5F5F6" }}; border-radius: 12px; padding: 16px 40px;">
                          <p style="margin: 0; font-family: 'Courier New', Courier, monospace; font-size: 32px; font-weight: 700; line-height: 40px; color: {{ brand_text|default:"#1C1D20" }}; letter-spacing: 8px; text-align: center;">
                            {{ code }}
                          </p>
                        </td>
                      </tr>
                    </table>
                  </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" }};">
                {{ expiry }}
              </p>

              <p style="margin: 0 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #7D7E81;">
                {{ warning }}
              </p>
{% endblock %}