{% extends "base.html" %}

{% block title %}{{ 'Nouvel utilisateur' if not user else "Modifier l'utilisateur" }} — GMAO{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h3">
                <i class="fas fa-user-edit me-2"></i>
                {{ 'Nouvel utilisateur' if not user else 'Modifier l\'utilisateur' }}
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <form method="POST">
                        {{ csrf_token() }}
                        
                        <div class="mb-3">
                            <label for="username" class="form-label">Nom d'utilisateur *</label>
                            <input type="text" class="form-control" id="username" name="username" 
                                   value="{{ user.username if user else '' }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                   value="{{ user.email if user else '' }}">
                        </div>
                        
                        <div class="mb-3">
                            <label for="full_name" class="form-label">Nom complet</label>
                            <input type="text" class="form-control" id="full_name" name="full_name"
                                   value="{{ user.full_name if user else '' }}">
                        </div>
                        
                        <div class="mb-3">
                            <label for="role" class="form-label">Rôle *</label>
                            <select class="form-select" id="role" name="role" required>
                                <option value="user" {{ 'selected' if user and user.role == 'user' else '' }}>Utilisateur</option>
                                <option value="tech" {{ 'selected' if user and user.role == 'tech' else '' }}>Technicien</option>
                                <option value="admin" {{ 'selected' if user and user.role == 'admin' else '' }}>Administrateur</option>
                            </select>
                        </div>
                        
                        {% if not user %}
                        <div class="mb-3">
                            <label for="password" class="form-label">Mot de passe *</label>
                            <input type="password" class="form-control" id="password" name="password" required minlength="12">
                        </div>
                        
                        <div class="mb-3">
                            <label for="password_confirm" class="form-label">Confirmer le mot de passe *</label>
                            <input type="password" class="form-control" id="password_confirm" name="password_confirm" required minlength="12">
                        </div>
                        {% else %}
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="change_password" name="change_password">
                                <label class="form-check-label" for="change_password">
                                    Changer le mot de passe
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3 d-none" id="password_fields">
                            <label for="new_password" class="form-label">Nouveau mot de passe</label>
                            <input type="password" class="form-control" id="new_password" name="new_password" minlength="12">
                        </div>
                        {% endif %}
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                       {{ 'checked' if not user or user.is_active else '' }}>
                                <label class="form-check-label" for="is_active">
                                    Compte actif
                                </label>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('admin.users') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Retour
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% if user %}
<script>
document.getElementById('change_password').addEventListener('change', function() {
    document.getElementById('password_fields').classList.toggle('d-none', !this.checked);
});
</script>
{% endif %}
{% endblock %}