{% extends "layout.twig" %}

{% block title %}Connexion – Mon Blog{% endblock %}

{% block content %}
<div class="auth-container" style="max-width: 400px; margin: 2rem auto;">
    <h2>Connexion</h2>

    {% if error %}
    <div class="alert alert-danger"
        style="padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 1rem; color: #721c24;">
        {{ error }}
    </div>
    {% endif %}

    <form method="post" action="/login">
        {# Tokens CSRF #}
        <input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
        <input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">

        <p>
            <label for="username">Nom d'utilisateur<br>
                <input type="text" id="username" name="username" required autofocus
                    style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
            </label>
        </p>

        <p>
            <label for="password">Mot de passe<br>
                <input type="password" id="password" name="password" required
                    style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
            </label>
        </p>

        <p>
            <button type="submit" class="btn btn-primary"
                style="padding: 0.75rem 1.5rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Se connecter
            </button>
        </p>
    </form>

    <p style="text-align: center; margin-top: 1.5rem;">
        Pas encore de compte ? <a href="/register">S'enregistrer</a>
    </p>
</div>
{% endblock %}