{% extends 'base.html.twig' %}

{% block title %}Liste des catégories {{parent()}}{% endblock %}

{% block body %}
<div class="bg-gray-300 pt-4 pb-10">
    <div class="container-fluid mb-6">
    <h1 class="font-bold text-4xl lg:text-2xl text-center mb-4">Liste des catégories</h1>
    <div class="overflow-x-auto mx-14">
    <table class="table border-2 border-gray-200 text-center px-10 w-4/5 lg:mx-auto lg:w-5/6 bg-white">
        <thead class="bg-slate-950 text-white">
            <tr class="border justify-center">
                <th class="border text-4xl lg:text-base py-6 px-6">Nom</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Description</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Hiérarchie</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Image</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for category in categories %}
            <tr class="border justify-center">
                <td class="border text-4xl lg:text-base py-6 px-6">{{ category.name }}</td>
                <td class="border text-4xl lg:text-base py-6 px-6">{{ category.description }}</td>
                <td class="border text-4xl lg:text-base py-6 px-6">{{ category.hierarchy }}</td>
                <td class="border text-4xl lg:text-base py-6 px-6"><img src="{{ asset('images/categories/' ~ category.imageName) }}" alt="" class="w-auto max-h-72"></td>
                <td class="border text-4xl lg:text-base py-6 px-6">
                    <a href="{{ path('app_category_show', {'id': category.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-blue-500 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Voir</a>
                    <a href="{{ path('app_category_edit', {'id': category.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-orange-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Modifier</a>
                </td>
            </tr>
        {% else %}
            <tr class="border justify-center"></tr>>
            <td colspan="4" class="border text-4xl lg:text-base py-6 px-6">Pas de catégorie trouvée</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
    </div>
</div>
{% endblock %}