{#
    Category Filter Chips Component
    Displays category filter buttons for document filtering

    Required variables:
    - company: Company entity
    - categories: Array of DocumentCategory entities
    - selectedCategory: Currently selected category ID (or 'none')
#}

{% if categories is not empty %}
    <div class="mb-6 bg-white shadow rounded-lg p-4">
        <div class="flex items-center gap-2 flex-wrap">
            <span class="text-sm font-medium text-gray-700">Filtrer par catégorie :</span>
            <a href="{{ path('admin_companies_documents', {id: company.id}) }}"
               class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                      {% if selectedCategory is empty %}bg-indigo-100 text-indigo-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                <i class="fas fa-th mr-1.5"></i>
                Toutes
            </a>
            {% for category in categories %}
                <a href="{{ path('admin_companies_documents', {id: company.id, category: category.id}) }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                          {% if selectedCategory == category.id %}{{ category.badgeColorClass }}{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    <i class="fas {{ category.icon }} mr-1.5"></i>
                    {{ category.name }}
                </a>
            {% endfor %}
            <a href="{{ path('admin_companies_documents', {id: company.id, category: 'none'}) }}"
               class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                      {% if selectedCategory == 'none' %}bg-gray-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                <i class="fas fa-ban mr-1.5"></i>
                Sans catégorie
            </a>
        </div>
    </div>
{% endif %}