{% load i18n %}
{% load tz %}
{% load documents_tags %}
{% for version in versions %}
<div class="d-flex align-items-center mb-3 border rounded p-2">
    <!-- Vignette -->
    <a href="{% private_file_url version 'file' %}" 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 version.thumbnail %}
            <img src="{% private_file_url version 'thumbnail' %}" alt="{{ version.get_title }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
            {% else %}
            <span class="d-block w-100 px-2 text-muted"
                  style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85em;">
                {{ version.filename }}
            </span>
            {% endif %}
        </div>
    </a>

    <!-- Infos document -->
    <div class="flex-grow-1">
        <div class="fw-semibold">
            <span class="badge bg-secondary me-1">v{{ version.version_number }}</span>
            {{ version.get_title }}
        </div>
        <small class="text-muted">
            {% translate "Ajouté le" %} {{ version.uploaded_at|timezone:"Europe/Paris"|date:"d/m/Y H:i" }}
            {% if version.uploaded_by %}
                {% translate "par" %} {{ version.uploaded_by.username }}
            {% endif %}
        </small>
        {% if version.description %}
        <div class="small text-muted mt-1">{{ version.description }}</div>
        {% endif %}
        <div class="mt-1">
            {% if version.status == 'approved' %}
            <span class="badge bg-success">{% translate "Approuvé" %}</span>
            {% elif version.status == 'pending' %}
            <span class="badge bg-warning text-dark">{% translate "En attente" %}</span>
            {% elif version.status == 'rejected' %}
            <span class="badge bg-danger">{% translate "Rejeté" %}</span>
            {% else %}
            <span class="badge bg-secondary">{% translate "Brouillon" %}</span>
            {% endif %}
        </div>
    </div>

    <!-- Actions -->
    <div class="ms-2 d-flex flex-column align-items-center gap-1">
        <a href="{% private_file_url version 'file' %}" target="_blank" class="btn btn-sm btn-outline-primary" title="{% translate 'Télécharger' %}">
            <i class="bi bi-download"></i>
        </a>
        {% if is_delete_document_allowed %}
        <button class="btn btn-sm p-0 border-0 bg-transparent"
                data-bs-toggle="modal"
                data-bs-target="#documentDeleteModal"
                data-filename="{{ version.get_title }}"
                data-delete-url="{% url 'documents:delete_version' version.document_id version.pk %}"
                title="{% translate 'Supprimer' %}">
            <i class="bi bi-trash text-danger"></i>
        </button>
        {% endif %}
    </div>
</div>
{% empty %}
<p class="text-muted">{% translate "Aucune version trouvée." %}</p>
{% endfor %}