<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title><%= title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    @media only screen and (max-width:600px) {
      .container { width:100% !important; }
      .stack-column, .stack-column-center { display:block !important; width:100% !important; max-width:100% !important; }
      .stack-column-center { text-align:center !important; }
      .logo { margin:0 auto !important; }
      .header-right { padding-top:8px !important; }
    }
    .preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
  </style>
</head>
<body style="Margin:0;padding:0;background-color:#f4f5f7;font-family:Arial, Helvetica, sans-serif;">

  <div class="preheader" style="font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;"><%= description %></div>

  <!-- Outer wrapper -->
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#f4f5f7;">
    <tr>
      <td align="center" style="padding:20px 16px;">

        <!-- HEADER on transparent background -->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" class="container" style="width:600px;max-width:100%;">
          <tr>
            <td style="padding:16px 0px 12px 0px;">
              <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <!-- Left: logo -->
                  <td class="stack-column" style="vertical-align:middle;text-align:left;">
                    <a href="https://app.owox.com" target="_blank" rel="noopener noreferrer" style="display:inline-block;text-decoration:none;color:#1E88E5;font-size:14px;font-weight:bold;">
                      <span style="display:inline-block;padding:0px 4px;height:30px;border-radius:6px;border:1px solid #e6e9ee;background-color:#ffffff;text-align:center;line-height:28px;">
                        <img alt="OWOX Data Marts" width="24" style="display:inline-block;vertical-align:middle;height:auto;" src="https://cdn.prod.website-files.com/676a9690ef4ec151a6957187/67925ebc5ee92f1146111dd8_34665.png"/>
                      </span>
                      <span style="display:inline-block;color:#0f172a;padding-left:2px;">OWOX Data Marts</span>
                    </a>
                  </td>

                  <!-- Right: optional text -->
                  <td class="stack-column stack-column-center header-right" style="vertical-align:middle;text-align:right;font-size:13px;color:#6b7280;padding-left:12px;">
                    <span style="display:inline-block;"></span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <!-- Main content container on white background -->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" class="container" style="width:600px;max-width:100%;background-color:#ffffff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,0.05);">
          
          <!-- CONTENT -->
          <tr>
            <td role="article" aria-label="Email content" style="padding:24px;">
              <div style="font-family:Arial, Helvetica, sans-serif;color:#0f172a;font-size:15px;line-height:1.5;">
                
                <h1 style="margin:0 0 12px 0;font-weight:600;font-size:20px;color:#0f172a;">
                  <%= title %>
                </h1>

                <p style="margin:12px 0 0 0;color:#374151;font-size:14px;">
                  <%= description %>
                </p>
                
                <div style="font-size:1px;line-height:1px;height:16px;">&nbsp;</div>
                
                <div style="text-align:center;margin:20px 0;">
                  <a href="<%= magicLink %>"
                    target="_blank"
                    rel="noopener noreferrer"
                    style="display:inline-block;background-color:#1E88E5;border:1px solid #1E88E5;color:#ffffff;padding:10px 20px;border-radius:6px;text-decoration:none;font-size:16px;font-weight:600;">
                    <%= buttonText %>
                  </a>
                </div>
                
                <div style="margin-top:24px;font-size:12px;color:#6b7280;line-height:1.5;">
                  <div>If the button doesn't work, copy and paste this link in your browser:</div>
                  <div style="word-break:break-all;color:#1E88E5;margin-top:4px;"><%= magicLink %></div>
                </div>
              </div>
            </td>
          </tr>

          <!-- FOOTER -->
          <tr>
            <td style="padding:12px 20px;background-color:#f9fafb;border-top:1px solid #e6e9ee;">
              <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td style="vertical-align:middle;text-align:left;font-size:13px;color:#6b7280;">
                    <span><%= footer %></span>
                  </td>
                  <td style="vertical-align:middle;text-align:right;font-size:13px;color:#6b7280;">
                    Need help?
                    <a href="https://www.owox.com/company/contact" target="_blank" rel="noopener noreferrer" style="color:#1E88E5;text-decoration:none;">Contact us</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        </table>
        <!-- End main container -->

      </td>
    </tr>
  </table>

</body>
</html>
