{# templates/_shared/document/_list_items.html.twig #}

<div class="row g-3">
    {% for doc in documents %}
        <div class="col-md-4 doc-item-container" id="doc-card-{{ doc.id }}">
            <div class="card h-100 border shadow-sm position-relative hover-shadow">
                
                {# Bouton Supprimer en overlay #}
                <button type="button" 
                        class="btn btn-sm btn-light text-danger position-absolute top-0 end-0 m-1 shadow-sm btn-delete-doc" 
                        data-url="{{ path('shared_doc_delete', {id: doc.id}) }}"
                        data-id="{{ doc.id }}"
                        title="Supprimer">
                    <i class="fas fa-trash-alt"></i>
                </button>

                <div class="card-body p-2">
                    <div class="d-flex align-items-center mb-2">
                        {# Icône dynamique selon l'extension ou le type #}
                        <div class="me-2">
                            {% set extension = doc.nomDocument|split('.')|last|lower %}
                            {% if doc.typeMedia == 'IMAGE' or extension in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                <i class="fas fa-file-image fa-2x text-success"></i>
                            {% elseif extension == 'pdf' or doc.typeMedia == 'PDF' %}
                                <i class="fas fa-file-pdf fa-2x text-danger"></i>
                            {% elseif extension in ['doc', 'docx'] %}
                                <i class="fas fa-file-word fa-2x text-primary"></i>
                            {% elseif extension in ['xls', 'xlsx', 'csv'] %}
                                <i class="fas fa-file-excel fa-2x text-success"></i>
                            {% else %}
                                <i class="fas fa-file-alt fa-2x text-secondary"></i>
                            {% endif %}
                        </div>

                        <div class="overflow-hidden">
                            <div class="text-truncate small fw-bold" title="{{ doc.nomDocument }}">
                                {{ doc.nomDocument }}
                            </div>
                            {# Badge du niveau d'accès #}
                            {% if doc.niveauAccess %}
                                <span class="badge bg-light text-muted border" style="font-size: 0.65rem;">
                                    <i class="fas fa-eye me-1"></i>{{ doc.niveauAccess.libelle }}
                                </span>
                            {% endif %}
                            <div class="text-muted" style="font-size: 0.6rem;">
                                {{ (doc.tailleOctet / 1024)|number_format(1) }} KB
                            </div>
                        </div>
                    </div>

                    <div class="d-grid mt-1">
                        {# MISE À JOUR : Chemin pointant vers uploads/documents #}
                        <a href="{{ asset('uploads/documents/' ~ doc.fichierUrl) }}" 
                           target="_blank" 
                           class="btn btn-xs btn-outline-secondary py-0 small" 
                           style="font-size: 0.75rem;">
                            <i class="fas fa-external-link-alt me-1"></i> Voir / Télécharger
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="col-12 text-center py-5">
            <div class="text-muted">
                <i class="fas fa-folder-open fa-3x mb-3 opacity-25"></i>
                <p>Aucun document pour le moment.</p>
            </div>
        </div>
    {% endfor %}
</div>

{# Bloc de Pagination AJAX #}
{% if documents.haveToPaginate is defined and documents.haveToPaginate %}
    <div class="mt-4 d-flex justify-content-center" id="doc-pagination">
        {{ knp_pagination_render(documents) }}
    </div>
{% elseif documents.totalItemCount is defined and documents.totalItemCount > 9 %}
     <div class="mt-4 d-flex justify-content-center" id="doc-pagination">
        {{ knp_pagination_render(documents) }}
    </div>
{% endif %}

<style>
    .hover-shadow:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        transition: all 0.2s ease-in-out;
    }
    .btn-xs {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
    .doc-item-container {
        transition: opacity 0.3s ease;
    }
</style>