{# templates/entreprise/gestion_utilisateurs/edit.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Modifier Collaborateur | {{ user.nomComplet }}{% endblock %}

{% block body %}

<div class="container-fluid py-4 px-md-4">

    {# --- EN-TÊTE HARMONISÉ --- #}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h3 class="page-header page-header-top mb-1">Modifier le collaborateur</h3>
            <p class="text-muted small mb-0 d-none d-md-block">Mise à jour des accès et informations de <strong>{{ user.nomComplet }}</strong>.</p>
        </div>
        
        <div>
            <a href="{{ path('app_entreprise_user_index') }}" class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Retour à la liste
            </a>
        </div>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row g-4">
        {# --- ZONE FORMULAIRE --- #}
        <div class="col-12 col-lg-8">
            <div class="card card-form shadow-sm mb-4">
                <div class="card-body p-4">
                    {{ include('entreprise/gestion_utilisateurs/_form.html.twig', {
                        'button_label': 'Enregistrer les modifications',
                        'button_class': 'btn btn-primary px-5 shadow-sm fw-bold',
                        'form': form,
                        'user': user,
                    }) }}
                </div>
            </div>

            {# --- ZONE DE DANGER (Harmonisée) --- #}
            {% if user.id != app.user.id %}
                <div class="card border-0 shadow-sm mt-5 overflow-hidden">
                    <div class="card-header bg-soft-danger py-3">
                        <h6 class="card-title mb-0 text-danger fw-bold">
                            <i class="fas fa-exclamation-triangle me-2"></i>Zone de danger
                        </h6>
                    </div>
                    <div class="card-body d-flex justify-content-between align-items-center bg-white p-4">
                        <div>
                            <h6 class="mb-1 fw-bold">Supprimer ce collaborateur</h6>
                            <p class="small text-muted mb-0">Cette action est irréversible. L'utilisateur perdra immédiatement ses accès.</p>
                        </div>
                        {{ include('entreprise/gestion_utilisateurs/_delete_form.html.twig') }}
                    </div>
                </div>
            {% endif %}
        </div>

        {# --- ZONE D'INFORMATION (SIDEBAR) --- #}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm bg-white" style="border-radius: 10px;">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark mb-3">
                        <i class="fas fa-user-edit me-2 text-primary"></i> Profil Utilisateur
                    </h6>
                    
                    <div class="text-center mb-4">
                        <div class="avatar-placeholder mx-auto mb-2" style="width: 60px; height: 60px; font-size: 1.5rem;">
                            {{ user.nom|slice(0,1)|upper }}{{ user.prenom|slice(0,1)|upper }}
                        </div>
                        <span class="badge bg-light text-dark border fw-normal">ID #{{ user.id }}</span>
                    </div>

                    <p class="small text-muted mb-3">
                        En modifiant le <strong>Rôle</strong>, vous changez instantanément les permissions de l'utilisateur sur votre tableau de bord.
                    </p>
                    
                    <hr class="my-3 opacity-10">
                    
                    <div class="p-3 rounded border border-light bg-light">
                        <small class="text-muted d-block mb-1">Dernière mise à jour :</small>
                        <small class="text-dark fw-bold">
                            <i class="far fa-calendar-check me-1"></i> 
                            {{ user.createdAt ? user.createdAt|date('d/m/Y') : 'N/A' }}
                        </small>
                    </div>

                    {% if user.id == app.user.id %}
                        <div class="mt-4 p-3 bg-soft-info rounded border border-info-subtle">
                            <small class="text-info">
                                <i class="fas fa-info-circle me-1"></i>
                                Vous modifiez votre propre profil. Attention à ne pas vous retirer vos droits d'administration.
                            </small>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}