{% extends templateTwigParent %}
{% set numeroModal = 0 %}
{% block titreContenu %}Liste des activités{% endblock %}


{% block contenu%}
</br>
<div class="col-lg-12">
  <div class="card">        
    <div class="card-body">
      <div class="table-responsive">   
          
          <table class="table table-striped table-sm">
              <thead>
                  <tr>
                      <th>code</th>
                      <th>libellé</th>                           
                  </tr>
              </thead>
              <tbody>
                {% for a in activites %}
                <tr>                                        
                    <th><a href scope="row" data-toggle="modal" data-target="#modalMatiere{{numeroModal}}">{{a.code}}</a></th>
                    <td>{{a.libelle}}</td>                              
              </tr> 

              <!-- Modal Competences -->
                              <div class="modal fade" id="modalMatiere{{numeroModal}}" tabindex="-1" role="dialog" aria-labelledby="modalMatiere" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title">{{a.code}} : {{a.libelle}} </h5>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <div class="modal-body">
                                      <ul>
                                        {% for competence in a.competences  %}
                                          <li>{{competence.libelle}}</li>
                                          <div class="mt-2" />
                                        {% endfor %}
                                      </ul>
                                    </div>
                                    <div class="modal-footer">
                                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              {% set numeroModal = numeroModal + 1 %}         
              {% endfor %}
              </tbody>
          </table>
      </div>
    </div>
  </div>
</div>


{% endblock %}