{% extends "hbase.html" %}
{% block content %}
<div class="container my-5">
    <div class="container shadow py-3 col-sm-6 offset-sm-3">
        <h2 class="text-center">OTP যাচাই করুন</h2>
        <form method="post">
            {% csrf_token %}
            {% if messages %}
                {% for message in messages %}
                    <p {% if message.tags %} class="alert alert-{{message.tags}} mb-3" {% endif %}>{{ message }}</p>
                {% endfor %}
            {% endif %}
            
            <div class="form-group my-3">
                <input class="form-control" type="text" name="otp" placeholder="OTP লিখুন" required>
            </div>

            <button class="btn btn-sm btn-primary" type="submit">যাচাই করুন</button>

            <div class="mt-4">
                <p>OTP এর মেয়াদ শেষ হবে <span id="timer" class="fw-bold text-danger">02:00</span> এর মধ্যে।</p>
                <p id="resend-msg" class="mt-3 text-muted">
                    ২ মিনিটের মধ্যে OTP না পেলে পুনরায় চেষ্টা করুন:
                    {% if l %}
                        <a href="{% url 'login' %}" id="resend-link" class="btn btn-sm btn-secondary disabled" style="pointer-events: none;">Try Again</a>
                    {% elif r %}
                        <a href="{% url 'register' %}" id="resend-link" class="btn btn-sm btn-secondary disabled" style="pointer-events: none;">Try Again</a>
                    {% endif %}
                </p>
            </div>
        </form>
    </div>
</div>

<script>
    let timeLeft = 120; // seconds
    const timerDisplay = document.getElementById("timer");
    const resendLink = document.getElementById("resend-link");

    const countdown = setInterval(() => {
        let minutes = Math.floor(timeLeft / 60).toString().padStart(2, '0');
        let seconds = (timeLeft % 60).toString().padStart(2, '0');
        timerDisplay.textContent = `${minutes}:${seconds}`;
        timeLeft--;

        if (timeLeft < 0) {
            clearInterval(countdown);
            timerDisplay.textContent = "০:০০";
            resendLink.classList.remove("disabled");
            resendLink.style.pointerEvents = "auto";
        }
    }, 1000);
</script>
{% endblock content %}