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

{% block title %}{{ etape.titre }} - {{ etape.rubrique.parcours.nom }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# CSS files are now included in app.consolidated.css #}
{% endblock %}

{% block content %}
    <div class="container mt-4">
        {# Breadcrumb #}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ path('app_parcours_show', {'id': etape.rubrique.parcours.id}) }}">{{ etape.rubrique.parcours.nom }}</a></li>
                <li class="breadcrumb-item">Etapes</li>
                <li class="breadcrumb-item active" aria-current="page">{{ etape.titre }}</li>
            </ol>
        </nav>
        
        {# Timeline des étapes #}
        <div class="etape-timeline-container">
            {% set allEtapes = [] %}

            {# Collecter toutes les étapes du parcours #}
            {% for rubrique in etape.rubrique.parcours.rubriques %}
                {% for etapeItem in rubrique.etapes %}
                    {% set allEtapes = allEtapes|merge([etapeItem]) %}
                {% endfor %}
            {% endfor %}

            {# Trier les étapes par position #}
            {% set sortedEtapes = allEtapes|sort((a, b) => a.position <=> b.position) %}
            
            <div class="etape-timeline">
                <div class="etape-timeline-line"></div>
                {# Afficher les étapes dans la timeline #}
                {% for etapeItem in sortedEtapes %}
                    <div class="etape-item {% if etapeItem.id == app.request.attributes.get('id') %}active{% endif %}">
                        {# Conserver le contexte parcours dans les liens de la timeline #}
                        {% set routeParams = {'id': etapeItem.id} %}
                        {% if parcours %}
                            {% set routeParams = routeParams|merge({'parcours': parcours.id}) %}
                        {% endif %}
                        <a href="{{ path('app_etape_show', routeParams) }}">
                            <div class="etape-icon">
                                {% if etapeItem.iconFilename %}
                                    <img src="{{ asset('uploads/etapes/icones/' ~ etapeItem.iconFilename) }}" alt="{{ etapeItem.titre }}" class="etape-icon-image">
                                {% else %}
                                    <i class="fas fa-check"></i>
                                {% endif %}
                            </div>
                            <div class="etape-number">{{ '%02d'|format(etapeItem.position) }}</div>
                            <div class="etape-title">{{ etapeItem.titre }}</div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="etape-content-container">
            {% if etape.rubrique %}
                <div class="etape-separator"></div>
            {% endif %}

            <div class="card-body">
                <h1 class="card-title">{{ etape.titre }}</h1>

                {% if etape.description %}
                    <p class="card-text">{{ etape.description }}</p>
                {% endif %}

                <div class="etape-content mt-4">
                    {{ etape.contenu|raw }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/etape-timeline.js') }}"></script>
    
    {% if etape.fichesOutil|length > 0 or etape.ficheOutilNiv2s|length > 0 %}
        {# Passer les données des fiches outils (niveau 1 et 2) au JavaScript #}
        <script id="fiches-data" type="application/json">
            {{ fichesData|json_encode|raw }}
        </script>
    {% endif %}
    
    <script src="{{ asset('js/etape-show.js') }}"></script>
{% endblock %}