{% extends 'manager/manager_base.html.twig' %}

{% block title %}Détails de la Catégorie : {{ formulaire_cat.titre }}{% endblock %}

{% block content %}
    {# Import de Font Awesome pour les icônes #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2g2nFqG+0N+jQG/jKxLp/0t0b8T6G9t2/k9Tq+9D6xI2+0A" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* Style des volets d'information, inspiré de l'exemple */
        .vollet {
            border: 1px solid #ddd;
            background-color: #fff;
            padding: 5px;
            border-radius: 6px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .vollet-header {
            font-weight: bold;
            background-color: #4e8bb1; /* Bleu harmonisé */
            color: #fff;
            padding: 8px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 4px 4px 0 0;
            margin: -5px -5px 5px -5px; /* Déborde légèrement sur le padding du vollet */
        }
        .vlegende {
            font-weight: bold;
            color: #333;
            display: inline-block;
            width: 40%; /* Assure l'alignement des légendes */
        }
        .vdata {
            font-style: italic;
            color: #555;
            display: inline-block;
            width: 55%;
        }
        .velement {
            border-top: 1px dotted #eee;
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
        }
        .velement:first-child {
            border-top: none;
        }
        .main-title-zone {
            background-color: #f7f9fc;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-bottom: 20px;
            text-align: center;
        }
        .main-title-zone h1 {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 5px;
        }
        .badge-status {
             padding: 0.4em 0.8em;
             border-radius: 0.5rem;
             font-size: 0.9em;
        }
    </style>

    {# Affichage des messages flash #}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="container-fluid">
        <h3 class="mb-4 text-body-emphasis"><i class="fas fa-sitemap me-2 text-primary"></i> {{ block('title') }}</h3>

        <div class="row">
            
            <!-- Volet gauche : Informations de base de la catégorie -->
            <div class="col-md-4 mb-4">
                <div class="vollet">
                    <div class="vollet-header">
                        <span><i class="fas fa-info-circle me-1"></i> Informations de la Catégorie</span>
                        <a href="{{ path('manager_formulaire_cat_edit', {'id': formulaire_cat.id}) }}" class="btn btn-sm btn-light btn-sm shadow-sm">
                             <i class="fas fa-edit me-1"></i> Modifier
                        </a>
                    </div>
                    
                    <div class="p-3">
                        
                        <div class="velement">
                            <span class="vlegende">ID :</span>
                            <span class="vdata">{{ formulaire_cat.id }}</span>
                        </div>

                        <div class="velement">
                            <span class="vlegende">Titre :</span>
                            <span class="vdata">{{ formulaire_cat.titre|default('Non défini') }}</span>
                        </div>
                        
                        <div class="velement">
                            <span class="vlegende">Catégorie Parente (ID) :</span>
                            <span class="vdata">
                                {% if formulaire_cat.parentId is not null and formulaire_cat.parentId is not same as(0) %}
                                    <span class="badge bg-secondary">ID: {{ formulaire_cat.parentId }}</span>
                                {% else %}
                                    <span class="text-muted">Racine</span>
                                {% endif %}
                            </span>
                        </div>
                        
                        <div class="velement">
                            <span class="vlegende">Ordre d'affichage :</span>
                            <span class="vdata">
                                <span class="badge bg-info text-dark">{{ formulaire_cat.ordre|default('N/A') }}</span>
                            </span>
                        </div>

                        <div class="velement">
                            <span class="vlegende">Date de création :</span>
                            <span class="vdata">{{ formulaire_cat.dates ? formulaire_cat.dates|date('d/m/Y H:i') : 'Non définie' }}</span>
                        </div>

                        <div class="velement">
                            <span class="vlegende">Statut : </span>
                            <span class="vdata">
                                {% if formulaire_cat.active %}
                                    <span class="badge-status bg-success text-white">
                                        <i class="fa-solid fa-circle-check me-1"></i> Actif
                                    </span>
                                {% else %}
                                    <span class="badge-status bg-secondary text-white">
                                        <i class="fa-solid fa-circle-xmark me-1"></i> Inactif
                                    </span>
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between mt-3">
                    <a href="{{ path('manager_formulaire_cat_index') }}" class="btn btn-secondary shadow-sm">
                        <i class="fas fa-arrow-left me-1"></i> Retour à la liste
                    </a>
                    {# Inclusion du formulaire de suppression #}
                    {{ include('manager/formulaire_cat/_delete_form.html.twig') }}
                </div>
            </div>
            
            <!-- Colonne droite : Espace pour les formulaires liés ou contenu spécifique -->
            <div class="col-md-8 mb-4">
                <div class="main-title-zone">
                    <h1>CATÉGORIE : {{ formulaire_cat.titre|upper|default('TITRE INDÉFINI') }}</h1>
                    <p class="text-muted mb-0">Cet espace pourrait être utilisé pour afficher les formulaires liés à cette catégorie ou d'autres informations connexes.</p>
                </div>
                
                <div class="card shadow">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-list-alt me-1"></i> Contenu des Formulaires Associés</h5>
                    </div>
                    <div class="card-body">
                         <div class="alert alert-warning mb-0" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i> 
                            Note : Le contenu dynamique lié à cette catégorie (par exemple, la liste des formulaires enfants) serait affiché ici.
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}