{% set CDN_URL = "https://cdn.theorchard.io/"%}
{% set ICONS_URL = CDN_URL ~ 'web-icons' %}
{% set IMAGES_URL = CDN_URL ~ 'images' %}
{% set ASSETS_URL = CDN_URL ~ 'assets' %}

{% set BRAND_ID_ORCHARD = 'theorchard' %}
{% set BRAND_ID_AWAL = 'awal' %}
{% set SUPPORTED_BRANDS = (
    BRAND_ID_ORCHARD,
    BRAND_ID_AWAL
) %}

{# Fallback to "theorchard" brand #}
{% set BRAND_ID = default_brand if default_brand in SUPPORTED_BRANDS else BRAND_ID_ORCHARD %}


{% set BRAND_VARS_PATH = 'include/vars/' ~ BRAND_ID ~ '.jinja' %}
{% import BRAND_VARS_PATH as brand_vars %}

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <title>Branded Notification</title>

    <style type="text/css">
        body {
            width: 100%;
            margin: 0;
            padding: 0;
            font-size: 16px;
            background-color: {{brand_vars.EVEN_BG_COLOR}};
            color: {{brand_vars.MAIN_COLOR}};
            {{brand_vars.BASE_FONT_FAMILY_RULE}};
        }

        div#body {
            width: 100%;
            margin: 0;
            padding: 0;
            font-size: 16px;
            background-color: {{brand_vars.EVEN_BG_COLOR}};
            color: {{brand_vars.MAIN_COLOR}};
            {{brand_vars.BASE_FONT_FAMILY_RULE}};
        }

        {% if BRAND_ID == BRAND_ID_AWAL %}
            @font-face {
                font-family: 'Karla';
                font-style: normal;
                font-weight: 400;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/karla/v15/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lMZbLXGhmR.woff) format('woff');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            @font-face {
                font-family: 'Barlow';
                font-style: normal;
                font-weight: 500;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/barlow/v5/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            @font-face {
                font-family: 'Space Mono';
                font-style: normal;
                font-weight: 700;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/spacemono/v6/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }
        {% endif %}

        table {
            border: none;
            margin: auto;
            padding: 0;
            width: 100%;
            max-width: 640px;
            color: {{brand_vars.MAIN_COLOR}};
        }

        table.as-body {
            background-color: {{brand_vars.EVEN_BG_COLOR}};
            color: {{brand_vars.MAIN_COLOR}};
            min-width: 375px;
        }

        table,
        tr,
        td {
            border-collapse: collapse;
            border-spacing: 0;
        }

        th, td {
            padding: 4px 8px;
            vertical-align: middle;
        }

        tr.odd {
            background-color: {{ brand_vars.ODD_BG_COLOR }};
            color: {{ brand_vars.ODD_COLOR }};
        }

        tr.even {
            background-color: {{ brand_vars.EVEN_BG_COLOR }};
            color: {{ brand_vars.EVEN_COLOR }};
        }

        h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            line-height: 30px;
            {{brand_vars.ALT_FONT_FAMILY_RULE}}

        }

        h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 0;
        }

        #header-logo td {
            padding: 50px 16px 0 16px;
        }

        #header-title td {
            padding: 36px 16px;
        }

        .text-left {
            text-align: left;
        }

        .text-center {
            text-align: center;
        }

        .text-right {
            text-align: right;
        }

        .vertical-top {
            vertical-align: top;
        }

        .vertical-middle {
            vertical-align: middle;
        }

        .vertical-bottom {
            vertical-align: bottom;
        }

        .font-size-xs {
            font-size: 8px;
        }

        .font-size-sm {
            font-size: 10px;
        }

        .font-size-m {
            font-size: 14px;
        }

        .font-size-l {
            font-size: 20px;
        }

        .font-size-xl {
            font-size: 24px;
        }

        .p-4px {
            padding: 4px;
        }

        .py-4px {
            padding-top: 4px;
            padding-bottom: 4px;
        }

        .px-4px {
            padding-left: 4px;
            padding-right: 4px;
        }

        .p-8px {
            padding: 8px;
        }

        .py-8px {
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .px-8px {
            padding-left: 8px;
            padding-right: 8px;
        }

        .social-cell {
            width: 30px;
            padding: 20px 0 0;
            margin: 0;
        }

        .social-icon {
            height: 30px;
            width: auto;
            margin-right: 15px;
        }

        .link-highlight {
            text-decoration: none;
            color: {{ brand_vars.LINK_HIGHLIGHT_COLOR }} !important;
        }

        .link-highlight:hover {
            text-decoration: none;
            color: {{ brand_vars.LINK_HOVER_COLOR }} !important;
        }

        .img-clean {
            border: none;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }

        .cta-btn {
            display: inline-block;
            text-transform: uppercase;
            background: {{ brand_vars.BRAND_MAIN_COLOR }};
            border-radius: 6px;
            color: #ffffff !important;
            padding: 13px 24px 13px 24px;
            text-decoration: none;
            font-size: 12px;
            font-family: Rubik, sans-serif;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 1px;
        }

        .cta-btn:hover {
            background: {{ brand_vars.BRAND_SECONDARY_COLOR }};
        }
    </style>
    {% block extra_styles %}{% endblock %}
</head>

<body class="brand_{{ BRAND_ID }}">
    {# Preview text that is picked up and displayed by some email clients #}
    <div style="display:none;">
        {{ preview_text }}
    </div>

    {# Whitespaces so that the content of the email is not picked up for the preview text #}
    <div style="display:none;">
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
    </div>

    <div id="body">
    <table
        id="header-logo"
        class="as-body"
        cellspacing="0"
        cellpadding="0"
        border="0"
    >
        <tr>
        <td>
            <a href="https://www.{{ brand_vars.BRAND_SITE }}">
                <img
                    src="{{ ICONS_URL }}/{{ brand_vars.BRAND_LOGO.name }}"
                    alt="{{ brand_vars.BRAND_NAME }}"
                    width="{{ brand_vars.BRAND_LOGO.width }}"
                >
            </a>
        </td>
        </tr>
    </table>

    <table
        id="header-title"
        class="as-body"
        cellspacing="0"
        cellpadding="0"
        border="0"
    >
        <tr>
        <td class="header-title">
            {% block header_title %}{% endblock %}
        </td>
        </tr>
    </table>

    <table
        id="block-content"
        class="as-body"
        cellspacing="0"
        cellpadding="0"
        border="0"
    >
        <tr>
        <td class="block-content-cell">
            {% block content %}{% endblock %}
        </td>
        </tr>
    </table>

    <table
        id="block-issues"
        class="as-body"
        cellspacing="0"
        cellpadding="0"
        border="0"
    >
        <tr>
        <td class="block-issues-cell">
            {% block issues %}{% endblock %}
        </td>
        </tr>
    </table>

    <table
        id="footer-contact"
        class="as-body"
        cellspacing="0"
        cellpadding="0"
        border="0"
    >
        <tr>
            <td colspan="{{ brand_vars.SOCIALS|length + 1 }}" class="font-size-l contact-cell">
                {% trans %}Connect With Us{% endtrans %}
            </td>
        </tr>
        <tr>
        {% for social in brand_vars.SOCIALS %}
            <td class="social-cell">
                <a href="{{ social.url }}">
                    <img class="social-icon"
                         src="{{ ICONS_URL }}/{{ social.icon }}"
                         alt="{{ social.name }}"
                         height="30"
                         width="30"
                    >
                </a>
            </td>
        {% endfor %}
            <td style="width: 100%"></td>
        </tr>
        <tr>
            <td colspan="{{ brand_vars.SOCIALS|length + 1 }}">
                <p style="margin-top: 2px">
                    {% trans brand = brand_vars.BRAND_NAME %}
                        You're receiving this email because you’ve opted in to receive {{ brand }} notifications related to product submission.
                    {% endtrans %}
                    {% trans %}You can {% endtrans %}
                    <a class="link-highlight" href="{{ pref_base_url }}">
                        {% trans %} manage your email preferences in your settings{% endtrans %}.
                    </a>
                    <br/>
                    {% trans %}This is an automated notification which is unable to receive replies.{% endtrans %}
                </p>
            </td>
        </tr>
    </table>

    <img src="{{ identify_url }}">
    <img src="{{ tracking_url }}">
    </div>
</body>

</html>
