{% set index = loopIndex %}
{% for activite in liaisons %}
    {% set index = index+1 %}
    <li class="connected-activity" data-index="{{ index }}">
        <div class="list-group-item activite activite{{ index }}" data-id-activity="{{ activite.activite.id }}" data-id-liaison="{{ activite.id }}">
            <div class="headerActivity d-flex align-items-center">
                <i class="fa fa-files-o fa-lg iconActivity mb-2" aria-hidden="true"></i>
                <div class="inputLibelleActivity" data-href="{{ path('courses_activite_edit', {'idLiaison': activite.id}) }}" data-origin-href="{{ path('courses_activite_edit', {'idLiaison': '_id_activity_'}) }}" title="{{ activite.activite.libelle }}">
                    <label for="inp" class="inp">
                        <input type="text" class="input" placeholder="&nbsp;" maxlength="250">
                        <span class="label ellipsis">{{ activite.activite.libelle }}</span>
                        <span class="border"></span>
                    </label>
                </div>
                <span class="badge badge-activity badge-secondary mb-2">0</span>
                <div class="tg-list-item">
                    <input class="tgl tgl-flip adaptabilite" id="adapt{{ activite.id }}" type="checkbox" {% if activite.adaptabilite == true %}checked{% endif %}>
                    <label class="tgl-btn toggleAdapt m-0" data-tg-off="Classic" data-tg-on="Adapt." for="adapt{{ activite.id }}"></label>
                </div>
                <input class="mx-2 notePlancher form-control w-auto" type="number" name="notePlancher" min="0" max="100" placeholder="Note plancher" {% if activite.adaptabilite == false %}style="display:none"{% endif %} value="{{ activite.notePlancher }}">
                <div class="toggleActivity my-0 mr-2 ml-auto">
                    <button type="button" class="btn btn-xs btn-toggle active" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="toggleActivity(this);">
                        <div class="handle"></div>
                    </button>
                </div>
                <a href="{{ path('courses_activite_index', {
                    'id': activite.activite.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="removeAct{{ activite.id }}" class="fa fa-trash-o fa-lg removeActivity removeIcon my-0 mx-2" title="Supprimer" onclick="removeActivity(this);" data-url="{{ path('courses_lesson_remove_activity', {'id': activite.id}) }}" data-origin-url="{{ path('courses_lesson_remove_activity', {'id': '_id_activity_'}) }}"></i>
            </div>
            <div class="contentActivity">
                <div class="liste-Composants" data-path="{{ path('courses_activite_list_composant', {'id': activite.activite.id}) }}" data-index-activity="{{ index }}">
                    {{ render(controller(
                        'CoursesBundle:Activite:listComposants',
                        { 'id': activite.activite.id,
                            'counter' : index
                        }
                    )) }}
                </div>
                <div class="elementAjoutComposant popinComposant" data-idActivite="{{ activite.activite.id }}" data-origin-url-valid="{{ path('courses_activite_add_composant', {'id': "_id_activity_"}) }}" data-url-valid="{{ path('courses_activite_add_composant', {'id': activite.activite.id}) }}" data-origin-href="{{ path('courses_composants_list_active', {'id': "_id_activity_"}) }}" data-href="{{ path('courses_composants_list_active', {'id': activite.activite.id}) }}" data-title="Ajouter des composants">
                    <div class="rotating-dashed composants"></div>
                    <h6 class="my-auto createComposant" style="color:white;" data-href="{{ path('courses_popin_create_composant') }}" data-title="Création de composant">Créer un composant</h6>
                    <i class="fa fa-search fa-lg iconPlusComposant fa-flip-horizontal ml-auto" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </li>
{% endfor %}