{% from "_emailhelpers.html" import render_text, text, render_button, raw_url, grey_section, section %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <!-- NAME: 1 COLUMN -->
    <!--[if gte mso 15]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta charset="UTF-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection"
          content="telephone=no, date=no, address=no, email=no, url=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Proton">
    <style type="text/css">
            p {
                margin: 12px 0;
                padding: 0;
            }

            table {
                border-collapse: collapse;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                display: block;
                margin: 0;
                padding: 0;
            }

            img,
            a img {
                border: 0;
                height: auto;
                outline: none;
                text-decoration: none;
            }

            body,
            #bodyTable,
            #bodyCell {
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            .mcnPreviewText {
                display: none !important;
            }

            #outlook a {
                padding: 0;
            }

            img {
                -ms-interpolation-mode: bicubic;
            }

            table {
                mso-table-lspace: 0pt;
                mso-table-rspace: 0pt;
            }

            .ReadMsgBody {
                width: 100%;
            }

            .ExternalClass {
                width: 100%;
            }

            p,
            a,
            li,
            td,
            blockquote {
                mso-line-height-rule: exactly;
            }

            a[href^=tel],
            a[href^=sms] {
                color: inherit;
                cursor: default;
                text-decoration: none;
            }

            p,
            a,
            li,
            td,
            body,
            table,
            blockquote {
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }

            .ExternalClass,
            .ExternalClass p,
            .ExternalClass td,
            .ExternalClass div,
            .ExternalClass span,
            .ExternalClass font {
                line-height: 100%;
            }

            .no-link a,
            a[x-apple-data-detectors],
            a[href^="x-apple-data-detectors:"] {
                color: inherit !important;
                text-decoration: none !important;
                font-size: inherit !important;
                font-family: inherit !important;
                font-weight: inherit !important;
                line-height: inherit !important;
            }

            #bodyCell {
                padding: 10px;
            }

            .templateContainer {
                max-width: 600px !important;
            }

            a.mcnButton {
                display: block;
            }

            .mcnImage,
            .mcnRetinaImage {
                vertical-align: bottom;
            }

            .mcnTextContent {
                word-break: break-word;
            }

            .mcnTextContent img {
                height: auto !important;
            }

            .mcnDividerBlock {
                table-layout: fixed !important;
            }

            .mcnHalfTextRight {
                border: 1px solid red;
            }

            @media only screen and (min-width:768px) {
                .templateContainer {
                    width: 600px !important;
                }
            }

            @media only screen and (max-width: 480px) {

                body,
                table,
                td,
                p,
                a,
                li,
                blockquote {
                    -webkit-text-size-adjust: none !important;
                }

                body {
                    width: 100% !important;
                    min-width: 100% !important;
                }

                .mcnRetinaImage {
                    max-width: 100% !important;
                }

                .mcnImage {
                    width: 100% !important;
                }

                .mcnCaptionLeftImageContent .mcnImage,
                .mcnCaptionRightImageContent .mcnImage {
                    width: 176px !important;
                }

                .mcnHalfCaptionLeftImageContent .mcnImage,
                .mcnHalfCaptionRightImageContent .mcnImage {
                    width: 268px !important;
                }

                .mcnBoxContentColumnBoxed {
                    padding: 8px !important;
                    margin: 0 !important;
                }

                .mcnButtonContentContainer,
                .mcnCartContainer,
                .mcnCaptionTopContent,
                .mcnRecContentContainer,
                .mcnCaptionBottomContent,
                .mcnTextContentContainer,
                .mcnBoxedTextContentContainer,
                .mcnImageGroupContentContainer,
                .mcnCaptionLeftTextContentContainer,
                .mcnCaptionRightTextContentContainer,
                .mcnCaptionLeftImageContentContainer,
                .mcnCaptionRightImageContentContainer,
                .mcnImageCardLeftTextContentContainer,
                .mcnImageCardRightTextContentContainer,
                .mcnImageCardLeftImageContentContainer,
                .mcnImageCardRightImageContentContainer {
                    max-width: 100% !important;
                    width: 100% !important;
                }

                .mcnBoxedTextContentContainer {
                    min-width: 100% !important;
                }

                .mcnImageGroupContent {
                    padding: 16px !important;
                }

                .mcnCaptionLeftContentOuter .mcnTextContent,
                .mcnCaptionRightContentOuter .mcnTextContent {
                    padding-top: 16px !important;
                }

                .mcnImageCardTopImageContent,
                .mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,
                .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent {
                    padding-top: 32px !important;
                }

                .mcnHalfCaptionLeftImageContent,
                .mcnHalfCaptionRightImageContent {
                    text-align: center;
                }

                .mcnImageCardBottomImageContent {
                    padding-bottom: 16px !important;
                }

                .mcnImageGroupBlockInner {
                    padding-top: 0 !important;
                    padding-bottom: 0 !important;
                }

                .mcnImageGroupBlockOuter {
                    padding-top: 16px !important;
                    padding-bottom: 16px !important;
                }

                .mcnTextContent,
                .mcnBoxedTextContentColumn {
                    padding-right: 32px !important;
                    padding-left: 32px !important;
                }

                .mcnCaptionBottomContent .mcnTextContent {
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                }

                .mcnCaptionLeftTextContentContainer .mcnTextContent,
                .mcnCaptionRightTextContentContainer .mcnTextContent {
                    padding-right: 0 !important;
                    padding-left: 0 !important;
                }

                .mcnImageCardLeftImageContent,
                .mcnImageCardRightImageContent {
                    padding-right: 32px !important;
                    padding-bottom: 0 !important;
                    padding-left: 32px !important;
                }

                .mcnTextContent ul,
                .mcnTextContent ol {
                    padding-inline-start: 24px !important;
                }

                .mcnButtonContent {
                    padding-left: 24px !important;
                    padding-right: 24px !important;
                }

                .mcnButtonHint {
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                }

                .mcnButtonHint,
                .mcnButtonHint * {
                    text-align: center !important;
                }

                .mcpreview-image-uploader {
                    display: none !important;
                    width: 100% !important;
                }

                .hide-on-mobile {
                    display: none !important;
                }

                .flex-stack-on-mobile {
                    flex-direction: column;
                }

                .flex-stack-on-mobile .mcnCaptionBottomContent,
                .flex-stack-on-mobile .mcnBoxContentContainer {
                    height: auto !important;
                }

                /*
            @tab Mobile Styles
            @section Heading 1
            @tip Make the first-level headings larger in size for better readability on small screens.
            */
                h1 {
                    font-size: 22px !important;
                    line-height: 1.25em !important;
                }

                /*
            @tab Mobile Styles
            @section Heading 2
            @tip Make the second-level headings larger in size for better readability on small screens.
            */
                h2 {
                    font-size: 20px !important;
                    line-height: 1.25em !important;
                }

                /*
            @tab Mobile Styles
            @section Heading 3
            @tip Make the third-level headings larger in size for better readability on small screens.
            */
                h3 {
                    font-size: 18px !important;
                    line-height: 1.25em !important;
                }

                /*
            @tab Mobile Styles
            @section Heading 4
            @tip Make the fourth-level headings larger in size for better readability on small screens.
            */
                h4 {
                    font-size: 16px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Boxed Text
            @tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
                .mcnBoxedTextContentContainer .mcnTextContent,
                .mcnBoxedTextContentContainer .mcnTextContent p {
                    font-size: 14px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Preheader Visibility
            @tip Set the visibility of the email's preheader on small screens. You can hide it to save space.
            */
                #templatePreheader {
                    display: block !important;
                }

                /*
            @tab Mobile Styles
            @section Preheader Text
            @tip Make the preheader text larger in size for better readability on small screens.
            */
                #templatePreheader .mcnTextContent,
                #templatePreheader .mcnTextContent p,
                #templateBody .templatePreheader .mcnTextContent,
                #templateBody .templatePreheader .mcnTextContent p {
                    font-size: 13px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Header Text
            @tip Make the header text larger in size for better readability on small screens.
            */
                #templateHeader .mcnTextContent,
                #templateHeader .mcnTextContent p {
                    font-size: 16px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Body Text
            @tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
                #templateBody .mcnTextContent,
                #templateBody .mcnTextContent p {
                    font-size: 16px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Body Caption Text
            @tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
                #templateBody .templateBodyCaption,
                #templateBody .templateBodyCaption p {
                    font-size: 14px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Footer Text
            @tip Make the footer content text larger in size for better readability on small screens.
            */
                #templateFooter .mcnTextContent,
                #templateFooter .mcnTextContent p {
                    font-size: 14px !important;
                    line-height: 1.5em !important;
                }

                /*
            @tab Mobile Styles
            @section Footer Follow icons
            @tip Reduce the spacing between the footer icons to avoid a line-break them on small screens.
            */
                #templateFooter .mcnFollowContentItemContainer {
                    padding-left: 2px !important;
                    padding-right: 2px !important;
                }

                /*
            @tab Mobile Styles
            @section Footer Follow icons
            @tip Reduce the spacing between the footer icons to avoid a line-break them on small screens.
            */
                #templateFooter .mcnFollowContentItemContainerSmall {
                    padding-left: 8px !important;
                    padding-right: 8px !important;
                }

                /*
            @text Mobile Style
             */
                .mcnCaptionRightImageContent,
                .mcnCaptionLeftImageContent {
                    text-align: center;
                }
            }

            @media only screen and (max-width: 352px) {

                /*
            @tab Mobile Styles
            @section Footer Follow icons
            @tip Reduce the icon size on very small screens.
            */
                .mcnFollowIconContent,
                .mcnFollowIconContent img.social-icon {
                    width: 38px !important;
                    height: 38px !important;
                }

                /*
            @tab Mobile Styles
            @section Footer Follow icons
            @tip Remove the spacing between the footer icons to avoid a line-break them on very small screens.
            */
                #templateFooter .mcnFollowContentItemContainer {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }
            }
    </style>
  </head>
  <body style="height: 100%;
               margin: 0;
               padding: 0;
               width: 100%;
               -ms-text-size-adjust: 100%;
               -webkit-text-size-adjust: 100%">
    <!--[if !gte mso 9]><!----><span class="mcnPreviewText"
      style="display:none;
             font-size:0px;
             line-height:0px;
             max-height:0px;
             max-width:0px;
             opacity:0;
             overflow:hidden;
             visibility:hidden;
             mso-hide:all"></span><!--<![endif]-->
    <center>
      <table align="center"
             border="0"
             cellpadding="0"
             cellspacing="0"
             height="100%"
             width="100%"
             id="bodyTable"
             style="border-collapse: collapse;
                    mso-table-lspace: 0pt;
                    mso-table-rspace: 0pt;
                    -ms-text-size-adjust: 100%;
                    -webkit-text-size-adjust: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%">
        <tr>
          <td align="center"
              valign="top"
              id="bodyCell"
              style="mso-line-height-rule: exactly;
                     -ms-text-size-adjust: 100%;
                     -webkit-text-size-adjust: 100%;
                     height: 100%;
                     margin: 0;
                     padding: 8px;
                     width: 100%">
            <!-- BEGIN TEMPLATE // -->
            <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"><tr><td align="center" valign="top" width="600" style="width:600px;">
                    <![endif]-->
            <table border="0"
                   cellpadding="0"
                   cellspacing="0"
                   width="100%"
                   class="templateContainer"
                   style="border-collapse: collapse;
                          mso-table-lspace: 0pt;
                          mso-table-rspace: 0pt;
                          -ms-text-size-adjust: 100%;
                          -webkit-text-size-adjust: 100%;
                          max-width: 600px !important">
              <tr>
                <td valign="top"
                    id="templateHeader"
                    style="mso-line-height-rule: exactly;
                           -ms-text-size-adjust: 100%;
                           -webkit-text-size-adjust: 100%">
                  <table border="0"
                         cellpadding="0"
                         cellspacing="0"
                         width="100%"
                         class="mcnImageBlock"
                         style="min-width: 100%;
                                border-collapse: collapse;
                                mso-table-lspace: 0pt;
                                mso-table-rspace: 0pt;
                                -ms-text-size-adjust: 100%;
                                -webkit-text-size-adjust: 100%">
                    <tbody class="mcnImageBlockOuter">
                      <tr>
                        <td valign="top"
                            style="padding: 16px;
                                   mso-line-height-rule: exactly;
                                   -ms-text-size-adjust: 100%;
                                   -webkit-text-size-adjust: 100%"
                            class="mcnImageBlockInner">
                          <table align="left"
                                 width="100%"
                                 border="0"
                                 cellpadding="0"
                                 cellspacing="0"
                                 class="mcnImageContentContainer"
                                 style="min-width: 100%;
                                        border-collapse: collapse;
                                        mso-table-lspace: 0pt;
                                        mso-table-rspace: 0pt;
                                        -ms-text-size-adjust: 100%;
                                        -webkit-text-size-adjust: 100%">
                            <tbody>
                              <tr>
                                <td class="mcnImageContent"
                                    valign="top"
                                    style="padding: 16px;
                                           text-align: center;
                                           mso-line-height-rule: exactly;
                                           -ms-text-size-adjust: 100%;
                                           -webkit-text-size-adjust: 100%">
                                  <a href="https://proton.me/" target="_blank" style="">
                                    <img align="center"
                                         alt="Proton"
                                         src="{{ URL }}/static/logo-proton.png"
                                         width="190"
                                         style="width:35.4477%;
                                                max-width: 380px;
                                                padding-bottom: 0;
                                                display: inline !important;
                                                vertical-align: bottom;
                                                border: 0;
                                                height: auto;
                                                outline: none;
                                                text-decoration: none;
                                                -ms-interpolation-mode: bicubic">
                                  </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td valign="top"
                    id="templateBody"
                    style="mso-line-height-rule: exactly;
                           -ms-text-size-adjust: 100%;
                           -webkit-text-size-adjust: 100%">
                  {% block greeting %}{% endblock %}
                  {% block content %}{% endblock %}
                  <!-- Sub copy -->
                  {% block sub_copy %}{% endblock %}
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
            <!-- // END TEMPLATE -->
          </td>
        </tr>
      </table>
    </center>
  </body>
</html>
