Init project

templates/news/edit.html.twig

@@ -0,0 +1,79 @@
+{% 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--edit-image-selector"
+        data-news--edit-image-selector-target="container"
+      >
+        <!-- Main Area -->
+
+        {{ form_start(form) }}
+        {{ form_widget(form) }}
+
+        <div class="mt-4">
+          <button
+            command="show-modal"
+            commandfor="edit-news-image-dialog"
+            type="button"
+            class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
+          >
+            Modifier les images
+          </button>
+          <span
+            data-news--edit-image-selector-target="count"
+            class="text-sm text-gray-700 dark:text-gray-300"
+          >
+            0 sélectionnée(s)
+          </span>
+        </div>
+
+        <!-- Conteneur des inputs cachés gérés par Stimulus -->
+        <div id="hidden-inputs-container">
+          {% for img in selectedImages %}
+            <input type="hidden" name="selectedImages[]" value="{{ img.id }}" />
+          {% endfor %}
+        </div>
+
+        <!-- Zone de preview -->
+        <div
+          id="selected-images-preview"
+          data-news--edit-image-selector-target="preview"
+          class="mt-4 flex gap-3 flex-wrap"
+        >
+          {% for img in selectedImages %}
+            <img
+              src="{{ asset(img.url) }}"
+              data-id="{{ img.id }}"
+              class="w-20 h-20 rounded object-cover cursor-move"
+            />
+          {% endfor %}
+        </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/edit-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 %}