{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <h1 class="text-xl sm:text-2xl font-bold"><i class="fas fa-folder-tree mr-2"></i>{{ page_title }}</h1>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# List #}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-500">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                            <tr>
                                <th class="px-4 py-3">Nom</th>
                                <th class="px-4 py-3">Couleur</th>
                                <th class="px-4 py-3">Équipements</th>
                                <th class="px-4 py-3">Statut</th>
                                <th class="px-4 py-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for cat in categories %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <span class="font-medium text-gray-900">{% for i in 1..cat.depth %}— {% endfor %}{{ cat.name }}</span>
                                    {% if cat.description %}<br><span class="text-xs text-gray-500">{{ cat.description|length > 60 ? cat.description|slice(0, 60) ~ '...' : cat.description }}</span>{% endif %}
                                </td>
                                <td class="px-4 py-3"><span class="bg-{{ cat.color }}-100 text-{{ cat.color }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ cat.color }}</span></td>
                                <td class="px-4 py-3">{{ cat.equipmentCount }}</td>
                                <td class="px-4 py-3">
                                    {% if cat.isActive %}
                                        <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded">Actif</span>
                                    {% else %}
                                        <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded">Inactif</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-2">
                                        <a href="{{ path('manager_equipment_categories_edit', {id: cat.id}) }}" class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></a>
                                        <form method="post" action="{{ path('manager_equipment_categories_delete', {id: cat.id}) }}" data-controller="equipment-workflow" data-action="submit->equipment-workflow#confirm" data-equipment-workflow-confirm-param="Supprimer cette catégorie ?" class="inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_category_' ~ cat.id) }}">
                                            <button type="submit" class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% else %}
                            <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">Aucune catégorie</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if categories.getTotalItemCount is defined and categories.getTotalItemCount > 0 %}
                <div class="px-4 py-3 border-t">{{ knp_pagination_render(categories) }}</div>
                {% endif %}
            </div>
        </div>

        {# Create Form #}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4"><i class="fas fa-plus text-teal-600 mr-2"></i>Nouvelle catégorie</h3>
                {{ form(createForm) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}