{% extends "esign/base_email.html" %}
{% load static %}
{% block content %}

<!-- Hidden preheader (Outlook safe) -->
<div style="display:none; font-size:1px; color:#ffffff; line-height:1px; max-height:0; max-width:0; opacity:0; overflow:hidden; mso-hide:all;">
  Use this code to verify your account — expires in {{EXPIRY_MINUTES}} minutes.
</div>

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"
       style="margin:0; padding:0; background-color:#f3f4f6; font-family:Arial, Helvetica, sans-serif;">
  <tr>
    <td align="center" style="padding:24px 12px;">

      <!--[if mso]>
      <table width="600" cellpadding="0" cellspacing="0" border="0">
      <tr><td>
      <![endif]-->

      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"
             style="max-width:600px; background-color:#ffffff; border-collapse:separate;">

        <!-- LOGO HEADER -->
        <tr>
          <td style="background-color:#ffffff; padding:25px 25px;">
            <img src="https://app.eazeesign.com/static/assets/images/eazee-sign-logo-final-small.png"
                 width="187" height="40" alt="EazeeSign Logo" border="0"
                 style="display:block; width:187px; height:40px; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
          </td>
        </tr>

        <!-- BODY (Purple Area) -->
        <tr>
          <td style="padding:25px; background-color:#6500ff;">

            <table width="100%" cellpadding="0" cellspacing="0" border="0">

              <!-- Title -->
              <tr>
                <td style="font-size:26px; font-weight:400; color:#ffffff; line-height:1.3;">
                  You're almost in!
                </td>
              </tr>

              <tr><td style="line-height:12px; font-size:12px;">&nbsp;</td></tr>

              <!-- Description -->
              <tr>
                <td style="font-size:14px; color:#ffffff; line-height:1.6;">
                  We're excited to have you join EazeeSign. To get started, confirm you're you by using the verification code below.
                </td>
              </tr>

              <tr><td style="line-height:18px; font-size:18px;">&nbsp;</td></tr>

              <!-- Label -->
              <tr>
                <td style="font-size:14px; color:#ffffff; line-height:1.6;">
                  Your verification code is:
                </td>
              </tr>

              <tr><td style="line-height:12px; font-size:12px;">&nbsp;</td></tr>

              <!-- OTP BOX -->
              <tr>
                <td align="left">

                  <!--[if mso]>
                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td align="center" style="background-color:#4b00cc; padding:22px 30px; border:2px solid #ffffff;">
                      <span style="font-family:Courier, monospace; font-size:32px; font-weight:700; color:#ffffff; letter-spacing:6px;">
                        {{OTP}}
                      </span>
                    </td>
                  </tr>
                  </table>
                  <![endif]-->

                  <!--[if !mso]><!-->
                  <div>
                    <span style="font-family:Courier, monospace; font-size:40px; font-weight:700; color:#ffffff; letter-spacing:6px;">
                      {{otp}}
                    </span>
                  </div>
                  <!--<![endif]-->
                </td>
              </tr>

              <tr><td style="line-height:22px; font-size:22px;">&nbsp;</td></tr>

              <!-- Additional text -->
              <tr>
                <td style="font-size:14px; color:#ffffff; line-height:1.6;">
                  This code is valid for the next <b>{{EXPIRY_MINUTES}} minutes</b>.  
                  Once verified, you'll be ready to send and sign documents securely and easily.
                </td>
              </tr>

              <tr><td style="line-height:16px; font-size:16px;">&nbsp;</td></tr>

            </table>

          </td>
        </tr>

        <!-- AFTER PURPLE BLOCK CONTENT -->
        <tr>
          <td style="padding:25px; font-size:14px; color:#000000; line-height:1.6;">
            This email was sent because you initiated a sign-up on EazeeSign.  
            If this wasn't you, please ignore this message.
          </td>
        </tr>

        <tr>
          <td style="padding:0 25px 25px 25px; font-size:14px; color:#000000; line-height:1.6;">
            Questions? We're here to help —  
            <a href="mailto:support@eazeesign.com" style="color:#000; text-decoration:underline;">support@eazeesign.com</a>
          </td>
        </tr>

        <!-- FOOTER -->
        <tr>
          <td align="center" style="background-color:#f8fafc; padding:20px 28px; border-top:1px solid #e5e7eb; font-size:13px; color:#6b7280; line-height:1.6;">
            Copyright © EazeeSign 2025  
            <br>
            All rights reserved.
          </td>
        </tr>

      </table>

      <!--[if mso]>
      </td></tr></table>
      <![endif]-->

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

{% endblock %}