{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Michael Drinks Login</title>
     <link rel="stylesheet" href="{% static 'CSS/signup.css' %}" />
   
</head>

<body>
    <form action="" method="post">
        <h2>Login</h2>
        <hr>
        <nav>
            {% if messages %}
            <ul>
                {% for message in messages %}
                <li style="color: {% if message.tags == 'warning' %}red{% else %}green{% endif %};">
                    {{ message }}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </nav>
        {% csrf_token %}
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="Enter username">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="........">
        <div class="pwd">
            <input type="checkbox" id="chk">show password
        </div>
        <br>

        <button type="submit" id="btn">LOGIN</button>
        <p>
            If You Dont Have An Account Please <a href="{% url 'registration' %}">Register</a>
        </p>
        <p>
            <a href="{% url 'password_reset' %}">Forgot Password?</a>
        </p>
    </form>

    <div id="overlay">
        <div class="loading" id="loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script>
        const password = document.getElementById("password");
        const chk = document.getElementById("chk");

        chk.onchange = function (e) {
            password.type = chk.checked ? "text" : "password";
        };


        const btn = document.getElementById("btn");
        const overlay = document.getElementById("overlay");
        const loader = document.getElementById("loader");


        btn.addEventListener("click", (event) => {
            const username = document.getElementById("username").value.trim();
            const password = document.getElementById("password").value.trim();
            const chk = document.getElementById("chk");

            // Check if fields are empty
            if (username === "" || password === "") {
                event.preventDefault(); // stop form from submitting
                alert("Please fill in all fields.");
                return; // do not start animation
            }

            overlay.style.display = "flex";
            loader.classList.add("start");
        });
    </script>

</body>

</html>