{% extends "base.html" %}

{% block title %}Login{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <h2 class="text-center">Login</h2>
        
        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form id="loginForm" class="needs-validation" novalidate method="POST" action="/login">
            {{ form.hidden_tag() }}
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$" required>
                <div class="invalid-feedback">
                    Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
                </div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" minlength="1" maxlength="30" required>
                <div class="invalid-feedback">
                    Password must be between 1 and 30 characters long.
                </div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Login</button>
        </form>
    </div>
</div>

<script>
    // JavaScript for form validation
    document.addEventListener('DOMContentLoaded', function() {
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', function(event) {
            if (!loginForm.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            loginForm.classList.add('was-validated');
        });

        // Real-time validation for username
        const usernameInput = document.getElementById('username');
        usernameInput.addEventListener('input', function() {
            if (usernameInput.checkValidity()) {
                usernameInput.classList.remove('is-invalid');
                usernameInput.classList.add('is-valid');
            } else {
                usernameInput.classList.remove('is-valid');
                usernameInput.classList.add('is-invalid');
            }
        });

        // Real-time validation for password
        const passwordInput = document.getElementById('password');
        passwordInput.addEventListener('input', function() {
            if (passwordInput.checkValidity()) {
                passwordInput.classList.remove('is-invalid');
                passwordInput.classList.add('is-valid');
            } else {
                passwordInput.classList.remove('is-valid');
                passwordInput.classList.add('is-invalid');
            }
        });
    });
</script>
{% endblock %}