{% extends "layouts/main.html" %}

{% block main %}
  <div class="container my-4">
    <div class="mb-4">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Accueil</a></li>
          <li class="breadcrumb-item"><a href="/admin">Administration</a></li>
          <li class="breadcrumb-item active">Utilisateurs</li>
        </ol>
      </nav>
      <hr />
    </div>

    <div class="my-3 text-end">
      <a class="btn btn-outline-primary" href="/admin/users/add">
        <i class="bi-plus-lg"></i>
        Ajouter
      </a>
    </div>

    {% if Users %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="w-50">Nom complet</th>
              <th class="w-25">Email</th>
              <th class="w-25">Administrateur</th>
            </tr>
          </thead>
          <tbody>
            {% for User in Users %}
              <tr>
                <td>
                  <span class="user-photo me-2">{{ User.Name|first }}</span>
                  <a href="/admin/users/{{ User.ID }}"> {{ User.Name }} </a>
                </td>
                <td>{{ User.Email }}</td>
                <td>
                  {% if User.IsAdmin %}
                    <i class="bi-check-lg text-success me-1"></i>
                    Oui
                  {% else %}
                    <i class="bi-x-lg text-danger me-1"></i>
                    Non
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="my-4">Pas d'utilisateurs pour le moment</div>
    {% endif %}
  </div>
{% endblock %}