{# dans module#settings, partie de gauche : html du 1er niveau #}

<div id="itemsLessons" class="list-group" data-url="" data-counter="0">
    <ul class="sortable-lessons">
        {% for lesson in lessons %}
            <li class="connected-lesson">
                <div class="list-group-item lesson lesson{{ loop.index }}" data-id-lecon="{{ lesson.lecon.id }}" data-index-lecon="{{ loop.index }}">
                    <div class="headerLesson d-flex align-items-center">
                        {% if lesson.lecon.active == 0 %}
                            <i class="fa fa-ban fa-lg mb-2" aria-hidden="true"></i>
                        {% endif %} 
                        <h5><b>Leçon n°{{ lesson.lecon.id }}</b></h5>

                        <i class="fa fa-folder-o fa-lg iconLesson mb-2" aria-hidden="true"></i>
                        <div class="inputLibelleLecon" data-href="{{ path('lesson_edit', {'idLiaison': lesson.id}) }}" title="{{ lesson.lecon.libelle }}">
                            <label for="inp" class="inp">
                                <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                                <span class="label ellipsis fontLecon">{{ lesson.lecon.libelle }}</span>
                                <span class="border"></span>
                            </label>
                        </div>
                        <span class="badge badge-lesson badge-secondary mb-2">0</span>
                        <div class="tg-list-item">
                            <input class="tgl tgl-flip" id="cb{{ lesson.lecon.id }}" type="checkbox" {% if lesson.retry == true %}checked{% endif %}>
                            <label class="tgl-btn toggleRetry m-0" data-tg-off="1 TRY" data-tg-on="RETRY" for="cb{{ lesson.lecon.id }}"></label>
                        </div>
                        {#<input
                            id="duree{{ lesson.lecon.id }}"
                            type="time"
                            class="inputDureeLecon mx-2 mt-1"
                            {% if lesson.lecon.duree is not null %}
                            value="{{ (lesson.lecon.duree*60)|date('H:i', '+00:00 GMT') }}"
                            {% endif %}
                        >#}
                        <div>
                            <i class="fa fa-clock-o" aria-hidden="true" style="position:absolute;margin-top: 15px;margin-left: 15px;"></i>
                            <input type="number" id="duree{{ lesson.lecon.id }}" name="duree{{ lesson.lecon.id }}" class="inputDureeLecon form-control mx-2 mt-1 pl-4" style="width: 150px;"
                                   min="0" placeholder="illimité" value="{{ lesson.lecon.duree }}">
                        </div>

                        {# partie sur la description #}
                        {% set class_status = "bg-light text-muted" %}
                        {% set lecon_description = 'cliquez pour en renseigner une.' %}
                        {% if lesson.lecon.description %}
                            {% set lecon_description = lesson.lecon.description|raw %}
                            {% set class_status = "bg-primary text-white" %}
                        {% endif %}
                        <div class="btn float-right {{ class_status }}"
                             data-toggle="tooltip" data-html="true"
                             title="Description: {{ lecon_description }}">
                            <a class="popin-description" data-title="Modifier la description"
                               data-href="{{ path('courses_lecon_edit', { 'id': lesson.lecon.id}) |raw }}">
                                <i class="fa fa-info-circle"></i>
                            </a>
                        </div>
                        <i class="fa fa-book fa-lg nbModuleParent" aria-hidden="true" style="cursor:pointer"></i>

                        <div class="toggleLesson my-0 mx-2 ml-auto">
                            <button type="button" class="btn btn-xs btn-toggle active" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="toggleLesson(this);">
                                <div class="handle"></div>
                            </button>
                        </div>
                        <a href="{{ path('courses_lesson_show_activities_apercu', {
                            'id': lesson.lecon.id,
                            'formation_id': 0,
                            'module_id': 0,
                            'lecon_id': 0,
                            'counter_activite': 0,
                            'ajax':false,
                            'pleine_page': true,
                            'session': 0
                        }) |raw }}" target="_blank" class="iconAperçu my-0 mx-2">
                            <i class="fa fa-eye fa-lg apercuSettings m-0" title="Voir l'aperçu"></i>
                        </a>
                        <i id="removeLess{{ lesson.id }}" onclick="removeLesson(this);" data-url="{{ path('courses_module_remove_lesson', {'id': lesson.id}) }}" class="fa fa-trash-o fa-lg removeIcon my-0 mx-2"></i>
                    </div>
                    <div class="contentLesson">
                        <div class="liste-Activites" data-path="{{ path('courses_lesson_list_activite', {'id': lesson.lecon.id}) }}" data-index-lecon="{{ loop.index }}">
                            {{ render(controller(
                                'CoursesBundle:Lecon:listActivites',
                                { 'id': lesson.lecon.id }
                            )) }}
                        </div>
                        <div class="elementAjoutActivite d-flex align-iems-center">
                            <div class="rotating-dashed activities"></div>
                            <i class="fa fa-files-o fa-lg iconAddActivity my-auto" aria-hidden="true"></i>
                            <div class="inputNewActivity">
                                <label for="inp" class="inp">
                                    <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                                    <span class="label ellipsis"><i>Nouvelle activité</i></span>
                                    <span class="border"></span>
                                </label>
                            </div>
                            <i class="fa fa-plus fa-lg iconPlus my-auto" aria-hidden="true" data-href="{{ path('courses_lesson_add_activity', {'id': lesson.lecon.id}) }}"></i>
                            <i class="fa fa-search fa-lg fa-flip-horizontal iconSearch popinRechercherActivite ml-auto my-auto" aria-hidden="true" data-href="{{ path('courses_lesson_list_activities', {'id': lesson.lecon.id}) }}" data-valid="{{ path('courses_lesson_add_activities', {'id': lesson.lecon.id}) }}"></i>
                        </div>
                        {#<button type="button" class="popinAjoutActivite open-popin2 btn btn-primary" data-href="{{ path('courses_lesson_add_activity', {'id': lesson.lecon.id}) }}">Créer une activité</button>
                        <button type="button" class="popinRechercherActivite open-popin2 btn btn-primary" data-href="{{ path('courses_lesson_list_activities', {'id': lesson.lecon.id}) }}" data-valid="{{ path('courses_lesson_add_activities', {'id': lesson.lecon.id}) }}">Rechercher des activités</button>#}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
</div>