{% load static %}
<!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>
    <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
    <title>$title</title>
    <style type="text/css">
        body,
        html {
            Margin: 0 !important;
            padding: 0 !important;
            width: 100% !important
        }

        h1,
        h2,
        h3,
        h4 {
            Margin: 0
        }

        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%
        }

        table,
        td {
            mso-table-lspace: 0 !important;
            mso-table-rspace: 0 !important
        }

        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: auto !important
        }

        img {
            -ms-interpolation-mode: bicubic
        }

        .mobile-link--footer a,
        .email-width,
        .row {
            Margin: 0 auto !important
        }

        @media screen and (max-width:504px) {
            .row .stack-column {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
                min-width: 100% !important
            }

            body {
                display: none !important
            }

            table {
                display: table;
                max-height: none;
                visibility: visible;
                width: 100% !important
            }

            .email-width {
                width: 100% !important
            }
        }

        @media only screen and (min-width:505px) {
            .row .stack-column {
                min-width: 0 !important
            }
        }

        [owa] .no-stack-column,
        [owa] .stack-column {
            Margin: 0 -2px;
            float: none;
            display: inline-block !important
        }

        .stack-column {
            min-width: 0 !important
        }

        .no-stack-column {
            min-height: 1px
        }

        body .stack-column {
            min-width: 100% !important
        }

        td.row-container {
            padding: 0;
            text-align: center;
            height: 100%;
            vertical-align: top;
            width: 100%
        }

        .stack-col,
        .stack-column {
            width: 600px;
            display: inline-block;
            vertical-align: top
        }

        .no-stack-col,
        .no-stack-column {
            display: inline-block;
            vertical-align: top;
            width: 33.333333%;
        }

        .stack-column-row {
            display: inline-block;
        }

        .col-font-reset,
        .font-reset {
            font-size: 14px;
            text-align: left
        }

        .border-collapse {
            border-collapse: collapse
        }


        img {
            max-width: 100%
        }

        ul li {
            margin: 0
        }

        body,
        td {
            font-family: "Inter", sans-serif;
        }

        .element-editable:not(img),
        .element-editable td,
        .element-editable p {
            line-height: 25px;
            Margin: 0px;
            text-align: center;
        }

        .icons {
          padding-top: 15px;
          padding-right: 10px;
          padding-bottom: 10px;
          padding-left: 10px;
        }

        .icon-link {
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          color: rgb(205, 173, 37);
          font-family: Arial, sans-serif;
          font-size: 12px;
          height: 32px;
          width: 32px;
        }

        .footer-bg {
          background: #e0004d;
          table-layout: auto;
        }

        .footer {
          position: static;
        }

        .footer-td {
          padding-top: 40px;
          padding-right: 40px;
          padding-bottom: 40px;
          padding-left: 40px;
        }

        .footer > p {
          text-align: center;
          color: #fff
        }

        .footer > p > a {
          text-decoration: underline;
          color: #fff;
        }

        .cfl-team {
          color: rgb(224, 0, 77);
          font-family: "Space Grotesk";
          font-size: 18px;
          text-align: center;
        }

        .middle-block {
          position: relative;
          max-width: 660px;
          table-layout: auto;
        }

        .singular-icon {
          padding-top: 3px;
          padding-right: 15px;
          padding-bottom: 3px;
          padding-left: 15px;
        }

        .center-content {
          width: 33.333333%;
          max-width: 33.333333%;
          min-width: 33.333333%;
        }

        .contact-us {
          color: #fff;
        }

  </style>
</head>

<body>
<table cellspacing="0" cellpadding="0" border="0" width="660" align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row three-cols" style="table-layout: auto;">
  <tbody>
    <tr>
      <td align="center" valign="top" class="row-inner element-pad" dir="ltr" style="display: flex">
        <!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:640px;" width="640"><tr><td align="left" valign="top" style="width:213.328px;" width="213.328"><![endif]-->
        <div class="no-stack-column no-stack-column-width" style="">
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody>
              <tr>
                <td dir="ltr" class="col-inner" align="left">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0" data-title="Image">
                    <tbody>
                      <tr>
                        <td align="left" class="element-pad element-bord"><a href=" {{ url_prefix }}">
                          <img src="{{ url_prefix }}/static/portal/img/logo_cfl.png" width="81" style="min-height: auto; display: block;" alt="logo_cfl">
                        </a>
                      </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div><!--[if mso]></td><td align="left" valign="top" style="width:213.328px;" width="213.328"><![endif]-->
        <div class="no-stack-column no-stack-column-width">
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody>
              <tr>
                <td dir="ltr" class="col-inner" align="left"></td>
              </tr>
            </tbody>
          </table>
        </div><!--[if mso]></td><td align="left" valign="top" style="width:213.328px;" width="213.328"><![endif]-->
        <div class="no-stack-column no-stack-column-width">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;">
            <tbody>
              <tr>
                <td dir="ltr" class="col-inner" align="left">
                  <table width="100%" border="0" cellpadding="0" cing="0" data-title="Image">
                    <tbody>
                      <tr>
                        <td class="element-pad element-bord" align="right">
                          <a href="https://www.ocadogroup.com/sustainability/sustainability">
                            <img src="{{ url_prefix }}/static/portal/img/logo_ocado_group.png" width="122" style="min-height: auto;" alt="logo_ocado_group">
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div><!--[if mso]></td></tr></table><![endif]-->
      </td>
    </tr>
  </tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row" class="middle-block">
  <tbody>
    <tr>
      <td align="center" valign="top" class="row-inner  element-pad" dir="ltr" style="padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px;">
        <!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:640px;" width="640"><tr><td align="left" valign="top" style="width:640px;" width="640"><![endif]-->
          <table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;">
            <tbody>
              <tr>
                <td dir="ltr" class="col-inner" align="left">
                  <table cellpadding="0" cellspacing="0" width="100%" data-title="Text">
                    <tbody>
                      <tr>
                        <td valign="top" align="left" class="element-pad element-bord" style="padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;">
                          <div class="element-editable" style="text-align: center;">
                            <p dir="ltr">{% block email_content %} {% endblock email_content %}</p>
                            <p dir="ltr"><br></p>
                            <p dir="ltr">All the best,</p>
                            <p dir="ltr"><br></p>
                            <p dir="ltr" class="cfl-team">Code for Life team</p>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
      </td>
    </tr>
  </tbody>
</table>
<table align="center">
  <tbody>
    <tr>
      <td valign="top" class="icons">
          <table>
            <tbody>
              <tr>
                <td class="singular-icon">
                  <a href="https://www.facebook.com/codeforlifeuk/"><img border="0" class="icon-link" height="32" width="32" src="{{ url_prefix }}/static/portal/img/facebook.png" title="Facebook" alt="facebook"></a>
                </td>
                <td>
                  <a href="https://twitter.com/codeforlifeuk"><img border="0" class="icon-link" height="32" width="32" src="{{ url_prefix }}/static/portal/img/twitter.png" title="Twitter" alt="twitter"></a>
                </td>
              </tr>
            </tbody>
          </table>
      </td>
    </tr>
  </tbody>
</table>
<table cellpadding="0" cellspacing="0" width="100%" data-title="Text" class="footer-bg">
  <tbody>
    <tr>
      <td valign="top" align="left" class="footer-td">
        <div class="footer">
          <a align="center" class="contact-us" href="mailto:codeforlife@ocado.com?subject=Contact us">
            <p>Contact us</p>
          </a>
            <p><br></p>
          <p>Ocado Innovation Limited is registered in England under registered company number 08813912 with its registered office at Buildings One & Two Trident Place, Mosquito Way, Hatfield, Hertfordshire, United Kingdom, AL10 9UL</p>
          <p>You can find out about our privacy notice <a href="{{ url_prefix }}/privacy-notice" title="Privacy Notice">here</a></p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</table>
</body>

</html>
