- trop de trucs d'un coup... je vais faire attention ensuite ^^'

templates/components/NewMangaForm.html.twig

@@ -0,0 +1,40 @@
+<div {{ attributes }}>
+    {% component BootstrapModal with {id: 'mangaModal' ~ index ~ '-' ~ manga.slug } %}
+        {% block modal_header %}
+            <div class="flex justify-between">
+                <h5 class="modal-title text-lg font-bold">{{ manga.title }} <span
+                        class="text-md font-normal text-gray-500">({{ manga.publicationYear }})</span></h5>
+                <button type="button" class="btn-close text-black hover:text-gray-500"
+                        data-bs-dismiss="modal" aria-label="Close">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        {% endblock %}
+        {% block modal_body %}
+            <form id="{{ 'form' ~ index }}" data-action="live#action:prevent" data-live-action-param="saveManga">
+            <div class="flex justify-between">
+                <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
+                     alt="{{ manga.title }}"
+                     class="img-fluid mb-2"
+                     style="width: 150px; height: 220px;"
+                >
+                <div class="ml-4">
+                    <p>{{ manga.description }}</p>
+                    <p><strong>Année de publication:</strong> {{ manga.publicationYear }}</p>
+                    <p><strong>Genres:</strong> {{ manga.genres|join(', ') }}</p>
+                    <p><strong>Note:</strong> {{ manga.rating }}</p>
+                </div>
+            </div>
+            </form>
+        {% endblock %}
+
+        {% block modal_footer %}
+            <button
+                type="submit"
+                form="{{ 'form' ~ index }}"
+                class="bg-green-500 hover:bg-green-600 text-sm text-white font-bold py-2 px-4 rounded">
+                Add {{ manga.title }}
+            </button>
+        {% endblock %}
+    {% endcomponent %}
+</div>