{% load i18n %}
{% for doc in documents %}
<div class="d-flex align-items-center mb-3 border rounded p-2">
    <!-- Vignette -->
    <a href="{{ doc.file.url }}" target="_blank" class="me-3">
        <div class="img-thumbnail d-flex justify-content-center align-items-center" style="width: 120px; height: 80px; overflow: hidden; background-color: #f8f9fa;">
            {% if doc.thumbnail %}
            <img src="{{ doc.thumbnail.url }}" alt="{{ doc.filename }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
            {% else %}
            <img src="{{ doc.file.url }}" alt="{{ doc.filename }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
            {% endif %}
        </div>
    </a>

    <!-- Infos document -->
    <div class="flex-grow-1">
        <div class="fw-semibold">{{ doc.filename }}</div>
        <small class="text-muted">
            {% translate "Ajouté le" %} {{ doc.upload_date|date:"d/m/Y" }}
            {% if doc.uploaded_by %}
                {% translate "par" %} {{ doc.uploaded_by.username }}
            {% endif %}
        </small>
    </div>

    <!-- Actions -->
    {% if is_delete_document_allowed %}
    <div class="ms-2 d-flex align-items-start">
        <button class="btn btn-sm p-0 border-0 bg-transparent"
                data-bs-toggle="modal"
                data-bs-target="#documentDeleteModal"
                data-filename="{{ doc.filename }}"
                data-delete-url="{% url 'assets:structures_delete_document' doc.id %}"
                title="Supprimer">
            <i class="bi bi-trash text-danger"></i>
        </button>
    </div>
    {% endif %}

</div>
{% empty %}
<p class="text-muted">{% translate "Aucun document trouvé." %}</p>
{% endfor %}