{% extends 'base_auth.html' %}

{% block title %}Verify OTP{% endblock %}

{% block content %}
<section class="surface-card p-4 p-lg-5 skeleton-on-load">
  <div class="mb-4 text-center">
    <h1 class="h4 fw-bold mb-1">Verify OTP</h1>
    <p class="text-muted mb-0">Enter the code sent to <strong>{{ masked_email }}</strong>.</p>
  </div>

  <div class="otp-trust mb-3">
    <div class="otp-trust__item">
      <i class="bi bi-shield-check" aria-hidden="true"></i>
      Session is protected and rate-limited.
    </div>
    <div class="otp-trust__item">
      <i class="bi bi-envelope-lock" aria-hidden="true"></i>
      OTP is sent only to your registered email.
    </div>
  </div>

  <form method="post" novalidate>
    {% csrf_token %}

    {% if form.non_field_errors %}
      <div class="alert alert-danger" role="alert">{{ form.non_field_errors }}</div>
    {% endif %}

    <div class="mb-3">
      <label class="form-label" for="id_otp_code">One-time passcode</label>
      {{ form.otp_code }}
      {% if form.otp_code.errors %}<div class="invalid-feedback d-block">{{ form.otp_code.errors|join:', ' }}</div>{% endif %}
    </div>

    <div class="otp-timer-grid mb-3">
      <div class="otp-timer-card">
        <p class="otp-timer-card__label">Code Expires In</p>
        <p class="otp-timer-card__value" data-otp-expiry-seconds="{{ otp_seconds_remaining }}">{{ otp_seconds_remaining }}s</p>
      </div>
      <div class="otp-timer-card">
        <p class="otp-timer-card__label">Resend Available In</p>
        <p class="otp-timer-card__value" data-resend-seconds="{{ resend_seconds_remaining }}">{{ resend_seconds_remaining }}s</p>
      </div>
    </div>

    <button type="submit" class="btn btn-brand w-100">Verify &amp; Sign In</button>
  </form>

  <form method="post" action="{% url 'accounts:resend_otp' %}" class="mt-3" data-resend-form>
    {% csrf_token %}
    <button type="submit" class="btn btn-outline-secondary w-100" data-resend-button {% if resend_seconds_remaining > 0 %}disabled{% endif %}>
      <span data-resend-label>
        {% if resend_seconds_remaining > 0 %}
          Resend OTP in {{ resend_seconds_remaining }}s
        {% else %}
          Resend OTP
        {% endif %}
      </span>
    </button>
  </form>

  <p class="small text-center mt-3 mb-0"><a href="{% url 'accounts:signin' %}">Back to sign in</a></p>
</section>
{% endblock %}