{% 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">Username</label>
                <input type="text" class="form-control" id="username" name="username" required>
                <div class="invalid-feedback">Username 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">Password cannot be empty.</div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Login</button>
            <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) {
        var isValid = true;
        var inputs = this.querySelectorAll('input[required]');
        inputs.forEach(function(input) {
            if (!input.value.trim()) {
                input.classList.add('is-invalid');
                isValid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });
        if (!isValid) {
            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 %}
