{% extends 'admin.html.twig' %}

{% block title %}Liste des utilisateurs{% endblock %}

{% block body %}


        <div class="row align-items-center justify-content-between border-bottom pb-4">
            <div class="col-7">
                <h2>Liste de tous les utilisateurs</h2>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
                <div class="col-2 text-md-right text-center">
                    <a class="btn btn-danger" href="{{ path('user_create')}}">Ajouter un utilisateur</a>
                </div>
            {% endif %}
        </div>

        <div class="row justify-content-start align-items-center text-center mt-3">
          <div>Filtrer par :</div>
          <div class="col-2 filtreRole" id="ROLE_FORMATEUR"><p class="m-0 text-center p-2 text-primary"><img class="w-25" src="{{ asset('images/professor.png') }}"><br>Formateur</p></div>
          <div class="col-2 filtreRole" id="ROLE_STAGIAIRE"><p class="m-0 text-center p-2 text-primary"><img class="w-25" src="{{ asset('images/pencil.png') }}"><br>Stagiaires</p></div>
          <div class="col-2 filtreRole" id="ROLE_ADMIN"><p class="m-0 text-center p-2 text-primary"><img class="w-25" src="{{ asset('images/administrator.png') }}"><br>Admin</p></div>
          <div class="col-2 filtreRole" id="ROLE_PENDING"><p class="m-0 text-center p-2 text-primary"><img class="w-25" src="{{ asset('images/anonymous.png') }}"><br>En attente</p></div>
        </div>

        <table class="table table-hover mt-4">
            <thead>
            <tr class="table-primary">
                <th scope="col">Nom</th>
                <th scope="col">Prénom</th>
                <th scope="col">Role</th>
                <th scope="col">Modifier</th>
                <th scope="col">Supprimer</th>
            </tr>
            </thead>
            <tbody>
              {% for user in users %}
              {% if user.roles[0] == "ROLE_PENDING" %}
                  <tr class="item bg-warning {{ user.roles[0] }}">
                      <td>{{ user.lastname }}</td>
                      <td>{{ user.firstname }}</td>
                      <td>{{ user.roles[0] }}</td>
                      <td><a class="btn btn-info" href="{{ path('user_edit', {id:user.id}) }}">Modifier</a></td>
                      <td><a class="delete" href="{{ path('user_delete', {id:user.id}) }}">Supprimer</a></td>
                  </tr>
                {% else %}
                  <tr class="item {% for role in user.roles %}{{ role }} {% endfor %}">
                      <td>{{ user.lastname }}</td>
                      <td>{{ user.firstname }}</td>
                      <td>{% for role in user.roles %}<small>{{ role }}</small> {% if not loop.last %}/{% endif %} {% endfor %}</td>
                      <td><a href="{{ path('user_edit', {id:user.id}) }}">Modifier</a></td>
                      <td><a class="delete" href="{{ path('user_delete', {id:user.id}) }}">Supprimer</a></td>
                  </tr>
                {% endif %}
              {% endfor %}
            </tbody>
          </table>

          <div class="modal fade" id="dialog-confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Supprimer ?</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    En supprimant, vous effacez tous les progrès et les informations relatives à cet utilisateur.
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" id="confirm" class="btn btn-primary">Supprimer</button>
                </div>
              </div>
            </div>
          </div>

{% endblock %}