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

<!-- Hidden preheader -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
  Use this code to verify your account — expires in {{EXPIRY_MINUTES}} minutes.
</div>
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
</div>

<!-- Outer Wrapper -->
<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 10px;">

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

      <!-- Main Container -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width:600px;margin:0 auto;background:#ffffff;">

        <!-- Header -->
        <tr>
          <td style="padding:25px;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td>
                  <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; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!-- Body -->
        <tr>
          <td style="padding:25px;">

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

              <tr>
                <td style="font-size:20px;color:#000;padding-bottom:12px;">
                  Hello
                </td>
              </tr>

              <tr>
                <td style="font-size:14px;color:#000;line-height:1.6;padding-bottom:24px;">
                  Thank you for choosing EazeeSign! Your new plan is active, and you're all set to start managing your documents digitally.
                </td>
              </tr>

              <!-- Purple Box -->
              <tr>
                <td style="background:#6500ff;color:#ffffff;padding:25px;">

                  <!-- Title inside purple -->
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td style="font-size:16px;color:#ffffff;height:50px;">
                        Here are your account and subscription details:
                      </td>
                    </tr>
                  </table>

                  <!-- White-bordered details table -->
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate;margin-top:10px;">

                    <tr>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">Plan Name:</td>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">{{plan}}</td>
                    </tr>

             
                    <tr>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">User ID:</td>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">{{customer_email}}</td>
                    </tr>

                    <tr>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">Temporary Password:</td>
                      <td style="padding:10px;border:1px solid #ffffff;color:#ffffff;font-size:14px;">{{password}}</td>
                    </tr>

                  </table>
                  <!-- Title inside purple -->
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td style="font-size:16px;color:#ffffff;height:20px;">
                        
                      </td>
                    </tr>
                  </table>
                  <!-- Button -->
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:25px;">
                    <tr>
                      <td width="50%" align="center" height="50" valign="middle" style="background:#ffffff;">
                        <a href="{{login_url}}"
                           style="display:block;padding:14px 40px;text-decoration:none;font-size:16px;font-weight:600;color:#000000;">
                          <span style="display:block;">Go to Your Dashboard</span>
                        </a>
                      </td>
                      <td width="50%"></td>
                    </tr>
                  </table>

                </td>
              </tr>

              <tr><td style="height:20px;"></td></tr>

              <tr>
                <td style="font-size:20px;color:#000;">What's next?</td>
              </tr>

              <tr><td style="height:12px;"></td></tr>

              <tr>
                <td style="font-size:14px;color:#000;">Once you log in, you can immediately:</td>
              </tr>

              <tr><td style="height:12px;"></td></tr>

              <tr>
                <td style="font-size:14px;color:#000;">1. Upload your first document to be signed.</td>
              </tr>
              <tr>
                <td style="font-size:14px;color:#000;">2. Create and save your personal e-signature.</td>
              </tr>
              <tr>
                <td style="font-size:14px;color:#000;">3. Invite others to sign documents securely.</td>
              </tr>

              <tr><td style="height:16px;"></td></tr>

              <tr>
                <td style="font-size:14px;color:#000;">
                  Need help? <a href="#" style="color:#2563eb;text-decoration:none;">Help Center</a> is available 24/7.
                </td>
              </tr>

              <tr><td style="height:16px;"></td></tr>

              <tr>
                <td style="font-size:14px;color:#000;">Happy signing!</td>
              </tr>

              <tr>
                <td style="font-size:14px;color:#000;">The EazeeSign Team</td>
              </tr>

            </table>

          </td>
        </tr>

        <!-- Footer -->
        <tr>
          <td align="center" style="background:#f8fafc;padding:20px;border-top:1px solid #e5e7eb;color:#6b7280;font-size:13px;line-height:1.6;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="center">Copyright © EazeeSign 2025 All rights reserved.</td>
              </tr>
            </table>
          </td>
        </tr>

      </table>

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

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

{% endblock %}