{% extends "layout.html.twig" %}

{% block content %}
	<div class="container_perso" id="container_local" style='margin-top: 20px; '>
		<div class='row' style="margin-bottom: 0; ">
	    <div class="input-field col-3">
        <select id="bo_select" data-field_to_filter="bo" data-field_to_switch="bo">
					<option value=''>TOUTES</option>
	        {% for bo in bos|sort %}
	          <option value='{{ bo.nom }}'>{{ bo.nom }}</option>
	        {% endfor %}
	      </select>
	      <label>BOS</label>
	    </div>
	    <div class="input-field col-3">
        <select id="agent_select" data-field_to_filter="nni" data-field_to_switch="nom_prenom" data-id_of_filter_before="bo_select">
					<option value=''>TOUS</option>
	        {% for agent in agents|sort %}
	          <option value='{{ agent.nni }}'>{{ agent.nom_prenom }}</option>
	        {% endfor %}
	      </select>
	      <label>AGENTS</label>
	    </div>
	    <div class="col-6">
				<canvas id="chart_formation" height="50"></canvas>
	    </div>
	  </div>
		 <div class='row'>
			 <div id="div_nom_stage" class="input-field col-3">
         <select id="select_domaine" data-field_to_filter="domaine" data-field_to_switch="" data-id_of_filter_before="" multiple>
 					<option value=''>TOUS</option>
 	      </select>
 	      <label>DOMAINE</label>
 	    </div>
			 <div id="div_nom_stage" class="input-field col-3">
         <select id="select_nom_stage" data-field_to_filter="nom_stage" data-field_to_switch="" data-id_of_filter_before="" multiple>
 					<option value=''>TOUS</option>
 	      </select>
 	      <label>FORMATION</label>
 	    </div>
			 <div id="div_code_stage" class="input-field col-3">
         <select id="select_code_stage" data-field_to_filter="code1" data-field_to_switch="" data-id_of_filter_before="" multiple>
 					<option value=''>TOUS</option>
 	      </select>
 	      <label>CODE FORMATION</label>
 	    </div>
		 </div>
		 <div class='row'>
	    <div class='col-12'>
	  		{% include "app/table.html.twig" %}
	  	</div>
	  </div>
	</div>

	<footer>
		{% include "security/rgpd.html.twig" %}
	</footer>
{% endblock %}