{# Most macro are based on bootstrap email #}
{% macro bgcolor(cls) %}
  {%- if 'bg-dark' in cls -%}
    #212529
  {%- elif 'bg-light' in cls -%}
    #f7fafc
  {%- else -%}
    #ffffff
  {%- endif -%}
{% endmacro %}
{% macro fgcolor(cls) %}
  {%- if 'text-success' in cls -%}
    #198754
  {%- elif 'text-warning' in cls -%}
    #ffc107
  {%- else -%}
    #000000
  {%- endif -%}
{% endmacro %}
{% macro body(cls) %}
  <body class="{{ cls }}"
        style="outline: 0;
               width: 100%;
               min-width: 100%;
               height: 100%;
               -webkit-text-size-adjust: 100%;
               -ms-text-size-adjust: 100%;
               font-family: Helvetica, Arial, sans-serif;
               line-height: 24px;
               font-weight: normal;
               font-size: 16px;
               -moz-box-sizing: border-box;
               -webkit-box-sizing: border-box;
               box-sizing: border-box;
               color: #000000;
               margin: 0;
               padding: 0;
               border-width: 0"
        bgcolor="{{ bgcolor(cls) }}">
    <table class="{{ cls }} body"
           valign="top"
           role="presentation"
           border="0"
           cellpadding="0"
           cellspacing="0"
           style="outline: 0;
                  width: 100%;
                  min-width: 100%;
                  height: 100%;
                  -webkit-text-size-adjust: 100%;
                  -ms-text-size-adjust: 100%;
                  font-family: Helvetica, Arial, sans-serif;
                  line-height: 24px;
                  font-weight: normal;
                  font-size: 16px;
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                  color: #000000;
                  margin: 0;
                  padding: 0;
                  border-width: 0"
           bgcolor="{{ bgcolor(cls) }}">
      <tbody>
        <tr>
          <td valign="top"
              style="line-height: 24px;
                     font-size: 16px;
                     margin: 0"
              align="left"
              bgcolor="{{ bgcolor(cls) }}">{{ caller() }}</td>
        </tr>
      </tbody>
    </table>
  </body>
{% endmacro %}
{% macro container() %}
  <table class="container"
         role="presentation"
         border="0"
         cellpadding="0"
         cellspacing="0"
         style="width: 100%">
    <tbody>
      <tr>
        <td align="center"
            style="line-height: 24px;
                   font-size: 16px;
                   margin: 0;
                   padding: 0 16px">
          <!--[if (gte mso 9)|(IE)]>
          <table align="center" role="presentation">
            <tbody>
              <tr>
                <td width="600">
        <![endif]-->
          <table align="center"
                 role="presentation"
                 border="0"
                 cellpadding="0"
                 cellspacing="0"
                 style="width: 100%;
                        max-width: 600px;
                        margin: 0 auto">
            <tbody>
              <tr>
                <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">{{ caller() }}</td>
              </tr>
            </tbody>
          </table>
          <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </tbody>
          </table>
        <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
{% endmacro %}
{% macro card(cls='') %}
  <table class="card {{ cls }}"
         role="presentation"
         border="0"
         cellpadding="0"
         cellspacing="0"
         style="border-radius: 6px;
                border-collapse: separate !important;
                width: 100%;
                overflow: hidden;
                border: 1px solid #e2e8f0"
         bgcolor="{{ bgcolor(cls) }}">
    <tbody>
      <tr>
        <td style="line-height: 24px;
                   font-size: 16px;
                   width: 100%;
                   margin: 0"
            align="left"
            bgcolor="{{ bgcolor(cls) }}">{{ caller() }}</td>
      </tr>
    </tbody>
  </table>
{% endmacro %}
{% macro card_header(cls='') %}
  <table class="bg-dark text-white h-16 p-2 w-full"
         role="presentation"
         border="0"
         cellpadding="0"
         cellspacing="0"
         style="color: #ffffff;
                width: 100%;
                height: 64px"
         bgcolor="{{ bgcolor(cls) }}"
         width="100%"
         height="64">
    <tbody>
      <tr>
        <td style="line-height: 24px;
                   font-size: 22px;
                   color: #ffffff;
                   width: 100%;
                   height: 64px;
                   margin: 0;
                   padding: 8px 20px"
            align="left"
            bgcolor="{{ bgcolor(cls) }}"
            width="100%"
            height="64">{{ caller() }}</td>
      </tr>
    </tbody>
  </table>
{% endmacro %}
{% macro card_body() %}
  <table class="card-body"
         role="presentation"
         border="0"
         cellpadding="0"
         cellspacing="0"
         style="width: 100%">
    <tbody>
      <tr>
        <td style="line-height: 24px;
                   font-size: 16px;
                   width: 100%;
                   margin: 0;
                   padding: 20px"
            align="left">{{ caller() }}</td>
      </tr>
    </tbody>
  </table>
{% endmacro %}
{% macro row() %}
  <div class="row" style="margin-right: -24px;">
    <table role="presentation"
           border="0"
           cellpadding="0"
           cellspacing="0"
           style="table-layout: fixed;
                  width: 100%"
           width="100%">
      <tbody>
        <tr>{{ caller() }}</tr>
      </tbody>
    </table>
  </div>
{% endmacro %}
{% macro col(cls) %}
  <td class="col {{ cls }}"
      style="line-height: 24px;
             font-size: 16px;
             min-height: 1px;
             font-weight: normal;
             padding-right: 24px;
             margin: 0;
             color: {{ fgcolor(cls) }}"
      align="left"
      valign="top">{{ caller() }}</td>
{% endmacro %}
{% macro mb4() %}
  <!-- mb-4 -->
  <table class="s-4 w-full"
         role="presentation"
         border="0"
         cellpadding="0"
         cellspacing="0"
         style="width: 100%"
         width="100%">
    <tbody>
      <tr>
        <td style="line-height: 16px;
                   font-size: 16px;
                   width: 100%;
                   height: 16px;
                   margin: 0"
            align="left"
            width="100%"
            height="16">&#160;</td>
      </tr>
    </tbody>
  </table>
{% endmacro %}
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body,
        table,
        td {
            font-family: "{{ font_family }}",
            Helvetica,
            Arial,
            sans-serif !important
        }

        .ExternalClass {
            width: 100%
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 150%
        }

        a {
            text-decoration: none
        }

        * {
            color: inherit
        }

        a[x-apple-data-detectors],
        u+#body a,
        #MessageViewBody a {
            color: inherit;
            text-decoration: none;
            font-size: inherit;
            font-family: inherit;
            font-weight: inherit;
            line-height: inherit
        }

        img {
            -ms-interpolation-mode: bicubic
        }

        table:not([class^=s-]) {
            font-family: Helvetica, Arial, sans-serif;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            border-spacing: 0px;
            border-collapse: collapse
        }

        table:not([class^=s-]) td {
            border-spacing: 0px;
            border-collapse: collapse
        }

        .bg-dark {
            background-color: "{{ navbar_color }}";
        }

        a,
        .btn-link {
            color: "{{ link_color }}";
        }

        a:hover,
        .btn-link:hover {
            filter: brightness(.85);
            color: "{{ link_color }}";
        }

        @media screen and (max-width: 600px) {

            .w-full,
            .w-full>tbody>tr>td {
                width: 100% !important
            }

            .h-9,
            .h-9>tbody>tr>td {
                height: 36px !important
            }

            .h-16,
            .h-16>tbody>tr>td {
                height: 64px !important
            }

            .p-2:not(table),
            .p-2:not(.btn)>tbody>tr>td,
            .p-2.btn td a {
                padding: 8px !important
            }

            *[class*=s-lg-]>tbody>tr>td {
                font-size: 0 !important;
                line-height: 0 !important;
                height: 0 !important
            }

            .s-2>tbody>tr>td {
                font-size: 8px !important;
                line-height: 8px !important;
                height: 8px !important
            }

            .s-3>tbody>tr>td {
                font-size: 12px !important;
                line-height: 12px !important;
                height: 12px !important
            }

            .s-5>tbody>tr>td {
                font-size: 20px !important;
                line-height: 20px !important;
                height: 20px !important
            }

            .s-10>tbody>tr>td {
                font-size: 40px !important;
                line-height: 40px !important;
                height: 40px !important
            }
        }
    </style>
  </head>
  {% call body('bg-light') %}
    {% call container() %}
      {% call card() %}
        {% call card_header('bg-dark') %}
          {{ header_name }}
        {% endcall %}
        {% call card_body() %}
          {% block body %}
          {% endblock body %}
          <hr />
          <p class="text-xs" style="font-size: 12px; line-height: 14.4px;">
            {% trans %}This email was sent by{% endtrans %}
            <a href="{{ url_for('/', _relative=False) }}">{{ header_name }}</a>.
          </p>
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
</html>
