{% extends "base.html" %}
{% block content %}
{% load static %}
<div class="container2">
    <h2>Email Verification Required</h2>
    <p>Please check your email for an activation link. If you did not receive it, you can request a new one below.</p>
    
    <form id="resend-form" method="POST" action="{% url 'resend_verification' %}">
        {% csrf_token %}
        <button id="resend-button" class="btn btn-primary" type="submit">
            Resend Verification Email <span id="countdown"></span>
        </button>
    </form>

    <p id="cooldown-message" style="color: red; display: none;">Please wait before requesting a new verification email.</p>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let resendButton = document.getElementById("resend-button");
        let countdownElement = document.getElementById("countdown");
        let cooldownMessage = document.getElementById("cooldown-message");
        let cooldownDuration = 60000; // 60 秒
        let cooldownEnd = localStorage.getItem("resendCooldown");

        function updateCountdown() {
            let now = Date.now();
            let timeLeft = cooldownEnd - now;

            if (timeLeft > 0) {
                let secondsLeft = Math.ceil(timeLeft / 1000);
                countdownElement.innerText = secondsLeft;
                setTimeout(updateCountdown, 1000);
            } else {
                resendButton.disabled = false;
                resendButton.innerText = "Resend Verification Email";
                cooldownMessage.style.display = "none";
                localStorage.removeItem("resendCooldown");
            }
        }

        // 如果沒有 cooldownEnd，設置初始冷卻時間
        if (!cooldownEnd) {
            let newCooldownEnd = Date.now() + cooldownDuration;
            localStorage.setItem("resendCooldown", newCooldownEnd);
            cooldownEnd = newCooldownEnd;
        }

        resendButton.disabled = true;
        cooldownMessage.style.display = "block";
        updateCountdown();
    });
</script>
<style>
    .container {
        margin-top: 210px; /* 與 Header 保持間距 */
        align-items: center;
        text-align: center;
        width: 100%;
        padding: 20px;
    }
</style>
{% endblock %}