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

{% block page_title %}Catégories POS{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-tags mr-3"></i>Catégories</h1>
                <p class="mt-2 text-emerald-100">Organisation du catalogue produits</p>
            </div>
            <a href="{{ path('manager_pos_categories_create') }}" class="inline-flex items-center px-4 py-2 bg-white text-emerald-700 rounded-lg font-medium text-sm hover:bg-emerald-50 transition-colors">
                <i class="fas fa-plus mr-2"></i>Nouvelle catégorie
            </a>
        </div>
    </div>

    {% if tree|length > 0 %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {% for category in tree %}
            {% include 'manager/pos/categories/_category_item.html.twig' with {'category': category, 'level': 0} %}
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow text-center py-16">
        <i class="fas fa-tags text-5xl text-gray-300 dark:text-gray-600"></i>
        <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">Aucune catégorie</h3>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Créez des catégories pour organiser vos produits.</p>
        <a href="{{ path('manager_pos_categories_create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700">
            <i class="fas fa-plus mr-2"></i>Créer une catégorie
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}