{% for trafficLawsTheme in trafficLawsThemes %}
    <div class="accordion" id="trafficLawsTheme{{ trafficLawsTheme['theme'].id }}">
        <div class="accordion-item border-top-0 border-left-0 border-right-0 border-bottom-1">
            <h2 class="accordion-header" id="traffic-laws-course-{{ trafficLawsTheme['theme'].id }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-traffic-laws-theme-{{ trafficLawsTheme['theme'].id }}" aria-expanded="false" aria-controls="collapse-traffic-laws-theme-{{ trafficLawsTheme['theme'].id }}">
                    <p class="mb-0 w-100 d-flex flex-wrap" style="justify-content: space-between; align-items: center;">
                        <span class="{% if trafficLawsTheme['generalFinished'] == trafficLawsTheme['theme'].getCountTrafficLawsChapters %}  bloc-title-ellipsis text-decoration-line-through mx-2 {% else %} bloc-title-ellipsis mx-2 {% endif %}">
                            {{ trafficLawsTheme['theme'] }}
                        </span>
                        {% if trafficLawsTheme['theme'].getCountTrafficLawsChapters == 0 %}
                            <span class="mx-2 text-light btn btn-sm btn-danger">Aucun chapitre trouvé</span>
                        {% elseif trafficLawsTheme['generalFinished'] == trafficLawsTheme['theme'].getCountTrafficLawsChapters %}
                            <span class="mx-2 text-light btn btn-sm btn-success">Terminé</span>
                        {% elseif trafficLawsTheme['generalStarted'] > 0 %}
                            {% if trafficLawsTheme['lastChpaterId'] %}
                                <a class="mx-2 btn btn-sm btn-primary" href="{{path('traffic_laws_student_chapter',{'id' : trafficLawsTheme['lastChpaterId']})}}">En cours</a>
                            {% endif %}
                        {% else %}
                            {% if trafficLawsTheme['lastChpaterId'] %}
                                <a class="mx-2 btn btn-sm btn-primary" href="{{path('traffic_laws_student_chapter',{'id' : trafficLawsTheme['lastChpaterId']})}}">N'a pas encore débuté</a>
                            {% endif %}
                        {% endif %}
                    </p>
                </button>
            </h2>
            <div id="collapse-traffic-laws-theme-{{ trafficLawsTheme['theme'].id }}" class="accordion-collapse collapse" aria-labelledby="traffic-laws-theme-{{ trafficLawsTheme['theme'].id }}" data-bs-parent="#trafficLawsTheme{{ trafficLawsTheme['theme'].id }}">
                <div class="accordion-body">
                    {# contetnt theme#}
                    {% for key, trafficLawsCourse in trafficLawsTheme['coursesProgressionArray'] %}
                        <div class="accordion shadow-sm bloc-radius" id="trafficLawsCourse{{ trafficLawsCourse['course'].id }}">
                            <div class="accordion-item my-2 bloc-radius">
                                <h2 class="accordion-header" id="traffic-laws-course-{{ trafficLawsCourse['course'].id }}">
                                    <button class="accordion-button collapsed bloc-radius" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-traffic-laws-course-{{ trafficLawsCourse['course'].id }}" aria-expanded="false" aria-controls="collapse-traffic-laws-course-{{ trafficLawsCourse['course'].id }}">
                                        <p class="mb-0 w-100 d-flex flex-wrap" style="justify-content: space-between">
                                            <span class="{% if trafficLawsCourse['finishedInCourseCount'] == trafficLawsCourse['course'].getCountTrafficLawsChapters %}  bloc-title-ellipsis text-decoration-line-through mx-2 {% else %} bloc-title-ellipsis mx-2 {% endif %}">
                                                {{ trafficLawsCourse['course'] }}
                                            </span>
                                            <span>
                                                <label>{{ trafficLawsCourse['course'].getCountTrafficLawsChapters}} {% if trafficLawsCourse['course'].getCountTrafficLawsChapters > 1 %} Chapitres {% else %} Chapitre {% endif%}<label>
                                            </span>
                                        </p>
                                    </button>
                                </h2>
                                <div id="collapse-traffic-laws-course-{{ trafficLawsCourse['course'].id }}" class="accordion-collapse collapse" aria-labelledby="traffic-laws-course-{{ trafficLawsCourse['course'].id }}" data-bs-parent="#trafficLawsCourse{{ trafficLawsCourse['course'].id }}">
                                    <div class="accordion-body">
                                    <h5>Contenu de la leçon<span class="mx-2"> {{ trafficLawsCourse['finishedInCourseCount'] }} / {{ trafficLawsCourse['course'].getCountTrafficLawsChapters }}</span></h5>
                                        {{ include('traffic_laws_module/student/includes/chapters_collapses.html.twig') }}                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
{% endfor %}