{% load i18n %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title>{{ email_title }}</title> <!-- The title tag shows in email notifications, like Android 4.4. -->


    <style>
        * {
            font-family: sans-serif !important;
        }
    </style>
    <!-- CSS Reset : BEGIN -->
    <style>

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }
        .ExternalClass {width: 100%;}
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin: 0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: A work-around for email clients meddling in triggered links. */
        *[x-apple-data-detectors],  /* iOS */
        .x-gmail-data-detectors,    /* Gmail */
        .x-gmail-data-detectors *,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
        .a6S {
           display: none !important;
           opacity: 0.01 !important;
       }
       /* If the above doesn't work, add a .g-img class to any image in question. */
       img.g-img + div {
           display: none !important;
       }

       /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }

        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */

        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
            .email-container {
                min-width: 320px !important;
            }
        }
        /* iPhone 6, 6S, 7, 8, and X */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
            .email-container {
                min-width: 375px !important;
            }
        }
        /* iPhone 6+, 7+, and 8+ */
        @media only screen and (min-device-width: 414px) {
            .email-container {
                min-width: 414px !important;
            }
        }

        /**
        * Google webfonts. Recommended to include the .woff version for cross-client compatibility.
        */
        @media screen {
            @font-face {
                font-family: 'Source Sans Pro';
                font-style: normal;
                font-weight: 400;
                src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
            }

            @font-face {
                font-family: 'Source Sans Pro';
                font-style: normal;
                font-weight: 700;
                src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
            }
        }

        /**
        * Avoid browser level font resizing.
        * 1. Windows Mobile
        * 2. iOS / OSX
        */
        body,
        table,
        td,
        a {
            -ms-text-size-adjust: 100%;
            /* 1 */
            -webkit-text-size-adjust: 100%;
            /* 2 */
        }
        .ExternalClass {width: 100%;}
        /**
        * Remove extra space added to tables and cells in Outlook.
        */
        table,
        td {
            mso-table-rspace: 0pt;
            mso-table-lspace: 0pt;
        }

        /**
        * Better fluid images in Internet Explorer.
        */
        img {
            -ms-interpolation-mode: bicubic;
        }

        /**
        * Remove blue links for iOS devices.
        */
        a[x-apple-data-detectors] {
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
            color: inherit !important;
            text-decoration: none !important;
        }

        /**
        * Fix centering issues in Android 4.4.
        */
        div[style*="margin: 16px 0;"] {
            margin: 0 !important;
        }

        /**
        * Collapse table borders to avoid space between cells.
        */
        table {
            border-collapse: collapse !important;
        }

        a {
            color: #1a82e2;
        }

        img {
            height: auto;
            line-height: 100%;
            text-decoration: none;
            border: 0;
            outline: none;
        }
    </style>
    <!-- CSS Reset : END -->

    <style>
        .fluid {
            width: 100%;
        }
        .fixed {
            width: 500px;
        }
        #body-table {
            width: 100%;
            margin: auto;
            border-collapse: collapse;
            table-layout: fixed;
        }
        #body-table #white-row > .spacer-left,
        #body-table #white-row > .spacer-middle,
        #body-table #white-row > .spacer-right {
            height: 25px;
            background-color: white;
        }
        #body-table #first-row > .spacer-left,
        #body-table #first-row > .spacer-right {
            height: 50px;
            background-color: white;
        }
        #body-table #first-row > .spacer-middle {
            height: 50px;
            background-color: #313952;
        }
        #body-table #title-row > .spacer-left,
        #body-table #title-row > .spacer-right {
            height: 82px;
            background-color: #eaf2ff;
        }
        #body-table #title-logo {
            height: 132px;
            background-color: #313952;
            vertical-align: middle;
            text-align: center;
        }
        #body-table .content-row > .spacer-left,
        #body-table .content-row > .spacer-right {
            background-color: #eaf2ff;
        }
        #body-table .content-row > .body-content {
            background-color: #fff;
            padding-right: 30px;
            padding-left: 30px;
        }
        #body-table #spacer-row > .spacer-left,
        #body-table #spacer-row > .spacer-middle,
        #body-table #spacer-row > .spacer-right {
            height: 50px;
            background-color: #eaf2ff;
        }
        #body-table #footer-row {
            border-top: 1px solid #ccdff3;
        }
        #body-table #footer-row > .spacer-left,
        #body-table #footer-row > #footer-content,
        #body-table #footer-row > .spacer-right {
            background-color: #eaf2ff;
            padding-top: 15px;
        }
        #body-table #footer-row > #footer-content {
            padding-bottom: 40px !important;
        }

        #footer-content > p {
            font-size: 10px !important;
            color: #a4b3cb !important;
            margin-top: 0 !important;
        }
    </style>

</head>
<body width="100%" bgcolor="white" style="margin: 0; mso-line-height-rule: exactly;text-align: center;">


        <!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
            {% block email_hidden_header %}
            {% endblock %}
        </div>
        <!-- Visually Hidden Preheader Text : END -->

        <!-- Email Body : BEGIN -->
        <table id="body-table" role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" class="email-container">
            <colgroup>
                <col class="fluid">
                <col class="fixed">
                <col class="fluid">
            </colgroup>
            <tr id="white-row">
                <td class="spacer-left"></td>
                <td class="spacer-middle"></td>
                <td class="spacer-right"></td>
            </tr>
            <tr id="first-row">
                <td class="spacer-left"></td>
                <td rowspan="2" id="title-logo">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAA0CAYAAAAZgW/cAAAACXBIWXMAAAsSAAALEgHS3X78AAAFTklEQVR4AcVaT2gcVRz+sglhDNWuehBKIQFF0IsRkUIRG4tFqoXkKi4kB09eHIp4EDyFIhSkc/Cg9NAUBir2YFqsFSx0lSLYQ6kgjZSCFSRSbTEx4G42+0fe+ja8zL43772ZbyYfhM3OvMxv5nvf9/58mZHGu2+FAE6Bh0eDKF6zXa0Z1q4DeJFU9UIQxXPEZ5gCIK43A6Aqj90FUAewDGDo+SoAlog3AHkDqWiGtXEAXxFrzjbDWtWhnQ1VycevUlyzAA7Jn3kAZyShYfI6FameC8SHclHGBIDviTVd66ZhWpI0b2m3V5K8Q4AV+bmc8yZUuKhDELkB4Fti3TxETknb7vX4m3mVzCKIhMND7ZGf14g189h7yZPEAeYHz9onUtr7bMab0GHBcn5Cfgp7/0Osm0WV03IMzIoIiiJBVuWhZlib0p2QE82o/CrsfYVYd2gSsKK99XbOmpOiM7aJDKJYELme86IqTOqYSHz/gVjzOVMHGjEy8jyh7kwlcYCpSpO9k0TWd8vezbA2oawT86CaJJK5pjSpY4/mGHP5ZRufVTzOKrqDyCCKhTp+Y13coI6HNccuE2v62LuKbpfhhrtJRaJIe0sr6XAbwO/Eui67K3Ev4731v28Q6tV1RBZp74dS2l4l1nWxd9/W7frlb3JVam1e1yoyiOKbBdrbpEiB88SaLvbuTzKda1dWexvrmcfo3v17J5AcIxVEWS+sgaqONEWuArhFrGu0dzOsiXF6fPB96+wnEdpbK74Feg/+PLd58oNLSCGSOU6q6tBNNCqYiVCavXfM1t07KxutT0++40Nmn8TF4x8GUdyBicggikUK8pPHTdsQpkw0Kph7b9GB04ZzQ2vHAZm9e6ufodczz+TtrT+6P994b3Px+MdqLjmWciORzN8YEDZbdLiOsPePAA6Q6i4kt40y2BjVNRZkbn70/unKU898PjZz9IWRJ/Y9icpoB71uBe32WOfWzXr74rnbyp84EblMJHJSpuF/ObT9mkjknGb/bd3J9NV5Z6Uud10mrA1sjZQxEgUEvm86tmMGvpMaezO2hEj+u8FIpARz0jns2I4d+G5POmm2zgBvIlmJ0H4ATzu2ZU466jKIpkbV1rARKe3NVOVRx3aXiImQau9CbA0HRYJM5CsebZmB7wLR1p0gih8kD1qJJAe+PvZmBr5zRaoRjorELtmbGfhOEpdUuYhk7r197M1cfr1BuEbH9BaJE5HkRGi/fBXEBczAd5ZwDeOrOK6KBNneBx3bMQPfRzw60AQKkczA91WPtszA17UDdTDaGj5ESnuzEiEfdTADX58OTCL1DTsfRYKsSld1MAPfPPYeWjuq8CWSOU76qOMLYt0s9m4FUbyR1sCLSHLg66OOL0k1kdHe1hdnfRUJ8prSVR2/APiOVDOLvVNtjYxElm1vMVu2dml8hrT1v7ZG3kSSA18XdQzGpt0an622RkZFgvxQr1nON1BMB7puGa22Rk4iWYnQEcu/adXZktmBLzm0cbI1shJZQOD7csq57QcJonipxA6Eq62RQ5EoSR2tZKRfYgfC1dbIQyQ58DWpQ2ersuzdcLU1cioSJaijkTxQUgcK3Pe5UF4imYtznTpM2zLmmtJkb+fxEXmJJAe+OnWYrMUkUteBDbkJcEZeRaJAe+smmj5K6EAvW4NEZFHqsA30RY7PXrYGg0hy4CvUsU/+PjTRJMAcn19Xfve2NUiKFChClan5HznSO6B0oLetQSSSabNj+J+oVCIliuhAb1uDRSRZHc8CeMyxLbsD17LYGkRFCpQe+MoOZAW+ogNFKuQPAP8ByFisQrjpMXEAAAAASUVORK5CYII=" alt="Logo">
                </td>
                <td class="spacer-right"></td>
            </tr>
            <tr id="title-row">
                <td class="spacer-left"></td>
                <td class="spacer-right"></td>
            </tr>
            {% block content %}
            {% endblock content%}
            <tr id="spacer-row">
                <td class="spacer-left"></td>
                <td class="spacer-middle"></td>
                <td class="spacer-right"></td>
            </tr>
            <tr id="footer-row">
                <td class="spacer-left"></td>
                <td id="footer-content" class="x-gmail-data-detectors">
                    {% block impress %}
                        <p>{% translate "This E-Mail is autogenerated by Stainly. If you need more information, please visit the Stainly-Bench." %}</p>
                    {% endblock %}
                </td>
                <td class="spacer-right"></td>
            </tr>

        </table>
        <!-- Email Footer : END -->

</body>
</html>
