{% extends "/coulisses/base.html.twig" %}

{% block styles %}<style>.page-main { max-width: 40em; }</style>{% endblock %}

{% block content %}
<div class="page-main">

    <a href="/coulisses/utilisateurs" class="back-link">← Retour à la liste</a>
    <h1>Nouvel utilisateur</h1>

    {% if error %}
    <div class="alert-error">{{ error }}</div>
    {% endif %}

    <div class="card">
        <form method="POST" action="/coulisses/utilisateurs/nouveau">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

            <div class="form-row">
                <div class="form-group">
                    <label for="last_name">Nom</label>
                    <input type="text" id="last_name" name="last_name"
                           value="{{ formData.last_name ?? '' }}" required>
                </div>
                <div class="form-group">
                    <label for="first_name">Prénom</label>
                    <input type="text" id="first_name" name="first_name"
                           value="{{ formData.first_name ?? '' }}" required>
                </div>
            </div>

            <div class="form-group">
                <label for="email">Adresse e-mail</label>
                <input type="email" id="email" name="email"
                       value="{{ formData.email ?? '' }}" required>
            </div>

            <div class="form-group">
                <label for="role">Rôle</label>
                <select id="role" name="role">
                    {% for role in availableRoles %}
                    <option value="{{ role }}"
                        {{ (formData.role ?? 'operator') == role ? 'selected' }}>
                        {{ role }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <div class="checkbox-row">
                    <input type="checkbox" id="is_active" name="is_active" value="1"
                           {{ formData is not empty ? (formData.is_active is defined ? 'checked' : '') : 'checked' }}>
                    <label class="checkbox-label" for="is_active">Compte actif</label>
                </div>
            </div>

            <hr class="divider">

            <div class="form-row">
                <div class="form-group">
                    <label for="password">Mot de passe</label>
                    <input type="password" id="password" name="password"
                           autocomplete="new-password" required>
                    <p class="password-hint">8 caractères minimum.</p>
                </div>
                <div class="form-group">
                    <label for="password_confirm">Confirmer</label>
                    <input type="password" id="password_confirm" name="password_confirm"
                           autocomplete="new-password" required>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-save">Créer le compte</button>
                <a href="/coulisses/utilisateurs" class="btn-cancel">Annuler</a>
            </div>
        </form>
    </div>

</div>
{% endblock %}