{% extends '@App/partials/base.html.twig' %}

{% block content %}

      <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h4 class="mb-4 mb-sm-0 card-title">Rôles utilisateurs</h4>
                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        <a class="btn btn-light" href="{{ path('role_add') }}" data-turbo-frame="modal-frame">
                          Ajouter un rôle
                        </a>
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <ul class="nav nav-pills mb-4" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#roles-tab" type="button" role="tab">
                    Rôles
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" data-bs-toggle="pill" data-bs-target="#permissions-tab" type="button" role="tab">
                    Permissions
                  </button>
                </li>
              </ul>

              <div class="tab-content">
                <div class="tab-pane fade show active" id="roles-tab" role="tabpanel">
                  <turbo-frame id="role-table" src="{{ path('role_turbo_table') }}" loading="lazy" data-prefetch-frame>
                    Chargement des rôles...
                  </turbo-frame>
                </div>
                <div class="tab-pane fade" id="permissions-tab" role="tabpanel">
                  <div class="row g-4">
                    <div class="col-lg-7">
                      <turbo-frame id="permission-table" src="{{ path('permission_turbo_table') }}" loading="lazy" data-prefetch-frame>
                        Chargement des permissions...
                      </turbo-frame>
                    </div>
                    <div class="col-lg-5">
                      <turbo-frame id="permission-form" src="{{ path('permission_form') }}" loading="lazy" data-prefetch-frame>
                        Chargement du formulaire...
                      </turbo-frame>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

{% endblock %}