{# templates/commercial/portefeuille/tabs/document/index.html.twig #}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">Pièces jointes au dossier</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalUploadDoc">
            <i class="fas fa-plus fa-sm me-1"></i> Ajouter un document
        </button>
    </div>
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="bg-light small">
                <tr>
                    <th class="ps-3">Nom du document</th>
                    <th>Cible</th>
                    <th>Taille</th>
                    <th>Date d'ajout</th>
                    <th class="text-end pe-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                {# Utilisation de la variable 'documents' envoyée par le contrôleur #}
                {% for doc in documents %}
                <tr class="small">
                    <td class="ps-3">
                        {% if doc.extension|lower == 'pdf' %}
                            <i class="fas fa-file-pdf text-danger me-2 fa-lg"></i>
                        {% elseif doc.extension|lower in ['jpg', 'jpeg', 'png'] %}
                            <i class="fas fa-file-image text-info me-2 fa-lg"></i>
                        {% else %}
                            <i class="fas fa-file-alt text-secondary me-2 fa-lg"></i>
                        {% endif %}
                        <span class="fw-bold text-dark">{{ doc.nomDocument }}</span>
                        {% if doc.description %}
                            <br><small class="text-muted ms-4">{{ doc.description }}</small>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge border text-dark bg-light">
                            {{ doc.targetType }}
                        </span>
                    </td>
                    <td class="text-muted">
                        {{ (doc.tailleOctet / 1024)|number_format(0, ',', ' ') }} Ko
                    </td>
                    <td>{{ doc.createdAt|date('d/m/Y') }}</td>
                    <td class="text-end pe-3">
                        <div class="btn-group">
                            <a href="{{ asset(doc.fichierUrl) }}" 
                               class="btn btn-sm btn-outline-primary" 
                               target="_blank" 
                               title="Visualiser">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ asset(doc.fichierUrl) }}" 
                               download 
                               class="btn btn-sm btn-outline-secondary" 
                               title="Télécharger">
                                <i class="fas fa-download"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted">
                        <i class="fas fa-folder-open fa-2x mb-2 d-block"></i>
                        Aucun document n'a été téléchargé pour ce dossier.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# Le style spécifique pour adoucir les bordures si nécessaire #}
<style>
    .table thead th {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #eaecf4;
    }
    .badge { font-weight: 500; }
</style>