{#
    Documents Grid Component
    Grid view for document listing (desktop and mobile)

    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 %}

{# Desktop Grid View #}
{% if viewMode == 'grid' %}
    <div class="hidden lg:block">
        {% if mediaList is empty %}
            {{ 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 %}
            {# Select All Checkbox #}
            <div class="mb-4 flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200">
                <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">
                <label for="select-all-documents" class="ml-2 text-sm font-medium text-gray-700 cursor-pointer">
                    Tout sélectionner
                </label>
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {% for media in mediaList %}
                    {% include 'admin/companies/documents/_document_grid_card.html.twig' with {media: media, company: company} %}
                {% endfor %}
            </div>

            {# Pagination #}
            {% if mediaList.getTotalItemCount > 0 %}
                <div class="mt-8 flex items-center justify-center">
                    {{ knp_pagination_render(mediaList, '@KnpPaginator/Pagination/tailwind_pagination.html.twig') }}
                </div>
            {% endif %}
        {% endif %}
    </div>
{% endif %}

{# Mobile Card View (Always visible on mobile) #}
<div class="lg:hidden">
    {% if mediaList is empty %}
        {{ docs.empty_state(
            'fa-file-alt',
            'Aucun document disponible',
            'Commencez par téléverser un document',
            true,
            company
        ) }}
    {% else %}
        <div class="grid grid-cols-1 gap-4">
            {% for media in mediaList %}
                {% include 'admin/companies/documents/_document_grid_card.html.twig' with {media: media, company: company} %}
            {% endfor %}
        </div>

        {# Pagination Mobile #}
        {% if mediaList.getTotalItemCount > 0 %}
            <div class="mt-6 flex items-center justify-center">
                {{ knp_pagination_render(mediaList, '@KnpPaginator/Pagination/tailwind_pagination.html.twig') }}
            </div>
        {% endif %}
    {% endif %}
</div>