{%- import (components or "manhattan/manage/emails/components.html") as _email -%}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
</head>

<body>
<table class="body">
<tr>
<td
    class="center"
    align="center"
    valign="top"
    >
<center>
<table>
<tr>
<td></td>

<td class="inner">
    {{ _email.spacer(class='tab-hide') }}

    <!-- Frame -->
    <table class="frame">
        <tr>
            <td class="frame__box">

                {#
                    Header
                    --
                    The top part of the email containing the logo and a button
                    link to the project.
                #}
                {% block header %}
                    <table class="header">
                        <tr><td class="header__top" colspan="3"></td></tr>

                        <tr>
                            <td class="header__left"></td>

                            <td class="header__mid">
                                <table>
                                    <tr>
                                        <td class="[ header__logo ]  [ logo ]">

                                            {#
                                                Header logo
                                                --
                                                A logo used to quickly show what
                                                project the email is related to.
                                            #}
                                            {% block header_logo %}
                                                <a
                                                    class="logo__link"
                                                    href="/"
                                                    >
                                                    <img
                                                        alt="{{ project_name }}"
                                                        class="logo__image"
                                                        src="{{ logo_url }}"
                                                        />
                                                </a>
                                            {% endblock %}
                                        </td>

                                        <td class="[ header__spacer ]"></td>

                                        <td class="header__btn">
                                            {% block header_button %}
                                                {{ _email.button(
                                                    'Visit ' + 'project_name|truncate(22, true)',
                                                    '/'
                                                ) }}
                                            {% endblock %}
                                        </td>
                                    </tr>
                                </table>
                            </td>

                            <td class="header__right"></td>
                        </tr>

                        <tr><td class="header__bottom" colspan="3"></td></tr>
                    </table>
                {% endblock %}

                {#
                    Main
                    --
                    The middle part of the email and the outer container of the
                    email content.
                #}
                {% block main %}
                    <table class="main">
                        <tr><td class="main__top" colspan="3"></td></tr>

                        <tr>
                            <td class="main__left"></td>

                            <td class="[ main__mid ]  [ formatted ]">

                                {#
                                    Content
                                    --
                                    All content specicic to this email should be
                                    placed inside of the `content` block.
                                #}
                                {% block content %}{% endblock %}
                            </td>

                            <td class="main__right"></td>
                        </tr>

                        <tr><td class="main__bottom" colspan="3"></td></tr>
                    </table>
                {% endblock %}

                {#
                    Footer
                    --
                    The bottom part of the email containing some text about the
                    project and why the user received the email.
                #}
                {% block footer %}
                    <table class="footer">
                        <tr><td class="footer__top" colspan="3"></td></tr>

                        <tr>
                            <td class="footer__left"></td>

                            <td class="footer__mid">

                                {#
                                    Footer mid
                                    --
                                    The `footer_mid` can be used to overide the
                                    standard text added to the bottom of every
                                    email template.
                                #}
                                {% block footer_mid %}
                                    You are receiving this message as a
                                    registered administrator for:
                                    <a
                                        class="bold"
                                        href="{{ site_url }}"
                                        >
                                        {{- project_name -}}
                                    </a>.
                                {% endblock %}
                            </td>

                            <td class="footer__right"></td>
                        </tr>

                        <tr><td class="footer__bottom" colspan="3"></td></tr>
                    </table>
                {% endblock %}
            </td>
        </tr>
    </table>

    {{ _email.spacer(class='tab-hide') }}
</td>

<td></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
