{% load eventurl %}
{% load i18n %}
{% load thumb %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{subject}}</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
    <style type="text/css">
        body, .container {
            background-color: #eee;
            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 1.4;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            padding: 20px;
        }

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

        table.layout > tr > td.logo,
        table.layout > tbody > tr > td.logo,
        table.layout > thead > tr > td.logo {
            padding: {% if event.settings.logo_image_large %}0 0 0 0{% else %}20px 0 0 0{% endif %};
            mso-line-height-rule: at-least;
        }

        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:last-child {
            margin-bottom: 0;
        }

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

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

        ::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;
        }

        img {
            display: block;
        }

        .content {
            text-align: left;
        }

        .content table {
            width: 100%;
        }

        .content table td {
            vertical-align: top;
            text-align: left;
        }
        table.layout > tr > td.containertd,
        table.layout > tbody > tr > td.containertd,
        table.layout > thead > tr > td.containertd {
            padding: 20px;
        }

        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 {
            border-top: 1px solid #ccc;
            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">
    <table width="100%"><tr><td align="center" class="container">
    <!--[if gte mso 9]>
    <table width="600"><tr><td align="center">
    <![endif]-->
    <table class="layout" style="max-width:600px" border="0" cellspacing="0">
        {% if event.settings.logo_image %}
            <tr>
                <td align="center" class="logo">
                    {% if event.settings.logo_image_large %}
                        <img src="{% if event.settings.logo_image|thumb:'600_x5000'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x5000' }}" alt="{{ event.name }}" style="width:100%" />
                    {% else %}
                        <img src="{% if event.settings.logo_image|thumb:'600_x120'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x120' }}" alt="{{ event.name }}" style="width:100%" />
                    {% endif %}
                </td>
            </tr>
        {% endif %}
        <tr>
            <td class="header" align="center">
                {% 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 %}
            </td>
        </tr>
        <tr>
            <td class="containertd">
                <div class="content">
                    {{ body|safe }}
                </div>
            </td>
        </tr>
        {% if order %}
            <tr>
                <td class="order containertd">
                    <div class="content">
                        {% include "pretixbase/email/order_details.html" %}
                    </div>
                </td>
            </tr>
        {% endif %}
        {% if signature %}
            <tr>
                <td class="order containertd">
                    <div class="content">
                        {{ signature | safe }}
                    </div>
                </td>
            </tr>
        {% endif %}
    </table>
    <div class="footer">
        {% include "pretixbase/email/email_footer.html" %}
    </div>
    <br/>
    <br/>
    <!--[if gte mso 9]>
    </td></tr></table>
    <![endif]-->
    </td></tr></table>
</body>
</html>
