<!--
  templateType: page
  isAvailableForNewContent: false
  label: Email Verification
  screenshotPath: ../../images/template-previews/membership-verification.png
-->
{% extends "../layouts/base-system.html" %}

{% block title %}Verify Your Email{% endblock %}
{% block description %}Please verify your email address to continue.{% endblock %}

{% block page_class %}page-auth{% endblock %}

{% block icon %}
  {% if request.query_dict.verified == "true" %}
    <div class="system-icon icon-success">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 6L9 17l-5-5"/>
      </svg>
    </div>
  {% elif request.query_dict.expired == "true" %}
    <div class="system-icon icon-error">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <path d="M12 8v8"/>
        <path d="M8 12l8 0"/>
      </svg>
    </div>
  {% elif request.query_dict.resent == "true" %}
    <div class="system-icon icon-success">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
      </svg>
    </div>
  {% else %}
    <div class="system-icon icon-info">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
      </svg>
    </div>
  {% endif %}
{% endblock %}

{% block page_title %}
  {% if request.query_dict.verified == "true" %}
    Email Verified!
  {% elif request.query_dict.expired == "true" %}
    Verification Link Expired
  {% elif request.query_dict.resent == "true" %}
    Verification Email Sent
  {% else %}
    Verify Your Email
  {% endif %}
{% endblock %}

{% block status_message %}
  {% if request.query_dict.verified == "true" %}
    <div class="system-status success">
      ✓ Your email has been successfully verified
    </div>
  {% elif request.query_dict.expired == "true" %}
    <div class="system-status error">
      × This verification link has expired
    </div>
  {% elif request.query_dict.resent == "true" %}
    <div class="system-status success">
      ✓ A new verification email has been sent
    </div>
  {% else %}
    <div class="system-status warning">
      ⏳ Verification pending
    </div>
  {% endif %}
{% endblock %}

{% block page_message %}
  {% if request.query_dict.verified == "true" %}
    Thank you for verifying your email address. You can now access all features of your account.
  {% elif request.query_dict.expired == "true" %}
    Verification links are only valid for 24 hours. Please request a new verification email.
  {% elif request.query_dict.resent == "true" %}
    Please check your inbox and click the verification link. 
    If you don't see it, check your spam folder.
  {% else %}
    We've sent a verification email to your registered email address. 
    Please click the link in the email to verify your account.
  {% endif %}
{% endblock %}

{% block main_content %}
  {% if request.query_dict.expired == "true" %}
    <div class="system-form">
      <form method="post" action="{{ request.path }}">
        <input type="hidden" name="action" value="resend">
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" 
                 id="email"
                 name="email" 
                 placeholder="Enter your email address" 
                 required>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">
          Resend Verification Email
        </button>
      </form>
    </div>
  {% elif request.query_dict.verified != "true" and request.query_dict.resent != "true" %}
    <div class="system-section">
      <p style="margin-bottom: 1rem; color: var(--color-text-secondary, #718096);">
        Didn't receive the email?
      </p>
      <form method="post" action="{{ request.path }}">
        <input type="hidden" name="action" value="resend">
        <button type="submit" class="btn btn-secondary">
          Resend Verification Email
        </button>
      </form>
    </div>
  {% endif %}
{% endblock %}

{% block action_buttons %}
  {% if request.query_dict.verified == "true" %}
    <a href="{{ request.login_url }}" class="btn btn-primary">Sign In to Continue</a>
  {% endif %}
{% endblock %}

{% block additional_content %}
  {% if request.query_dict.resent == "true" %}
    <div class="system-countdown">
      You can request a new email in <span id="countdown">60</span> seconds
    </div>
  {% endif %}
{% endblock %}

{% block scripts %}
  {% if request.query_dict.resent == "true" %}
    <script>
      const countdownEl = document.getElementById('countdown');
      if (countdownEl) {
        let seconds = 60;
        const timer = setInterval(() => {
          seconds--;
          countdownEl.textContent = seconds;
          if (seconds <= 0) {
            clearInterval(timer);
            location.reload();
          }
        }, 1000);
      }
    </script>
  {% endif %}
{% endblock %}