          <div id="treeview" class="treeview" style="width: 450px;float: left;top: -412px;position: absolute;left: 388px;">
                    </div> 
            <div id="tableRefresh">

                <table id="tableBibliotheque" class="table table-hover" style ="width:100%;margin-left: 838px;margin-top: -412px;position:absolute;">
                	<thead class="thead-dark">
                    	<tr>
                        	<th scope="col" width="7%">{{'Libellé Questions' | trad }}</th>
                            <th scope="col" width ="3%">{{'Type de réponse' | trad }}</th>
                            <th scope="col" width="3%" class="align-center">{{'Poids' | trad}}</th>
                            <th scope="col" width="5%" class="align-center"></th>                          
                         
                        </tr>
                    </thead>
                    <tbody>
         
                      {% set compteur = 1 %}
                       {% for blb in liste_gestion %}
                        {% set compteur =  compteur + 1 %}
                        
                        <tr id="commande{{ blb.ID_QUEST }}" class="delete" >
            
    <td onclick = "hideAll();toggleSlide('{{ path('GlobalApplication.ImportQuestion.ajaxDetailLoupeQuestion', {'idQuestion' : blb.ID_QUEST }) }}' , 'commande{{ blb.ID_QUEST }}detail', {'id' : {{ blb.ID_QUEST }}, 'mode' : '{{mode}}' } );" class="toggleSlide" id = "loupe_{{ blb.ID_QUEST }}">{{ blb.LIB_QUEST }}</td>
                        	<td> 

                            
                            {% if blb.TYPE_REP == 'N' %}
                                {{'Numérique' | trad }}
                            {% endif %}
                            {% if blb.TYPE_REP == 'O' %}
                                {{'Ouvert' | trad }}
                            {% endif %}
                            {% if blb.TYPE_REP == 'L' %}
                                {{'Logique' | trad }}
                            {% endif %}
                            {% if blb.TYPE_REP == 'T' %}
                                {{'Tableau de réponses' | trad}}
                            {% endif %}
                            {% if blb.TYPE_REP == 'C' %}
                                {{ 'Calculée' | trad }}
                            {% endif %}
                            </td>
                        	<td class="align-center">{{ blb.POIDS  }}</td>
                        	<td class="align-center"></td>
        
                        	
                   		</tr>
                   		
                   		<tr id="commande{{ blb.ID_QUEST }}detail" class="detail_ligne hide_detail sousBlock">
                           {# ajaxDetailQuestion == toggleSlide #}
                        </tr>
                   		{% endfor %}
    
                    </tbody>
                </table>
                </div>                    

<script>
	$('#treeview').treeview({
								'data': {{ treeCG | json }},
								'showTags': true,
								'levels': {{level}},
								'enableLinks': true,
	}); 


    function openAllTheme()
    {
        $('#treeview').treeview('expandAll', { silent: true });
    }
    function closeAllTheme()
    {
        $('#treeview').treeview('collapseAll', { silent: true });
    }
    function hideAll()
    { 
        $('.modificationLigne').hide();    
    }

	// Cette fonction sera utiliser dans le cas ou on va cliquer sur un element du treeview il va ajouter les onclick necessaire sur les boutton ajouter theme modfier theme et supprimer theme ainsi que son design 
	$('#treeview').on('nodeSelected', function(event, data) 
	{
		valMode = $('#form_detail_etat').val(); 

		var myForm = $("#form_question_").serializeArray();
		
		myForm.push({name : 'idModelTheme', value :data.id});

		refrechDiv('{{ path('GlobalApplication.ImportQuestion.ajaxDetailByModel') }}', 'tableRefresh', '', '', myForm);
		
	});

    

</script>