{% if with_base_template %}
<!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="http://www.w3.org/1999/xhtml" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;">
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{{ subject }}</title>

    {% if action_metadata %}
    <script type="application/ld+json">
    {{ action_metadata }}
    </script>
    {% endif %}
  </head>
  <body bgcolor="#F5F5F5" style="padding-left: 50px; padding-right: 50px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; margin: 0; padding: 0;"><style type="text/css">
      @media only screen and (max-width: 600px) {
      a[class="btn"] {
      display: block !important; margin-bottom: 10px !important; background-image: none !important; margin-right: 0 !important;
      }
      div[class="column"] {
      width: auto !important; float: none !important;
      }
      table.social div[class="column"] {
      width: auto !important;
      }
      }
    </style>

    <!-- HEADER -->
    <table cell-padding="10" class="head-wrap" bgcolor="#F5F5F5" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"><td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"></td>
	<td class="header container" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block !important; max-width: 100% !important; clear: both !important; margin: 0; padding: 0;">

	  <div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; max-width: 100%; display: block; margin: 0; padding: 15px;">
	    <table bgcolor="#F5F5F5" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"><td style="text-align: center; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"><img src="{{ app_logo }}" width="100" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; max-width: 100%; margin: 0; padding: 0;" alt="{{ app_title }}" title="{{ app_title }}"/></td>
	  </tr></table></div>

	</td>
	<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"></td>
    </tr></table><!-- /HEADER --><!-- BODY --><table class="body-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0 auto; padding: 0;     max-width: 640px; width: 100%;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"><td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"></td>
	<td class="container" bgcolor="#FFFFFF" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; display: block !important; max-width: 100% !important; clear: both !important; margin: 0; padding: 0; box-shadow: 0px 2px 4px 0px #888;">

	  <div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; max-width: 100%; display: block; margin: 0; padding: 15px;">
	    <table style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"><td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;">
{% endif %}
        {% block content %}{% endblock %}
{% if with_base_template %}
        <br>
        <br>
        <table style="font-size: 11px; font-weight: 200; font-style: italic; margin: 0 0 20px 0;">
          <tr><td>If you have any questions, respond to this email and we’ll be happy to help!</td></tr>
        </table>
		</td>
	  </tr></table></div><!-- /content -->

	</td>
	<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0;"></td>
    </tr></table><!-- /BODY -->
  {% if hosted %}
  <table style="text-align:center; margin:25px auto 0;">
    <tr>
      <td style="font-size: 13px; font-weight: 200">{{ app_title }} [ builds, analyzes, distributes ] your container images</td>
    </tr>
  </table>
  <table style="margin: 0 auto;">
    <tr style="font-size: 11px;" >
      {% if username %}
      <td><a style="color: #52A3D9;" href="{{ app_url }}/user/{{ username }}?tab=settings">Your Account</a></td>
      {% endif %}
      <td><a style="color: #52A3D9;" href="{{ app_url }}">{{ app_title }}</a></td>
    </tr>
  </table>
  {% endif %}
  </body>
</html>
{% endif %}
