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

{% block body %}
  <main class="lg:pl-72" data-controller="feature--toggle-feature-status">
    <div class="xl:pr-96">
      <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
        <!-- Main content -->
        <div class="px-4 sm:px-6 lg:px-8">
          <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
              <h1 class="text-base font-semibold text-gray-900">
                Fonctionnalités
              </h1>
              <p class="mt-2 text-sm text-gray-700">
                Liste de toutes les fonctionnalités disponibles dans
                l'application.
              </p>
            </div>
          </div>
          <div class="mt-8 flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
              <div
                class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
              >
                <div class="group/table relative">
                  <div
                    class="absolute top-0 left-14 z-10 hidden h-12 items-center space-x-3 bg-white group-has-checked/table:flex sm:left-12"
                  >
                    <button
                      type="button"
                      class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
                    >
                      Activer
                    </button>
                    <button
                      type="button"
                      class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
                    >
                      Désactiver
                    </button>
                  </div>

                  <table
                    id="users-table"
                    class="relative min-w-full table-fixed divide-y divide-gray-300"
                  >
                    <thead>
                      <tr>
                        <th scope="col" class="relative px-7 sm:w-12 sm:px-6">
                          <div
                            class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
                          >
                            <input
                              type="checkbox"
                              class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-amber-600 checked:bg-amber-600 indeterminate:border-amber-600 indeterminate:bg-amber-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
                            />
                            <svg
                              viewBox="0 0 14 14"
                              fill="none"
                              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
                            >
                              <path
                                d="M3 8L6 11L11 3.5"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="opacity-0 group-has-checked:opacity-100"
                              />
                              <path
                                d="M3 7H11"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="opacity-0 group-has-indeterminate:opacity-100"
                              />
                            </svg>
                          </div>
                        </th>
                        <th
                          scope="col"
                          class="min-w-48 py-3.5 pr-3 text-left text-sm font-semibold text-gray-900"
                        >
                          Nom
                        </th>
                        <th
                          scope="col"
                          class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                        >
                          Statut
                        </th>
                        <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-3">
                          <span class="sr-only">Edit</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                      {% for feature in features %}
                        <tr class="group has-checked:bg-gray-50">
                          <td class="relative px-7 sm:w-12 sm:px-6">
                            <div
                              class="absolute inset-y-0 left-0 hidden w-0.5 bg-amber-600 group-has-checked:block"
                            ></div>

                            <div
                              class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
                            >
                              <input
                                type="checkbox"
                                class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-amber-600 checked:bg-amber-600 indeterminate:border-amber-600 indeterminate:bg-amber-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
                              />
                              <svg
                                viewBox="0 0 14 14"
                                fill="none"
                                class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
                              >
                                <path
                                  d="M3 8L6 11L11 3.5"
                                  stroke-width="2"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                  class="opacity-0 group-has-checked:opacity-100"
                                />
                                <path
                                  d="M3 7H11"
                                  stroke-width="2"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                  class="opacity-0 group-has-indeterminate:opacity-100"
                                />
                              </svg>
                            </div>
                          </td>
                          <td
                            class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-amber-600"
                          >
                            {{ feature.name }}
                          </td>
                          <td
                            class="px-3 py-4 text-sm whitespace-nowrap text-gray-500                             {{
                            feature.isActive
                              ? 'text-green-500'
                              : 'text-red-500'
                            }}
"
                          >
                            {{ feature.isActive ? 'Actif' : 'Inactif' }}
                          </td>
                          <td
                            class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
                          >
                            <a
                              href="#"
                              class="text-amber-600 hover:text-amber-900"
                            >
                              Modifier<span class="sr-only">, {{ feature.name }}</span>
                            </a>
                          </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <aside
    class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10"
  >
    <!-- Secondary column (hidden on smaller screens) -->
    <a
      href="{{ path('admin_news_add') }}"
      class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500"
    >
      Ajouter une fonctionnalité
    </a>
  </aside>
{% endblock %}