{% load eventurl %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=false">
    <style type="text/css">
        body {
            background-color: #eee;
            background-position: top;
            background-repeat: repeat-x;
            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 22px;
            color: #333;
            margin: 0;
            padding-top: 20px;
        }

        table.layout > tr > td,
        table.layout > tbody > tr > td,
        table.layout > thead > tr > td {
            background-color: white;
            padding: 0;
        }

        table.layout > tr > td.header,
        table.layout > tbody > tr > td.header,
        table.layout > thead > tr > td.header {
            padding: 0 20px;
            text-align: center;
        }

        .header h2 {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 22px;
            line-height: 26px;
        }

        .header h1 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 26px;
            line-height: 30px;
        }

        .header h2 a, .header h1 a, .content h2 a, .content h3 a {
            text-decoration: none;
        }

        .content h2, .content h3 {
            margin-bottom: 20px;
            margin-top: 10px;
        }

        a {
            color: {{ color }};
            font-weight: bold;
        }

        a:hover, a:focus {
            color: {{ color }};
            text-decoration: underline;
        }

        a:hover, a:active {
            outline: 0;
        }

        p {
            margin: 0 0 10px;

            /* These are technically the same, but use both */
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;

            -ms-word-break: break-all;

            /* Adds a hyphen where the word breaks, if supported (No Blink) */
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
        }

        p a {
            word-wrap: anywhere;
            word-break: break-all;
        }

        .footer {
            padding: 10px;
            text-align: center;
            font-size: 12px;
        }

        .content {
            padding: 0 18px;
        }

        ::selection {
            background: {{ color }};
            color: #FFF;
        }

        table.layout {
            width: 100%;
            max-width: 600px;
            border-spacing: 0px;
            border-collapse: separate;
            margin: auto;
        }

        img.wide {
            width: 100%;
            height: auto;
        }
        .content {
            text-align: left;
        }

        .content table {
            width: 100%;
        }

        .content table td {
            vertical-align: top;
            text-align: left;
            padding: 0;
        }

        a.button {
            display: inline-block;
            padding: 10px 16px;
            font-size: 14px;
            line-height: 1.33333;
            border: 1px solid #cccccc;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            margin: 5px;
            text-decoration: none;
            color: {{ color }};
        }

        .order-button {
            padding-top: 5px;
            text-align: center;
        }
        .order-button a.button {
            font-size: 12px;
        }
        .order-info {
            padding-bottom: 5px
        }

        .order {
            font-size: 12px;
        }

        .cart-table > tr > td:first-child,
        .cart-table > tbody > tr > td:first-child,
        .cart-table > thead > tr > td:first-child {
            width: 40px;
        }
        .order-details > tr > td:first-child,
        .order-details > tbody > tr > td:first-child,
        .order-details > thead > tr > td:first-child {
            width: 20%;
        }
        .order-details td {
            font-size: 12px;
        }

        pre, pre code {
            white-space: pre-line;
        }

        {% if rtl %}
            body {
                direction: rtl;
            }
            .content {
                text-align: right;
            }
        {% endif %}

        {% block addcss %}{% endblock %}
    </style>
    <!--[if mso]>
        <style type="text/css">
        body, table, td {
            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        }
        </style>
    <![endif]-->
</head>
<body align="center">
    <!--[if gte mso 9]>
    <table width="100%"><tr><td align="center">
    <table width="600"><tr><td align="center"
    <![endif]-->
    <table class="layout" width="600" border="0" cellspacing="0">
        <!--[if !mso]><!-- -->
        <tr>
            <td style="line-height: 0">
                <img class="wide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAA8CAAAAACf95tlAAAAAXNCSVQI5gpbmQAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAG/SURBVHja7dvRboMwDIXhvf/DLiQQAwkku9+qDgq2hPyfN6j1qTlx06/uMunbLMnnhL98fuzRDtYILEeZ7GBNwAIWsIB1LdkOVgaWo4gdLAGWo6x2sFZgOUq1g1WB5SjNDlYDlqcEK1dDB5anmK3eE7C4FnIpBNbVFLo7sB7d3huwKFlULGA9pWQJsJxls4G1ActbooWr2IHlLbMFrBlY7rJbwNqBxb2QZ8nAuiUGO9ICLOo71R1YN0X9td8KLJ8ZeDEDrAd+Za3A4mLIz4TAujGqv+tUYPmN4v8LcweW3zS1t++hActzCrtRYD3pMJQOLOeJ7NyBpZFdoWaFDVjuJ6BRswpTBZbCAn5hpsDq/fbHpDMTBZbC1TAzT2ApyMIVsDROQ2GWwFJo8PR2YP3eOtywzwrsGYD1J9vlHXzcmSKw7q/wU2OEwHpdtALHILA00jJfV8DSaVofvYOPlckB658sp/8VNrBkANahqnXqfhhXJgasgymHD8REZwfWmezzga+tQdhcAet0qry1FYV3osD6dP1QJL3YbYUkhfUCsK6einWRPI0pxjROWZbK+QcsAiwCLEKARYBFgEXIu/wAYbjtwujw8KwAAAAASUVORK5CYII="
                style="max-height: 60px;" alt="">
            </td>
        </tr>
        <!--<![endif]-->
        <tr>
            <td class="header" align="center">
                <!--[if gte mso 9]>
                    <table cellpadding="20"><tr><td align="center">
                <![endif]-->
                {% if event %}
                    <h2><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a>
                    </h2>
                {% elif organizer %}
                    <h2><a href="{% abseventurl organizer "presale:organizer.index" %}" target="_blank">{{ organizer.name }}</a>
                    </h2>
                {% else %}
                    <h2><a href="{{ site_url }}" target="_blank">{{ site }}</a></h2>
                {% endif %}
                {% block header %}
                    <h1>{{ subject }}</h1>
                {% endblock %}
                <!--[if gte mso 9]>
                    </td></tr></table>
                <![endif]-->
            </td>
        </tr>
        {% include "pretixbase/email/separator.html" %}
        {% block content %}
        {% endblock %}
        <!--[if !mso]><!-- -->
        <tr>
            <td style="line-height: 0">
                <br>
                <img class="wide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAA8CAYAAAC6nMS5AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAPnSURBVHic7d3dbuJIEAbQsg2Ecd7/TQeDf3svVuFmdjJLxsGm+xwJKXcpqS76U3VTVCmlFAAArKbeugAAgNwIWAAAKxOwAABWJmABAKxMwAIAWNlh6wIAIiKWZYllWWKe5/vfEREppfsnIqKqqvsnIqKu66jrOpqmuf8NsDUBC3i6lFJM0xTjOMY0TbEsS6y1MaaqqqjrOg6HQxyPxzgcDvcwBvAslT1YwDN8BKpxHGOe56f+76Zp4ng83gMXwHcTsIBvsyxLDMMQfd/fr/y2Vtd1nE6nOJ1O0TTN1uUAmRKwgNV9hKppmrYu5VOHwyHO53Mcj8etSwEyI2ABqxmGIW6329OvAP9WXddxPp/j7e1t61KATAhYwF/r+z5ut9turgG/StAC1iJgAV82z3N0Xbf7q8BHNU0Tbdt6EA98mYAFPCylFNfrNfq+37qUb3U6naJtW2segIcJWMBDhmGIrutW21u1d1VVRdu2cTqdti4FeCECFvC/lDK1+h3TLOARAhbwR/M8x+VyeblvB66taZp4f3+3Pwv4IwEL+NQ4jnG5XIq5EvyTqqri/f3d7izgUwIW8FvDMMTlctm6jF1q29Y6B+C3BCzgP91ut7her1uXsWvn8zl+/PixdRnADglYwC+6riv2Mfuj3t7eom3brcsAdqbeugBgX4Srx/R9H13XbV0GsDMCFnB3u92Eqy/4+KkggA8CFhAR/z5o9+bq60reEQb8SsAC7qsY+Dtd18U4jluXAeyAgAWFW5ZFuFqRhaxAhIAFxfv586cloitKKVnMCghYULKu60xbvsE8z96zQeEELCjUOI4eZX+jvu+9x4KCCVhQoI9rLL6Xq0Iol4AFBbperw7+J0gpuSqEQglYUJh5nl0NPlHf9zFN09ZlAE8mYEFh/KzL85liQXkELCiIaco2pmmKYRi2LgN4IgELCuL38rZjigVlEbCgEMMwxLIsW5dRrGVZTLGgIAIWFML0ant6AOUQsKAA4zja2L4D8zxbPgqFELCgACYn+6EXUAYBCzK3LItvDu7INE3ewkEBBCzInIfV+6MnkD8BCzLnMN8fPYH8CViQsXmePW7fIX2B/AlYkDGTkv3SG8ibgAUZ87h9v/QG8iZgQaZSSg7xHZumKVJKW5cBfBMBCzIlXO2fHkG+BCzIlMN7//QI8iVgQaYc3vunR5AvAQsyZQ3A/tnoDvkSsCBDKSUPqF/Asiz6BJkSsCBDplevQ68gTwIWZMjV0+vQK8iTgAUZMhV5HXoFeRKwIEPe9bwOvYI8CViQIYf269AryJOABQCwMgELMmQq8jr0CvIkYEGGHNqvQ68gT/8AETAn3pyLgvsAAAAASUVORK5CYII="
                style="max-height: 60px;" alt="">
            </td>
        </tr>
        <!--<![endif]-->
    </table>
    <div class="footer">
        {% include "pretixbase/email/email_footer.html" %}
    </div>
    <br/>
    <br/>
    <!--[if gte mso 9]>
    </td></tr></table>
    </td></tr></table>
    <![endif]-->
</body>
</html>
