{% extends 'base.html.twig' %}

{% block title %}{{ parcours.nom }}{% endblock %}


{% block additional_footer_scripts %}
    <script type="module" src="{{ asset('js/accordion-handler.js') }}"></script>
{% endblock %}

{% block body %}
    <div class="main-container">
    
    {# Fil d'Ariane #}
    <div class="breadcrumb-container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ path('app_admin_parcours_index') }}"><i class="fas fa-home"></i> Parcours</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ parcours.nom }}</li>
            </ol>
        </nav>
    </div>
    
    {# En-tête de page avec actions #}
    <div class="page-header">
        <h1 class="h3">Détail du parcours</h1>
        <div class="page-actions">
            <a href="{{ path('app_admin_parcours_index') }}" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Retour à la liste des parcours">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
            <a href="{{ path('app_admin_fiche_outil_index') }}" class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Voir toutes les fiches outil">
                <i class="fas fa-list"></i> Fiches outil
            </a>
        </div>
    </div>
    <div class="parcours-hero mb-4">
        <!-- En-tête avec titre et statut -->
        <div class="parcours-hero-header">
            <div class="container-fluid p-0">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <h2 class="parcours-title">{{ parcours.nom }}</h2>
                    
                    <div class="parcours-controls">
                        <div class="d-flex align-items-center">
                            <form id="toggle-form" method="post" action="{{ path('app_admin_parcours_toggle', {id: parcours.id}) }}" class="me-2">
                                <input type="hidden" name="_token" value="{{ csrf_token('toggle' ~ parcours.id) }}">
                                <button class="btn {{ parcours.isOnline ? 'btn-outline-secondary' : 'btn-outline-success' }} status-toggle action-btn" type="submit" id="toggle-button">
                                    <i class="fa fa-toggle-{{ parcours.isOnline ? 'on' : 'off' }}"></i>
                                    {{ parcours.isOnline ? 'Désactiver' : 'Activer' }}
                                </button>
                            </form>
                            <form id="duplicate-form" method="post" action="{{ path('app_admin_parcours_duplicate', {id: parcours.id}) }}" class="me-2">
                                <input type="hidden" name="_token" value="{{ csrf_token('duplicate' ~ parcours.id) }}">
                                <button type="submit" class="btn btn-outline-primary">
                                    <i class="fas fa-copy me-1"></i> Dupliquer
                                </button>
                            </form>
                            <div class="status-indicator ms-2">
                                <span id="status-badge" class="status-pill {{ parcours.isOnline ? 'status-online' : 'status-offline' }}">
                                    <i class="fas {{ parcours.isOnline ? 'fa-check-circle' : 'fa-times-circle' }} me-1"></i>
                                    <span id="status-text">{{ parcours.isOnline ? 'En ligne' : 'Hors ligne' }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Zone de notification -->
        <div id="notification-area" class="px-3 pt-2"></div>
        
        <!-- Corps avec logo et description -->
        <div class="parcours-hero-body">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <!-- Logo du parcours -->
                    <div class="col-md-4">
                        <div class="parcours-logo-wrapper">
                            {% if parcours.logo %}
                                <div class="parcours-logo-container">
                                    <img src="{{ asset(parcours.logo) }}" alt="Logo {{ parcours.nom }}" class="parcours-logo">
                                </div>
                            {% else %}
                                <div class="parcours-logo-placeholder">
                                    <i class="fas fa-image"></i>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Description et actions -->
                    <div class="col-md-8">
                        <div class="parcours-content">
                            <div class="parcours-description">
                                {{ parcours.description }}
                            </div>
                            
                            <div class="parcours-actions">
                                <div class="d-flex justify-content-end w-100">
                                    <a href="{{ path('app_admin_parcours_edit', {id: parcours.id}) }}" class="btn btn-outline-primary action-btn me-2">
                                        <i class="fa fa-edit me-1"></i> Modifier
                                    </a>
                                    {{ include('admin/parcours/_delete_form.html.twig') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion du changement de statut sans rechargement de page
        const toggleForm = document.getElementById('toggle-form');
        if (toggleForm) {
            toggleForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const button = document.getElementById('toggle-button');
                const statusBadge = document.getElementById('status-badge');
                const statusText = document.getElementById('status-text');
                const currentStatus = statusText.textContent.trim() === 'En ligne';
                
                // Désactiver le bouton pendant la requête
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Traitement...';
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erreur lors du changement de statut');
                    }
                    return response.json();
                })
                .then(data => {
                    // Mettre à jour l'interface si succès
                    if (data.success) {
                        // Mettre à jour le badge
                        statusBadge.className = `status-pill ${data.isOnline ? 'status-online' : 'status-offline'}`;
                        statusText.textContent = data.isOnline ? 'En ligne' : 'Hors ligne';
                        statusBadge.querySelector('i').className = `fas ${data.isOnline ? 'fa-check-circle' : 'fa-times-circle'} me-1`;
                        
                        // Mettre à jour le bouton
                        button.className = `btn ${data.isOnline ? 'btn-outline-secondary' : 'btn-outline-success'} status-toggle`;
                        button.innerHTML = `<i class="fa fa-toggle-${data.isOnline ? 'on' : 'off'} me-1"></i> ${data.isOnline ? 'Désactiver' : 'Activer'}`;
                        button.title = data.isOnline ? 'Désactiver le parcours' : 'Activer le parcours';
                        
                        // Afficher un message de succès dans la zone de notification dédiée
                        const notificationArea = document.getElementById('notification-area');
                        const alertDiv = document.createElement('div');
                        alertDiv.className = 'alert alert-success alert-dismissible fade show';
                        alertDiv.innerHTML = `
                            <i class="fas fa-check-circle me-2"></i>${data.message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        `;
                        
                        // Vider la zone de notification avant d'ajouter une nouvelle alerte
                        notificationArea.innerHTML = '';
                        notificationArea.appendChild(alertDiv);
                        
                        // Supprimer l'alerte après 4 secondes
                        setTimeout(() => {
                            alertDiv.classList.remove('show');
                            setTimeout(() => alertDiv.remove(), 300);
                        }, 4000);
                    } else {
                        // Afficher un message d'erreur
                        alert(data.message);
                    }
                    
                    // Réactiver le bouton
                    button.disabled = false;
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    button.disabled = false;
                    button.innerHTML = `<i class="fa fa-toggle-${currentStatus ? 'on' : 'off'} me-1"></i> ${currentStatus ? 'Désactiver' : 'Activer'}`;
                    alert('Une erreur est survenue lors du changement de statut.');
                });
            });
        }
    });
    </script>

    {# Section des rubriques avec accordéon #}
    <h2 class="h4 mb-3"><i class="fas fa-sitemap me-2"></i>Rubriques du parcours</h2>


    <div class="accordion mb-4 ms-2 ms-md-3" id="rubriquesAccordion">
    {% for rubrique in rubriques %}
        <div class="accordion-item rubrique-section mb-3">
            <h2 class="accordion-header" id="heading{{ rubrique.id }}">
                <button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ rubrique.id }}" aria-expanded="true" aria-controls="collapse{{ rubrique.id }}">
                    <div class="d-flex align-items-center">
                        <span class="niveau-indicator"></span>
                        <i class="fas fa-folder me-2 text-primary"></i>
                        <span class="fw-bold">{{ rubrique.titre }}</span>
                    </div>
                    <span class="badge bg-light text-dark me-2">
                        {% if rubrique.type.value == constant('App\\Enum\\TypeRubrique::PRATIQUES').value %}
                            <i class="fas fa-check-square me-1"></i> Pratiques
                        {% else %}
                            <i class="fas fa-tasks me-1"></i> Étapes
                        {% endif %}
                    </span>
                </button>
            </h2>
            <div id="collapse{{ rubrique.id }}" class="accordion-collapse collapse show" aria-labelledby="heading{{ rubrique.id }}">
                <div class="accordion-body">
                    <div class="card-text mb-3">{{ rubrique.description }}</div>

                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <a href="{{ path('app_admin_rubrique_edit', {'id': rubrique.id}) }}" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Modifier la rubrique">
                            <i class="fas fa-edit me-1"></i> Modifier
                        </a>
                        {% if rubrique.type.value == constant('App\\Enum\\TypeRubrique::PRATIQUES').value %}
                            <a href="{{ path('app_admin_pratique_new', {'rubrique': rubrique.id}) }}" class="btn btn-sm btn-outline-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Ajouter une pratique">
                                <i class="fas fa-plus me-1"></i> Ajouter une pratique
                            </a>
                        {% endif %}
                        {% if rubrique.type.value == constant('App\\Enum\\TypeRubrique::ETAPES').value %}
                            <a href="{{ path('app_admin_etape_new', {'rubrique': rubrique.id}) }}" class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Ajouter une étape">
                                <i class="fas fa-plus me-1"></i> Ajouter une étape
                            </a>
                        {% endif %}
                    </div>

                    <div class="content-container">
                        {# PRATIQUES #}
                        {% if rubrique.pratiques|length > 0 %}
                            <div class="list-group mb-4">
                                <div class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><i class="fas fa-check-square me-2"></i>Pratiques</h5>
                                    <span class="badge bg-primary rounded-pill" data-count="{{ rubrique.pratiques|length }}">{{ rubrique.pratiques|length }}</span>
                                </div>

                                {% for pratique in rubrique.pratiques %}
                                    <div class="list-group-item list-group-item-action p-0">
                                        <div class="card border-0">
                                            <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0 text-pratique d-flex align-items-center">
                                                    <span class="niveau-indicator niveau-1 me-2"></span>
                                                    <i class="fas fa-check-square me-2"></i>
                                                    {{ pratique.titre }}
                                                </h5>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ path('app_admin_pratique_edit', {'id': pratique.id}) }}" class="btn btn-outline-light" title="Modifier la pratique">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-light btn-delete-pratique"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#deletePratiqueModal"
                                                            data-action="{{ path('app_admin_pratique_delete', {'id': pratique.id}) }}"
                                                            data-token="{{ csrf_token('delete' ~ pratique.id) }}"
                                                            title="Supprimer la pratique">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <p class="card-text">{{ pratique.description }}</p>
                                                <div class="d-flex flex-wrap gap-2 mt-3">
                                                    <a href="{{ path('app_admin_ficheniv2_new', {type: 'pratique', id: pratique.id}) }}" class="btn btn-sm btn-outline-success">
                                                        <i class="fas fa-plus me-1"></i> Ajouter une fiche niv2
                                                    </a>
                                                </div>
                                            </div>
                                            {# FICHES NIVEAU 2 (liées à la pratique) #}
                                            {% if pratique.ficheOutilNiv2s|length > 0 %}
                                                <div class="card-footer bg-light p-0">
                                                    <div class="accordion accordion-flush" id="accordionFicheNiv2Pratique{{ pratique.id }}">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingFicheNiv2Pratique{{ pratique.id }}">
                                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFicheNiv2Pratique{{ pratique.id }}" aria-expanded="false" aria-controls="collapseFicheNiv2Pratique{{ pratique.id }}">
                                                                    <i class="fas fa-file-alt me-2 text-info"></i>
                                                                    <strong>Fiches niveau 2</strong>
                                                                    <span class="badge bg-info rounded-pill ms-2">{{ pratique.ficheOutilNiv2s|length }}</span>
                                                                </button>
                                                            </h2>
                                                            <div id="collapseFicheNiv2Pratique{{ pratique.id }}" class="accordion-collapse collapse" aria-labelledby="headingFicheNiv2Pratique{{ pratique.id }}" data-bs-parent="#accordionFicheNiv2Pratique{{ pratique.id }}">
                                                                <div class="accordion-body p-0">
                                                                    <div class="list-group list-group-flush">
                                                                        {% for ficheNiv2 in pratique.ficheOutilNiv2s %}
                                                                            <div class="list-group-item">
                                                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                                                    <h5 class="mb-0 text-fiche-niv2 d-flex align-items-center">
                                                                                        <span class="niveau-indicator niveau-3 me-2"></span>
                                                                                        <i class="fas fa-file-alt me-2"></i> {{ ficheNiv2.titre }}
                                                                                    </h5>
                                                                                    <div class="btn-group btn-group-sm">
                                                                                        <a href="{{ path('app_admin_ficheniv2_edit', {type: 'pratique', id: ficheNiv2.id}) }}" class="btn btn-outline-primary" title="Modifier la fiche niveau 2">
                                                                                            <i class="fas fa-edit"></i>
                                                                                        </a>
                                                                                        {{ include('admin/fiche_outil_niv2/_delete_form.html.twig') }}
                                                                                    </div>
                                                                                </div>

                                                                                {# FICHES OUTIL (liées à la fiche niv2) #}
                                                                                {% if ficheNiv2.ficheOutil|length > 0 %}
                                                                                    <div class="fiches-outil-list mt-2">
                                                                                        <h6 class="text-muted mb-2"><i class="fas fa-wrench me-1"></i> Fiches outil associées:</h6>
                                                                                        <div class="list-group list-group-flush">
                                                                                            {% for ficheOutil in ficheNiv2.ficheOutil %}
                                                                                                <div class="list-group-item list-group-item-action d-flex align-items-center py-2 px-3 border-0">
                                                                                                    <span class="niveau-indicator niveau-4 me-2"></span>
                                                                                                    <i class="fas fa-wrench me-2 text-warning"></i>
                                                                                                    <span class="text-fiche-outil">{{ ficheOutil.titre }}</span>
                                                                                                </div>
                                                                                            {% endfor %}
                                                                                        </div>
                                                                                    </div>
                                                                                {% else %}
                                                                                    <div class="alert alert-light mt-2 mb-0 py-2">
                                                                                        <small><i class="fas fa-info-circle me-1"></i> Aucune fiche outil associée</small>
                                                                                    </div>
                                                                                {% endif %}
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %} {# {% if pratique.ficheOutilNiv2s|length > 0 %} #}

                                            {# FICHES OUTIL associées directement à la pratique #}
                                            {% if pratique.fichesOutil|length > 0 %}
                                                <div class="card-footer bg-light p-0 border-top">
                                                    <div class="accordion accordion-flush" id="accordionFicheOutilPratique{{ pratique.id }}">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingFicheOutilPratique{{ pratique.id }}">
                                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFicheOutilPratique{{ pratique.id }}" aria-expanded="false" aria-controls="collapseFicheOutilPratique{{ pratique.id }}">
                                                                    <i class="fas fa-wrench me-2 text-warning"></i>
                                                                    <strong>Fiches outil associées</strong>
                                                                    <span class="badge bg-warning text-dark rounded-pill ms-2">{{ pratique.fichesOutil|length }}</span>
                                                                </button>
                                                            </h2>
                                                            <div id="collapseFicheOutilPratique{{ pratique.id }}" class="accordion-collapse collapse" aria-labelledby="headingFicheOutilPratique{{ pratique.id }}" data-bs-parent="#accordionFicheOutilPratique{{ pratique.id }}">
                                                                <div class="accordion-body p-0">
                                                                    <div class="list-group list-group-flush">
                                                                        {% for ficheOutil in pratique.fichesOutil %}
                                                                            <div class="list-group-item d-flex justify-content-between align-items-center py-2">
                                                                                <div>
                                                                                    <i class="fas fa-wrench me-2 text-warning"></i>
                                                                                    <span>{{ ficheOutil.titre }}</span>
                                                                                </div>
                                                                                <div class="btn-group btn-group-sm">
                                                                                    <a href="{{ path('app_admin_fiche_outil_edit', {'id': ficheOutil.id}) }}" class="btn btn-outline-primary" title="Modifier la fiche outil">
                                                                                        <i class="fas fa-edit"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %} {# {% if pratique.fichesOutil|length > 0 %} #}
                                        </div>
                                    </div>
                                {% endfor %} {# {% for pratique in rubrique.pratiques %}#}
                            </div>
                        {% endif %} {# {% if rubrique.pratiques|length > 0 %} #}
                    </div>
                </div>
                {% if rubrique.etapes|length > 0 %}
                    <div class="list-group mb-4 mt-3">
                        <div class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>Étapes</h5>
                            <span class="badge bg-primary rounded-pill">{{ rubrique.etapes|length }}</span>
                        </div>

                        {# ETAPES #}
                        {% for etape in rubrique.etapes %}
                            <div class="list-group-item list-group-item-action p-0">
                                <div class="card border-0">
                                    <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0 text-etape">
                                            {{ etape.titre }}
                                        </h5>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ path('app_admin_etape_edit', {'id': etape.id}) }}" class="btn btn-outline-light" title="Modifier l'étape">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {{ include('admin/etape/_delete_form.html.twig') }}
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p class="card-text">{{ etape.description }}</p>
                                        <div class="d-flex flex-wrap gap-2 mt-3">
                                            <a href="{{ path('app_admin_ficheniv2_new', {type: 'etape', id: etape.id}) }}" class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-plus me-1"></i> Ajouter une fiche niv2
                                            </a>
                                        </div>
                                    </div>
                                    {# FICHES NIVEAU 2 (liées à l'étape) #}
                                    {% if etape.ficheOutilNiv2s|length > 0 %}
                                        <div class="card-footer bg-light p-0">
                                            <div class="accordion accordion-flush" id="accordionFicheNiv2Etape{{ etape.id }}">
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingFicheNiv2Etape{{ etape.id }}">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFicheNiv2Etape{{ etape.id }}" aria-expanded="false" aria-controls="collapseFicheNiv2Etape{{ etape.id }}">
                                                            <i class="fas fa-file-alt me-2 text-info"></i>
                                                            <strong>Fiches niveau 2</strong>
                                                            <span class="badge bg-info rounded-pill ms-2">{{ etape.ficheOutilNiv2s|length }}</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapseFicheNiv2Etape{{ etape.id }}" class="accordion-collapse collapse" aria-labelledby="headingFicheNiv2Etape{{ etape.id }}" data-bs-parent="#accordionFicheNiv2Etape{{ etape.id }}">
                                                        <div class="accordion-body p-0">
                                                            <div class="list-group list-group-flush">
                                                                {% for ficheNiv2 in etape.ficheOutilNiv2s %}
                                                                    <div class="list-group-item">
                                                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                                                            <h5 class="mb-0 text-info">
                                                                                <i class="fas fa-file-alt me-2"></i> {{ ficheNiv2.titre }}
                                                                            </h5>
                                                                            <div class="btn-group btn-group-sm">
                                                                                <a href="{{ path('app_admin_ficheniv2_edit', {type: 'etape', id: ficheNiv2.id}) }}" class="btn btn-outline-primary" title="Modifier la fiche niveau 2">
                                                                                    <i class="fas fa-edit"></i>
                                                                                </a>
                                                                                {{ include('admin/fiche_outil_niv2/_delete_form.html.twig') }}
                                                                            </div>
                                                                        </div>

                                                                        {# FICHES OUTIL (liées à la fiche niv2) #}
                                                                        {% if ficheNiv2.ficheOutil|length > 0 %}
                                                                            <div class="fiches-outil-list mt-2">
                                                                                <h6 class="text-muted mb-2"><i class="fas fa-wrench me-1"></i> Fiches outil associées:</h6>
                                                                                <div class="list-group list-group-flush">
                                                                                    {% for ficheOutil in ficheNiv2.ficheOutil %}
                                                                                        <div class="list-group-item list-group-item-action d-flex align-items-center py-2 px-3 border-0">
                                                                                            <i class="fas fa-wrench me-2 text-warning"></i>
                                                                                            <span>{{ ficheOutil.titre }}</span>
                                                                                        </div>
                                                                                    {% endfor %}
                                                                                </div>
                                                                            </div>
                                                                        {% else %}
                                                                            <div class="alert alert-light mt-2 mb-0 py-2">
                                                                                <small><i class="fas fa-info-circle me-1"></i> Aucune fiche outil associée</small>
                                                                            </div>
                                                                        {% endif %}
                                                                    </div>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %} {# {% if etape.ficheOutilNiv2s|length > 0 %} #}

                                    {# FICHES OUTIL associées directement à l'étape #}
                                    {% if etape.fichesOutil|length > 0 %}
                                        <div class="card-footer bg-light p-0 border-top">
                                            <div class="accordion accordion-flush" id="accordionFicheOutilEtape{{ etape.id }}">
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingFicheOutilEtape{{ etape.id }}">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFicheOutilEtape{{ etape.id }}" aria-expanded="false" aria-controls="collapseFicheOutilEtape{{ etape.id }}">
                                                            <i class="fas fa-wrench me-2 text-warning"></i>
                                                            <strong>Fiches outil associées</strong>
                                                            <span class="badge bg-warning text-dark rounded-pill ms-2">{{ etape.fichesOutil|length }}</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapseFicheOutilEtape{{ etape.id }}" class="accordion-collapse collapse" aria-labelledby="headingFicheOutilEtape{{ etape.id }}" data-bs-parent="#accordionFicheOutilEtape{{ etape.id }}">
                                                        <div class="accordion-body p-0">
                                                            <div class="list-group list-group-flush">
                                                                {% for ficheOutil in etape.fichesOutil %}
                                                                    <div class="list-group-item d-flex justify-content-between align-items-center py-2">
                                                                        <div>
                                                                            <i class="fas fa-wrench me-2 text-warning"></i>
                                                                            <span>{{ ficheOutil.titre }}</span>
                                                                        </div>
                                                                        <div class="btn-group btn-group-sm">
                                                                            <a href="{{ path('app_admin_fiche_outil_edit', {'id': ficheOutil.id}) }}" class="btn btn-outline-primary" title="Modifier la fiche outil">
                                                                                <i class="fas fa-edit"></i>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %} {# {% if etape.fichesOutil|length > 0 %} #}
                                </div>
                            </div>
                        {% endfor %}  {# for etape in rubrique.etapes #}
                    </div>
                {% endif %} {#  {% if rubrique.etapes|length > 0 %} #}
            </div> {#  l.130#}
        </div>
    {% else %} {#  {% for rubrique in rubriques %} #}
        <div class="alert alert-info">
            Aucune rubrique pour ce parcours.
        </div>
    {% endfor %}
    </div>

    {# Modale générique de suppression de pratique #}
    <div class="modal fade" id="deletePratiqueModal" tabindex="-1" aria-labelledby="deletePratiqueModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="deletePratiqueModalForm" method="post" action="">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deletePratiqueModalLabel">Confirmer la suppression</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        Êtes-vous sûr de vouloir supprimer cette pratique ? Cette action est irréversible.
                    </div>
                    <input type="hidden" name="_token" value="">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Supprimer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


{% endblock %}