{% extends 'base.html.twig' %}
{% block toolbar %}
    {% if toolbar %}
        <twig:Toolbar toolbar="{{ toolbar }}"/>
    {% endif %}
{% endblock %}
{% block body %}
    {% if currentView == 'poster' %}
        {# Vue poster actuelle #}
        <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.imageUrl ?? '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' %}
        {# Vue résumé #}
        <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">
                    <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(200) }}</p>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Added: {{ manga.createdAt|date('M d, Y') }}</p>
                    </div>
                </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 %}