{#
    Documents Table Component
    Table view for document listing

    Required variables:
    - mediaList: Array of Media entities
    - company: Company entity
    - viewMode: Current view mode ('table' or 'grid')
    - selectedCategory: Selected category (optional)
#}

{% import 'admin/companies/documents/_macros.html.twig' as docs %}

{# View Mode Toggle + Stats - Desktop Only #}
<div class="hidden lg:flex items-center justify-between mb-6">
    <div class="text-sm text-gray-600">
        <span class="font-medium">{{ mediaList.getTotalItemCount }}</span> document(s) trouvé(s)
        {% if mediaList.getTotalItemCount > 0 %}
            <span class="text-gray-500">
                (page {{ mediaList.getCurrentPageNumber }} / {{ mediaList.getPageCount }})
            </span>
        {% endif %}
    </div>

    <div class="flex items-center space-x-2">
        <span class="text-sm font-medium text-gray-700 mr-2">Affichage:</span>
        <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'view': 'table'})) }}"
           class="inline-flex items-center px-3 py-2 border {{ viewMode == 'table' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-l-md transition-colors duration-150">
            <i class="fas fa-table mr-1.5"></i>
            Tableau
        </a>
        <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'view': 'grid'})) }}"
           class="inline-flex items-center px-3 py-2 border {{ viewMode == 'grid' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-r-md transition-colors duration-150">
            <i class="fas fa-th-large mr-1.5"></i>
            Grille
        </a>
    </div>
</div>

{# Desktop Table View #}
{% if viewMode == 'table' %}
<div class="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
    {% if mediaList is empty %}
        {# Empty State using macro #}
        {{ docs.empty_state(
            'fa-file-alt',
            'Aucun document disponible',
            selectedCategory ? 'Aucun document dans cette catégorie' : 'Commencez par téléverser un document pour cette entreprise',
            true,
            company
        ) }}
    {% else %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="w-12 px-6 py-3 text-left">
                            <input type="checkbox" id="select-all-documents"
                                   data-folder-explorer-target="selectAllCheckbox"
                                   data-action="change->folder-explorer#toggleSelectAll"
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded cursor-pointer">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Fichier
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Catégorie
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Tags
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Expiration
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Type
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Taille
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Téléversé par
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Date
                        </th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for media in mediaList %}
                        {% include 'admin/companies/documents/_document_table_row.html.twig' with {
                            'media': media,
                            'company': company
                        } only %}
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Pagination #}
        {% if mediaList.getTotalItemCount > 0 %}
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-center">
                {{ knp_pagination_render(mediaList, '@KnpPaginator/Pagination/tailwind_pagination.html.twig') }}
            </div>
        {% endif %}
    {% endif %}
</div>
{% endif %}