{% extends 'base.html.twig' %}
{% block toolbar %}
    <div class="bg-gray-800 p-3 min-h-14">
        <div class="flex flex-row items-center justify-between">
            <div class="flex mr-2 items-center">
                <twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
                <twig:ToolBarButton icon="search" text="Rechercher le manga"/>
                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
                <twig:ToolBarButton icon="sitemap" text="Aperçu renommage"/>
                <twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
                <twig:ToolBarButton icon="wrench" text="Éditer"/>
                <twig:ToolBarButton icon="trash-can" text="Supprimer"/>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
{#    TODO styliser cette page #}
    <table class="min-w-full bg-white">
        <thead class="bg-gray-800 text-white">
        <tr>
            <th class="w-1/12 py-2 px-4">
                <input type="checkbox">
            </th>
            <th class="w-2/12 py-2 px-4 text-left">Manga</th>
            <th class="w-1/12 py-2 px-4 text-left">Volume</th>
            <th class="w-4/12 py-2 px-4 text-left">Chapter</th>
            <th class="w-1/12 py-2 px-4 text-left">Title</th>
            <th class="w-1/12 py-2 px-4 text-left">Actions</th>

            <th class="w-1/12 py-2 px-4"></th>
        </tr>
        </thead>
        <tbody class="text-gray-700">
        {% for manga in status %}
            <tr class="border-b">
                <td class="py-2 px-4 text-center">
                    <input type="checkbox">
                </td>
                <td class="py-2 px-4">{{ manga.manga }}</td>
                <td class="py-2 px-4">{{ manga.volume }}</td>
                <td class="py-2 px-4">{{ manga.chapter }}</td>
                <td class="py-2 px-4">{{ manga.title }}</td>
                <td class="py-2 px-4 text-center">
                    <button class="text-red-500 hover:text-red-700">&times;</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="mt-4">
        <span>Total records: {{ status|length }}</span>
    </div>
{% endblock %}