{% extends "base.html" %}

{% block content %}
<div class="form-container">
    <div class="login-container">
        <h1 class="title">Login</h1>
        <form id="loginForm" method="post" action="{{ url_for('login') }}">
            <div class="form-group">
                <label for="username">Email</label>
                <input type="text" class="form-control" id="username" name="username" required>
                <div class="invalid-feedback" id="username-feedback">Username or Email cannot be empty.</div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" required>
                <div class="invalid-feedback" id="password-feedback">Password cannot be empty.</div>
            </div>
            <button type="submit" class="btn btn-primary btn-block" id="loginButton">Login</button>
            <div id="loader" style="display: none;">Loading...</div>
            <p class="text-center"><a href="{{ url_for('reset_password') }}">Forgot Password?</a></p>
            <p class="text-center"><a href="{{ url_for('signup') }}">New User? Signup</a></p>
        </form>
    </div>
    <div class="placeholder-banner"></div>
    <!-- <img src="{{ url_for('static', filename='login_banner.jpg') }}" class="banner"> -->
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        // Show loader
        document.getElementById('loader').style.display = 'block';

        var isValid = true;
        var usernameInput = document.getElementById('username');
        var usernameFeedback = document.getElementById('username-feedback');
        var passwordInput = document.getElementById('password');
        var passwordFeedback = document.getElementById('password-feedback');

        // Check if username or email is empty
        if (!usernameInput.value.trim()) {
            usernameInput.classList.add('is-invalid');
            usernameFeedback.innerText = 'Username or Email cannot be empty.';
            isValid = false;
        } else {
            usernameInput.classList.remove('is-invalid');
            usernameFeedback.innerText = '';
        }

        // Check if password is empty
        if (!passwordInput.value.trim()) {
            passwordInput.classList.add('is-invalid');
            passwordFeedback.innerText = 'Password cannot be empty.';
            isValid = false;
        } else {
            passwordInput.classList.remove('is-invalid');
            passwordFeedback.innerText = '';
        }

        // Validate email format
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (usernameInput.value.trim() && !emailRegex.test(usernameInput.value.trim())) {
            usernameInput.classList.add('is-invalid');
            usernameFeedback.innerText = 'Invalid email format.';
            isValid = false;
        }

        if (!isValid) {
            // Hide loader if form validation fails
            document.getElementById('loader').style.display = 'none';
            event.preventDefault();
        }
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            var flashMessages = document.querySelectorAll('.flash-message');
            flashMessages.forEach(function(message) {
                message.style.display = 'none';
            });
        }, 3000); 
    });
</script>

{% endblock %}