{% if trafficLawsCourse['chapters']|length > 0 %}
    {% for key, trafficLawsChapterIn in trafficLawsCourse['chapters'] %}
            <hr> 
            <div id="trafficLawsChapter{{ trafficLawsChapterIn['chapter'].id }}" class="mt-2 w-100 d-flex flex-wrap chapter-title bloc-student-chapter bg-content-second-bg no-cursor-pointer" data-id={{trafficLawsChapterIn['chapter'].id}} style="align-items: center; justify-content: space-between">
                <div class="row w-100">
                    <div class="col-sm-8">
                        <span class="{% if trafficLawsChapterIn['statut'] == 'Terminé'%}  bloc-title-ellipsis text-decoration-line-through mx-2 {% else %} bloc-title-ellipsis mx-2 {% endif %}">
                            <i class="mdi mdi-library-books icon-sm text-muted hover-cursor"></i>
                            {% if (trafficLawsChapter is defined and trafficLawsChapterIn['chapter'] == trafficLawsChapter) %}
                                <b><i>{{ trafficLawsChapterIn['chapter'] }}</i></b>
                            {% else %}
                                {{ trafficLawsChapterIn['chapter'] }}
                            {% endif %}
                        </span>
                    </div>

                    <div class="col-sm-4">
                        <span class="form-check form-check-danger m-0"  style="text-align:right">
                            <label class="form-check-label ">
                                {% if trafficLawsChapterIn['statut'] == 'Terminé'%} 
                                    <i class="mdi mdi-checkbox-marked-circle icon-sm me-3 text-primary"></i>
                                {% else %} 
                                    <i class="mdi mdi-checkbox-blank-circle-outline icon-sm me-3 text-primary"></i>
                                {% endif %}
                            </label>
                        </span>
                    </div>
                </div>
            </div>
    {% endfor %}
{% endif %}