<!DOCTYPE html>
<html lang={"#{@locale}"}>
  <head>
    <title><%= @subject %></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
      /* CLIENT-SPECIFIC STYLES */
      * { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
      table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; }
      img { -ms-interpolation-mode: bicubic; }

      /* RESET STYLES */
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
      table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; }
      table table table { table-layout: auto; }
      html, body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

      /* iOS BLUE LINKS */
      a[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;
      }

      /* MOBILE STYLES */
      @media screen and (max-width:600px){
          h1 {
              font-size: 32px !important;
              line-height: 32px !important;
          }
      }

      /* ANDROID CENTER FIX */
      div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>
    <%= if @jsonLDMetadata do %>
      <script type="application/ld+json">
        <%= @jsonLDMetadata |> raw %>
      </script>
    <% end %>
  </head>
  <body style="background-color: #ECEBF2; margin: 0 !important; padding: 0 !important;mso-line-height-rule: exactly;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!-- LOGO -->
      <tr>
        <td bgcolor="#474467" align="center">
          <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
              <tr>
                <td align="center" valign="top" width="600">
          <![endif]-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
            <tr>
              <td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
                <a href={"#{Mobilizon.Web.Endpoint.url()}"} target="_blank">
                  <img
                    alt={"#{@instance_name}"}
                    src={"#{"#{Mobilizon.Web.Endpoint.url()}/img/mobilizon_logo.png"}"}
                    width="340"
                    height="108"
                    style="display: block; width: 340px; max-width: 370px; min-width: 340px; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;"
                    border="0"
                  />
                </a>
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
          <![endif]-->
        </td>
      </tr>
      <%= @inner_content %>
      <%= if Mobilizon.Config.instance_demo_mode?() do %>
        <!-- BETA WARNING -->
        <tr>
          <td bgcolor="#ECEBF2" align="center" style="padding: 30px 10px 0px 10px;">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table
              border="0"
              cellpadding="0"
              cellspacing="0"
              width="100%"
              style="max-width: 600px;"
            >
              <!-- HEADLINE -->
              <tr>
                <td
                  bgcolor="#FFD599"
                  align="center"
                  style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
                >
                  <h2 style="font-size: 25px; font-weight: 400; color: #D35204; margin: 0;">
                    <%= gettext("Warning") %>
                  </h2>
                  <br />
                  <p style="margin: 0; color: #3A384C">
                    <%= gettext("This is a demonstration site to test Mobilizon.") %>
                  </p>
                  <p style="margin: 0; color: #3A384C;">
                    <b><%= gettext("Please do not use it for real purposes.") %></b>
                  </p>
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </td>
        </tr>
      <% end %>
      <!-- SUPPORT CALLOUT -->
      <tr>
        <td bgcolor="#ECEBF2" align="center" style="padding: 30px 10px 0px 10px;">
          <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
              <tr>
                <td align="center" valign="top" width="600">
          <![endif]-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
            <!-- HEADLINE -->
            <tr>
              <td
                bgcolor="#474467"
                align="center"
                style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
              >
                <h2 style="font-size: 20px; font-weight: 400; color: #FFFFFF; margin: 0;">
                  <%= gettext("Need help? Is something not working as expected?") %>
                </h2>
                <p style="margin: 0;">
                  <a
                    href="https://framacolibri.org/c/mobilizon/39"
                    target="_blank"
                    style="color: #FFFFFF;"
                  >
                    <%= gettext("Ask the community on Framacolibri") %>
                  </a>
                </p>
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
          <![endif]-->
        </td>
      </tr>
      <!-- FOOTER -->
      <tr>
        <td bgcolor="#ECEBF2" align="center" style="padding: 0px 10px 0px 10px;">
          <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
              <tr>
                <td align="center" valign="top" width="600">
          <![endif]-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
            <!-- ADDRESS -->
            <tr>
              <td
                bgcolor="#ECEBF2"
                align="center"
                style="padding: 30px 30px 30px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;"
              >
                <%= if @offer_unsupscription do %>
                  <p>
                    <a href={"#{Mobilizon.Web.Endpoint.url()}/settings/notifications"}>
                      <%= gettext("Manage your notification settings") %>
                    </a>
                  </p>
                <% end %>
                <p style="margin: 0;">
                  <%= gettext("<b>%{instance}</b> is powered by Mobilizon.",
                    instance: @instance_name
                  )
                  |> raw %>
                  <br />
                  <a href="https://joinmobilizon.org">
                    <%= gettext("Learn more about Mobilizon here!") %>
                  </a>
                </p>
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
          <![endif]-->
        </td>
      </tr>
    </table>
  </body>
</html>
