{% if not text %}
    <mjml>
        <mj-head>
            <mj-title>{{ mail_subject }}</mj-title>
            <mj-font
                    name="Nunito"
                    href="https://fonts.googleapis.com/css2?family=Nunito"
            />
            <mj-attributes>
                <mj-all
                        color="#f0f0f0"
                        font-size="16px"
                        font-family="Nunito, Helvetica, sans-serif"
                        padding="0"
                />
                <mj-section
                        full-width="full-width"
                        padding="16px 16px"
                        background-color="#1e2932"
                />
                <mj-button
                        background-color="#842cff"
                        text-transform="uppercase"
                        inner-padding="16px 32px"
                        border-radius="50px"
                        font-weight="700"
                        padding="32px"
                />
                <mj-text
                        padding="8px 0px"
                />

                <mj-class name="header"
                          align="center"
                          font-size="20px"
                          background-color="#1b252d"
                />

                <mj-class name="footer"
                          align="center"
                          background-color="#151d23"
                          font-size="14px"
                />

                <mj-class name="title"
                          align="center"
                          font-size="28px"
                          padding-bottom="24px"
                          align="center"
                />

                <mj-class name="subtitle"
                          align="center"
                          font-size="22px"
                          padding-bottom="16px"
                          align="center"
                />

                <mj-class name="link"
                          color="#00766c"
                />

                <mj-class name="important-line"
                          font-size="20px"
                          padding="16px 0px"
                />
            </mj-attributes>
            <mj-style inline="inline">
                .link {
                color: #00766c !important;
                text-decoration: none;
                }
            </mj-style>
            <mj-style>
                .link:hover {
                color: #00a99b !important;
                }
            </mj-style>
            {% block head %}{% endblock %}
        </mj-head>
        <mj-body width="632px">
            {% if mail_link %}
                <mj-section background-color="#171f26" padding="2px 0px">
                    <mj-column>
                        <mj-text align="center" font-size="12px">
                            Does this mail display improperly?
                            <a href="{{ mail_link }}" class="link">Open it in the browser</a>
                        </mj-text>
                    </mj-column>
                </mj-section>
            {% endif %}

            <mj-section mj-class="header">
                <mj-column>
                    <mj-text mj-class="header">
                        {{ app.name }}
                    </mj-text>
                </mj-column>
            </mj-section>

            {% block body %}{% endblock %}

            <mj-section mj-class="footer">
                <mj-column>
                    <mj-text mj-class="footer">
                        All rights reserved. Contact us at
                        <a href="mailto:{{ app.contact_email }}" class="link">{{ app.contact_email }}</a>
                    </mj-text>
                </mj-column>
            </mj-section>
        </mj-body>
    </mjml>
{% else %}
    {% block text %}{% endblock %}
{% endif %}