{% extends 'layout.html' %}

{% block title %}Ajouter un Utilisateur{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Ajouter un Utilisateur</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">Tableau de bord</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('liste_utilisateurs') }}">Utilisateurs</a></li>
        <li class="breadcrumb-item active">Ajouter</li>
    </ol>
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-user-plus me-1"></i>
            Formulaire d'ajout
        </div>
        <div class="card-body">
            <form method="post" action="{{ url_for('ajouter_utilisateur') }}">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <input class="form-control" id="username" name="username" type="text" placeholder="Nom d'utilisateur" required />
                            <label for="username">Nom d'utilisateur</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <input class="form-control" id="password" name="password" type="password" placeholder="Mot de passe" required />
                            <label for="password">Mot de passe</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-floating mb-3">
                    <select class="form-select" id="type" name="type" required>
                        <option value="">Sélectionnez un type</option>
                        {% for r in roles %}
                        <option value="{{ r.name }}">{{ r.name }}{% if r.is_builtin %} (Intégré){% endif %}</option>
                        {% endfor %}
                    </select>
                    <label for="type">Type d'utilisateur</label>
                </div>
                
                <div class="form-check mb-3">
                    <input class="form-check-input" id="connect" name="connect" type="checkbox" value="oui" checked />
                    <label class="form-check-label" for="connect">Compte actif</label>
                </div>
                
                <div class="mt-4 mb-0">
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-block">Enregistrer</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}