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

{% block main %}
  <div class="container-fluid my-4 px-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">
            <a href="/admin/users">Utilisateurs</a>
          </li>
          <li class="breadcrumb-item">
            <a href="/admin/users/{{ User.ID }}">{{ User.Name }}</a>
          </li>
          <li class="breadcrumb-item active">Permissions</li>
        </ol>
      </nav>
      <hr />
    </div>

    {% if Sections %}
      <form id="user" method="post" class="mw-1200">
        {% if Errors %}
          <div class="alert alert-danger">
            <ul class="m-0">
              {% for Error in Errors %}
                <li>{{ Error }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% for Section in Sections %}
          <div class="row mb-3">
            <div class="col-md-2 col-xl-3">{{ Section.Name }}</div>
            <div class="col">
              <div class="input-group">
                <span class="input-group-text">
                  <i class="bi-key"></i>
                </span>
                <select
                  class="form-select"
                  name="section-{{ Section.ID }}"
                  id="section-{{ Section.ID }}"
                  autocomplete="off"
                >
                  <option value="0">Choisir...</option>
                  {% for Role in Roles %}
                    <option
                      value="{{ Role.ID }}"
                      {% for UserRole in UserRoles %}
                        {% if Section.ID == UserRole.SectionID and Role.ID == UserRole.RoleID %}
                          selected
                        {% endif %}
                      {% endfor %}
                    >
                      {{ Role.Name }}
                    </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        {% endfor %}

        <div class="my-4">
          <button class="btn btn-outline-primary" type="submit">
            <i class="me-1 bi-floppy"></i>
            Enregistrer
          </button>
        </div>
      </form>
    {% else %}
      <div class="my-4">Pas de section pour le moment</div>
    {% endif %}
  </div>
{% endblock %}