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

{% block content %}

<div class="row center" id="menu_item_container" style="padding: 6%; ">
  <div class="form-group col-3" style="margin: auto; ">
    <label for="sdum">SDUM</label>
    <select class="form-control" id="sdum">
      <option value="">Toutes</option>
      {% for sdum in sdums|sort %}
        <option value="{{ sdum.nom }}">{{ sdum.nom }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="form-group col-3" style="margin: auto; ">
    <label for="bo">Base Opérationnelle</label>
    <select class="form-control" id="bo">
      <option value="9">Toutes</option>
      {% for bo in bos|sort %}
        <option value="{{ bo.bo_id }}" sdum="{{ bo.sdum }}">{{ bo.bo_nom }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="form-group col-3" style="margin: auto; ">
    <label for="year">Année</label>
    <select class="form-control" id="year">
      <option value="" selected>Toutes</option>
    </select>
  </div>
</div>
<div style="margin-left: 35px; " class='row'>
  <a id="graph_toggle" class="waves-effect waves-light btn">Afficher/Masquer les graphiques</a>
  <h6 style="font-style: italic; margin-left: 15px; margin-top: 10px; ">=> Cliquer sur un graphique en forme de donut pour afficher la liste des chantiers correspondants</h6>
</div>
<div id='div_graph'></div>

<div id="modal_div">
  {% include "app/modal_click.html.twig" %}
</div>

{% endblock %}