{# INFO: clone de Modules/listLessons.html.twig servant pour ajouter une leçon dans un module
 TODO: fusionner pour ne plus dupliquer tout ce code
#}

{% set index = loopIndex %}
{% for lesson in liaisons %}
    {% set index = index+1 %}
    <li class="connected-lesson">
        <div class="list-group-item lesson lesson{{ index }}" data-id-lecon="{{ lesson.lecon.id }}" data-index-lecon="{{ index }}">
            <div class="headerLesson d-flex align-items-center">
                <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é">
                </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>

                <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="{{ index }}">
                    {{ render(controller(
                        'CoursesBundle:Lecon:listActivites',
                        { 'id': lesson.lecon.id }
                    )) }}
                </div>
                <div class="elementAjoutActivite d-flex align-items-center">
                    <div class="rotating-dashed activities my-auto"></div>
                    <i class="fa fa-files-o fa-lg iconAddActivity" aria-hidden="true"></i>
                    <div class="inputNewActivity">
                        <label for="inp" class="inp">
                            <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                            <span class="label"><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>
            </div>
        </div>
    </li>
{% endfor %}