{% extends "layout.twig" %}

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

{% block content %}
<div class="auth-container" style="max-width: 400px; margin: 2rem auto;">
    <h2>S'enregistrer</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="/register">
        {# 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 minlength="3" maxlength="50"
                    style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
            </label>
            <small>Minimum 3 caractères</small>
        </p>

        <p>
            <label for="email">Email<br>
                <input type="email" id="email" name="email" required
                    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 minlength="8"
                    style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
            </label>
            <small>Minimum 8 caractères</small>
        </p>

        <p>
            <label for="password_confirm">Confirmer le mot de passe<br>
                <input type="password" id="password_confirm" name="password_confirm" required minlength="8"
                    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;">
                S'enregistrer
            </button>
        </p>
    </form>

    <p style="text-align: center; margin-top: 1.5rem;">
        Vous avez déjà un compte ? <a href="/login">Se connecter</a>
    </p>
</div>
{% endblock %}