{#
    Component: Company Tabs Navigation
    Description: Horizontal tabs navigation for company detail pages

    Parameters:
        - company (required): Company entity
        - active_tab (required): Current active tab ('informations', 'employees', 'documents')
#}

<div class="mb-6">
    <div class="border-b border-gray-200 dark:border-gray-700">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
            {# Tab: Informations #}
            <li class="mr-2">
                <a href="{{ path('admin_companies_show', {id: company.id}) }}"
                   class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group {{ active_tab == 'informations' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}">
                    <i class="fa-solid fa-info-circle mr-2"></i>
                    Informations
                </a>
            </li>

            {# Tab: Employés (Admin/Manager only) #}
            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER') %}
            <li class="mr-2">
                <a href="{{ path('admin_companies_employees', {id: company.id}) }}"
                   class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group {{ active_tab == 'employees' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}">
                    <i class="fa-solid fa-users mr-2"></i>
                    Employés
                    {% if company.userCompanies|length > 0 %}
                        <span class="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full {{ active_tab == 'employees' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
                            {{ company.userCompanies|length }}
                        </span>
                    {% endif %}
                </a>
            </li>
            {% endif %}

            {# Tab: Documents #}
            <li class="mr-2">
                <a href="{{ path('admin_companies_documents', {id: company.id}) }}"
                   class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group {{ active_tab == 'documents' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}">
                    <i class="fa-solid fa-file-alt mr-2"></i>
                    Documents
                    {# TODO: Add document count badge once Media relation is implemented #}
                </a>
            </li>
        </ul>
    </div>
</div>