{% extends 'base_admin.html.twig' %}
{% block body %}
  <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="news--image-selector"
        data-image-selector-target="container"
      >
        {% 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 %}

        {{ form_start(form) }}
        {{ form_widget(form) }}

        <div class="mt-4">
          <button
            command="show-modal"
            commandfor="dialog"
            type="button"
            class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
          >
            Ajouter des images
          </button>
          <span
            data-news--image-selector-target="count"
            class="text-sm text-gray-700 dark:text-gray-300"
          >
            0 sélectionnée(s)
          </span>
        </div>

        <div
          id="selected-images-preview"
          data-news--image-selector-target="preview"
          class="mt-4 flex gap-3 flex-wrap"
        ></div>

        <div class="mt-4">
          <button
            type="submit"
            class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
          >
            Enregistrer l'actualité
          </button>
        </div>
        {{ form_end(form) }}
        {% include 'component/add-images-modal.html.twig' %}
      </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_index') }}"
      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"
    >
      Retour
    </a>
  </aside>
{% endblock %}