{% extends 'base.html.twig' %}
{% block toolbar %}
    {% set left_group %}
        <twig:ToolBarButton icon="sync-alt" text="Tout actualiser" action="refresh"/>
        <twig:ToolBarButton icon="rss" text="Synchro RSS" action="syncRss"/>
        <twig:Divider/>
        <twig:ToolBarButton icon="search" text="Rechercher tout" action="search"/>
        <twig:ToolBarButton icon="user-plus" text="Importation manuelle" action="import"/>
        <twig:Divider/>
        <twig:ToolBarButton icon="wrench" text="Modifier Mangas" action="editMangas"/>

    {% endset %}

    {% set right_group %}
        <twig:ToolBarButton icon="th-large" text="Options" action="showOptions"/>
        <twig:DropdownMenu
            icon="eye"
            text="Vue"
            items="{{ toolbarItems.viewOptions }}"
        />
        <twig:Divider/>
        <twig:DropdownMenu
            icon="sort"
            text="Trier"
            items="{{ toolbarItems.sortItems }}"
        />
        <twig:DropdownMenu
            icon="filter"
            text="Filtre"
            items="{{ toolbarItems.filterItems }}"
        />
    {% endset %}

    <twig:Toolbar
        left_group="{{ left_group }}"
        right_group="{{ right_group }}"
        data-action="click@window->toolbar#clickOutside"
    />
{% endblock %}
{% block body %}
    <div class="container mx-auto mt-2">
        <div class="bg-white overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                    <thead>
                    <tr class="bg-gray-800 text-white">
                        <th class="w-1/12 py-3 px-4 text-left">
                            <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600">
                        </th>
                        <th class="w-2/12 py-3 px-4 text-left">Manga</th>
                        <th class="w-1/12 py-3 px-4 text-left">Volume</th>
                        <th class="w-3/12 py-3 px-4 text-left">Chapitre</th>
                        <th class="w-3/12 py-3 px-4 text-left">Titre</th>
                        <th class="w-2/12 py-3 px-4 text-left">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="text-gray-700">
                    {% for manga in status %}
                        <tr class="border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out">
                            <td class="py-4 px-4 text-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600">
                            </td>
                            <td class="py-4 px-4 font-medium">{{ manga.manga }}</td>
                            <td class="py-4 px-4">{{ manga.volume }}</td>
                            <td class="py-4 px-4">{{ manga.chapter }}</td>
                            <td class="py-4 px-4">{{ manga.title }}</td>
                            <td class="py-4 px-4">
                                <button class="text-red-500 hover:text-red-700 transition duration-150 ease-in-out">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="py-4 px-4 text-center text-gray-500">Aucune activité en cours.</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

{#        <div class="mt-6 ml-4 flex justify-between items-center">#}
{#            <span class="text-sm text-gray-600">Total des enregistrements: {{ status|length }}</span>#}
{#        </div>#}
    </div>
{% endblock %}