{% block body %}
        {% if currentView == 'poster' %}
            <div
                class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
                {% for manga in mangas %}
                    <div
                        class="bg-white overflow-hidden border border-gray-200 hover:shadow-2xl hover:border-gray-400 transition-all duration-300 flex flex-col">
                        <a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
                           class="block relative w-full pb-[150%] overflow-hidden">
                            <img src="{{ manga.thumbnailUrl ?? 'https://placehold.co/150x220' }}"
                                 alt="{{ manga.title }}"
                                 class="absolute top-0 left-0 w-full h-full object-cover">
                        </a>
                        <div class="p-2 flex flex-col justify-between flex-grow">
                            <div>
                                <h3 class="text-sm font-semibold truncate">{{ manga.title }}</h3>
                                <p class="text-xs text-gray-500">{{ manga.publicationYear }}</p>
                            </div>
                            <p class="text-xs text-gray-400 mt-1">Added: {{ manga.createdAt|date('M d, Y') }}</p>
                        </div>
                    </div>
                {% else %}
                    <p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
                {% endfor %}
            </div>
        {% elseif currentView == 'resume' %}
            <div class="w-full p-4 space-y-4">
                {% for manga in mangas %}
                    <div
                        class="bg-white overflow-hidden border border-gray-200 hover:shadow-lg hover:border-gray-400 transition-all duration-300 flex">
                        <a class="flex flex-row" href="{{ path('app_manga_show', {'mangaSlug': manga.slug}) }}">
                            <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
                                 alt="{{ manga.title }}"
                                 class="w-32 h-48 object-cover">
                            <div class="p-4 flex flex-col justify-between flex-grow">
                                <div>
                                    <h3 class="text-lg font-semibold">{{ manga.title }}</h3>
                                    <p class="text-sm text-gray-500">{{ manga.publicationYear }}</p>
                                    <p class="text-sm text-gray-600 mt-2">{{ manga.description|truncate(350) }}</p>
                                </div>
                                <p class="text-xs text-gray-400 mt-2">
                                    Added: {{ manga.createdAt|date('M d, Y') }}</p>
                            </div>
                        </a>
                    </div>
                {% else %}
                    <p class="text-center text-gray-500">Aucun manga trouvé.</p>
                {% endfor %}
            </div>
        {% elseif currentView == 'table' %}
            <div class="p-4">
                <table class="min-w-full bg-white">
                    <thead>
                    <tr class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
                        <th class="py-3 px-6 text-left">Manga Title</th>
                        {#                    <th class="py-3 px-6 text-center">Volumes</th> #}
                        <th class="py-3 px-6 text-center">Chapters</th>
                    </tr>
                    </thead>
                    <tbody class="text-gray-600 text-sm">
                    {% for manga in mangas %}
                        <tr class="border-b border-gray-200 hover:bg-gray-100">
                            <td class="py-3 px-6 text-left whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="font-medium">{{ manga.title }}</span>
                                </div>
                            </td>
                            {#                        <td class="py-3 px-6 text-center"> #}
                            {#                            {{ manga.volumes|length }} #}
                            {#                        </td> #}
                            <td class="py-3 px-6 text-center">
                                {% set total_chapters = manga.chapters|length %}
                                {% set available_chapters = manga.chapters|filter(chapter => chapter.cbzPath is not null)|length %}
                                <div class="flex items-center justify-center">
                                    <div class="w-48 bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-blue-600 h-2.5 rounded-full"
                                             style="width: {{ (available_chapters / total_chapters * 100)|round }}%"></div>
                                    </div>
                                    <span class="ml-2">{{ available_chapters }} / {{ total_chapters }}</span>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="py-3 px-6 text-center">Aucun manga trouvé.</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
{% endblock %}