{% extends "layout.twig" %}

{% block title %}Tableau de bord – Créer un utilisateur{% endblock %}

{% block content %}
<h2>Créer un utilisateur</h2>

{% include 'partials/_admin_nav.twig' %}

<div class="form-container form-container--narrow">
    <div class="form-container__panel">
        {% if error %}
        <div class="alert alert--danger">{{ error }}</div>
        {% endif %}

        <form method="post" action="/admin/users/create" class="form-container__form">
            <input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
            <input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">

            <p class="form-container__field">
                <label for="username" class="form-container__label">
                    <span>Nom d'utilisateur</span>
                    <input type="text" id="username" name="username" required minlength="3" maxlength="50" autofocus
                        class="form-container__input">
                </label>
                <small class="form-container__hint">Minimum 3 caractères</small>
            </p>

            <p class="form-container__field">
                <label for="email" class="form-container__label">
                    <span>Email</span>
                    <input type="email" id="email" name="email" required class="form-container__input">
                </label>
            </p>

            <p class="form-container__field">
                <label for="password" class="form-container__label">
                    <span>Mot de passe</span>
                    <input type="password" id="password" name="password" required minlength="8"
                        class="form-container__input">
                </label>
                <small class="form-container__hint">Minimum 8 caractères</small>
            </p>

            <p class="form-container__field">
                <label for="password_confirm" class="form-container__label">
                    <span>Confirmer le mot de passe</span>
                    <input type="password" id="password_confirm" name="password_confirm" required minlength="8"
                        class="form-container__input">
                </label>
            </p>

            <p class="form-container__field">
                <label for="role" class="form-container__label">
                    <span>Rôle</span>
                    <select id="role" name="role" class="form-container__select">
                        <option value="user">Utilisateur</option>
                        <option value="editor">Éditeur</option>
                    </select>
                </label>
            </p>

            <div class="form-container__actions">
                <div class="form-container__action">
                    <button type="submit" class="btn btn--primary btn--lg btn--full">Créer l'utilisateur</button>
                </div>
                <div class="form-container__action">
                    <a href="/admin/users" class="btn btn--secondary btn--lg btn--full">Annuler</a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}