{% extends 'base_admin.html.twig' %}
{% block body %}
  <div data-controller="image--delete-img-modal">
    <main class="lg:pl-72">
      <div class="xl:pr-96">
        <div
          class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6"
          data-controller="component--loader-progress-bar"
        >
          <!-- Main area -->
          {% for message in app.flashes('error') %}
            <div class="mb-4 rounded-md bg-red-50 p-4">
              <div class="flex">
                <div class="shrink-0">
                  <svg
                    class="size-5 text-red-400"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewbox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
                    />
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="text-sm font-medium text-red-800">
                    {{ message }}
                  </p>
                </div>
              </div>
            </div>
          {% endfor %}
          {% if images is empty %}
            <div class="text-center mt-60">
              <svg
                viewbox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                aria-hidden="true"
                class="mx-auto size-12 text-gray-400"
              >
                <path
                  d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
                  stroke-width="2"
                  vector-effect="non-scaling-stroke"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <h3 class="mt-2 text-sm font-semibold text-gray-900">
                Pas d'image
              </h3>
              <p class="mt-1 text-sm text-gray-500">
                Commencez par ajouter une nouvelle image.
              </p>
              <div class="mt-6">
                <a
                  class="inline-flex items-center rounded-md bg-amber-600 px-3 py-2 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"
                  href="{{ path('admin_image_add') }}"
                >
                  Ajouter des images
                </a>
              </div>
            </div>
          {% else %}
            {% include 'component/loader-progress-bar.html.twig' %}
            <div
              data-component--loader-progress-bar-target="imagesWrapper"
              style="opacity:0;"
            >
              <ul
                role="list"
                data-component--loader-progress-bar-target="list"
                class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
              >
                {% for image in images %}
                  <li class="relative">
                    <div
                      class="group relative overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
                    >
                      <img
                        src="{{ image.url }}"
                        alt=""
                        class="pointer-events-none aspect-10/7 rounded-lg object-cover outline -outline-offset-1 outline-black/5 dark:outline-white/10"
                      />

                      <!-- BANDEAU visible au hover -->
                      <div
                        class="absolute top-0 left-0 right-0 bg-black/50 h-10 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-end px-2 pointer-events-auto"
                      >
                        <button
                          type="button"
                          data-action="image--delete-img-modal#open"
                          data-url="{{
                          path(
                            'admin_image_delete',
                            {
                              id: image.id
                            }
                          )
                          }}"
                          data-token="{{
                          csrf_token(
                            'delete_image' ~ image.id
                          )
                          }}"
                          class="p-1 rounded hover:bg-white/20 transition text-amber-600"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="size-5"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>

                    <p
                      class="mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white"
                    >
                      {{ image.name }}
                    </p>
                    <p
                      class="block text-sm font-medium text-gray-500 dark:text-gray-400"
                    >
                      {{ (image.size / 1024 / 1024)|number_format(2) }}
                      MB
                    </p>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </div>
      </div>
      {% include 'component/confirm-delete-image.html.twig' %}
    </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_image_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 des images
      </a>
    </aside>
  </div>
{% endblock %}