{% extends "authease/base.html" %}

{% block title %}Verify Email{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <h2 class="mb-3">Verify Your Email</h2>
        <p class="text-muted">A verification code was sent to <strong>{{ email }}</strong>.</p>
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="otp" class="form-label">Verification code</label>
                <input type="text" class="form-control" id="otp" name="otp"
                       maxlength="10" autocomplete="one-time-code" inputmode="numeric"
                       required autofocus>
            </div>
            <button type="submit" class="btn btn-primary w-100">Verify</button>
        </form>
        <div class="mt-3 text-center">
            <a href="{% url 'authease-resend-otp' %}" class="btn btn-link" id="resend-btn" disabled>
                Resend code (<span id="countdown">{{ cooldown }}</span>s)
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    var btn = document.getElementById('resend-btn');
    var span = document.getElementById('countdown');
    var remaining = {{ cooldown }};

    function tick() {
        remaining--;
        if (remaining <= 0) {
            btn.removeAttribute('disabled');
            btn.textContent = 'Resend code';
        } else {
            span.textContent = remaining;
            setTimeout(tick, 1000);
        }
    }

    if (remaining > 0) {
        setTimeout(tick, 1000);
    } else {
        btn.removeAttribute('disabled');
        btn.textContent = 'Resend code';
    }
})();
</script>
{% endblock %}