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

templates/components/AddMangaModal.html.twig

@@ -0,0 +1,12 @@
+{# templates/components/manga_modal.html.twig #}
+<div id="manga-modal" style="display: {{ manga ? 'block' : 'none' }};">
+    <div class="modal-content">
+        <span class="close-button" data-action="live#action" data-live-action-param="close">&times;</span>
+        {% if manga %}
+            <h2>{{ manga.title }}</h2>
+            <p><strong>Year:</strong> {{ manga.publicationYear }}</p>
+            <p>{{ manga.description }}</p>
+            <button data-action="live#action" data-live-action-param="saveManga">Save Manga</button>
+        {% endif %}
+    </div>
+</div>

templates/components/BootstrapModal.html.twig

@@ -0,0 +1,33 @@
+<div {{ attributes.defaults({
+    class: 'modal fade',
+    tabindex: '-1',
+    'aria-hidden': 'true',
+    id: id ? id : false,
+}) }}
+    data-controller="bootstrap-modal"
+>
+    <div class="fixed top-0 left-0 w-full h-full outline-none" tabindex="-1" role="dialog">
+        <div class="modal-dialog relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0"
+             role="document">
+            <div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-sm">
+                <div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
+                    <div class="modal-header w-full">
+                        {% block modal_header %}{% endblock %}
+                    </div>
+                </div>
+                <div class="relative flex p-4">
+                    <div class="modal-body">
+                        {% block modal_body %}{% endblock %}
+                    </div>
+                </div>
+                <div class="flex items-center justify-end p-4 border-t border-gray-300">
+                    {% if block('modal_footer') %}
+                        <div class="modal-footer">
+                            {% block modal_footer %}{% endblock %}
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/components/DownloadChapter.html.twig

@@ -0,0 +1,5 @@
+<div{{ attributes }}>
+    <a href="#" class="text-gray-500 hover:text-green-500">
+        <i class="fas fa-search"></i>
+    </a>
+</div>

templates/components/MangaSearch.html.twig

@@ -0,0 +1,65 @@
+{# templates/components/MangaSearch.html.twig #}
+
+<div {{ attributes }}>
+    <div class="w-full mx-auto">
+        <div data-controller="search">
+            <div class="flex items-center border border-gray-300 rounded bg-white">
+            <span class="flex items-center justify-center w-10 h-10 text-gray-500">
+                <i class="fas fa-search"></i>
+            </span>
+                <input data-search-target="input"
+                       data-model="debounce(500)|query" type="text"
+                       placeholder="eg. Naruto, Bleach, One Piece"
+                       class="w-full py-2 px-3 bg-green-50 border-none focus:outline-none focus:bg-white focus:border focus:border-green-200">
+                <button data-action="click->search#clearSearch"
+                        class="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-200">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    {% if this.mangas %}
+        <div data-loading="addClass(opacity-50)" class="mt-3">
+            {% for manga in this.mangas %}
+                <div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50" data-bs-toggle="modal"
+                     data-bs-target="#mangaModal{{ loop.index }}-{{ manga.slug }}">
+                    <a href="#" class="flex-none w-48 relative">
+                        <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
+                             class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
+                    </a>
+                    <div class="w-full p-4 flex flex-col justify-between leading-normal">
+                        <div class="mb-2">
+                            <div class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
+                                <div class="flex items-center">
+                                    <span>{{ manga.title }}</span>
+                                    <span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
+                                </div>
+                                <a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}"
+                                   class="text-gray-400 hover:text-gray-500">
+                                    <i class="fas fa-external-link-alt"></i>
+                                </a>
+                            </div>
+                            {% for genre in manga.genres %}
+                                <span
+                                    class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                {{ genre }}
+                            </span>
+                            {% endfor %}
+                        </div>
+                        <div class="mb-2">
+                            <p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-600 text-sm mr-2">
+                                <i class="fas fa-star text-yellow-500"></i>
+                                {{ manga.rating }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                {{ component('NewMangaForm', {manga: manga, index: loop.index}) }}
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>

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>

templates/components/Search.html.twig

@@ -0,0 +1,37 @@
+<div{{ attributes }}>
+    <div class="flex items-center py">
+        <i class="fas fa-search text-white"></i>
+        <input
+            data-model="query"
+            type="text"
+            placeholder="Rechercher"
+            class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
+        />
+    </div>
+
+    {% if query %}
+        <div id="searchResults" class="fixed min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto">
+            <ul class="bg-gray-700 text-white">
+                {% if this.mangas is not empty %}
+                    <li class="px-4 py-2 text-gray-400">Mangas existants</li>
+                    {% for manga in this.mangas %}
+                        <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
+                            <a class="flex items-center" href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
+                                <img src="{{ manga.imageUrl ?? 'https://placehold.co/40x60' }}" alt="{{ manga.title }}"
+                                     class="w-10 h-15 object-cover mr-4">
+                                <span>{{ manga.title }} ({{ manga.publicationYear }})</span>
+                            </a>
+                        </li>
+                    {% endfor %}
+                {% else %}
+                    <li class="px-4 py-2 text-gray-400">Aucun manga trouvé.</li>
+                    <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
+                        <a class="flex items-center" href="{{ path('add_new_manga', {query: query}) }}">
+                            <span>Ajouter {{ query }}</span>
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    {% endif %}
+</div>

templates/components/ToolBarButton.html.twig

@@ -0,0 +1,6 @@
+<div{{ attributes }}>
+    <button class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group">
+        <i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
+        <span class="text-xs">{{ text }}</span>
+    </button>
+</div>