{#
    Tag Filter Chips Component
    Displays tag filter buttons for document filtering

    Required variables:
    - company: Company entity
    - allTags: Array of Tag entities
    - selectedTag: Currently selected tag ID
#}

{% if allTags is defined and allTags 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">
                <i class="fas fa-tags mr-1"></i>
                Filtrer par tag :
            </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 selectedTag 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>
                Tous les tags
            </a>
            {% for tag in allTags %}
                <a href="{{ path('admin_companies_documents', {id: company.id, tag: tag.id}) }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                          {% if selectedTag == tag.id %}{{ tag.badgeColorClass }}{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    {% if tag.icon %}
                        <i class="fas {{ tag.icon }} mr-1.5"></i>
                    {% endif %}
                    {{ tag.name }}
                </a>
            {% endfor %}
            <button type="button"
                    onclick="document.getElementById('manageTagsModal').classList.remove('hidden')"
                    class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-gray-200 text-gray-800 hover:bg-gray-300">
                <i class="fas fa-cog mr-1.5"></i>
                Gérer les tags
            </button>
        </div>
    </div>
{% endif %}