{% if attachments is not empty %}
<ul class="list-unstyled mb-0">
    {% for att in attachments %}
    <li class="d-flex align-items-center gap-2 py-2 border-bottom">
        {% if att.getMimeType() starts with 'image/' %}
            <i class="bi bi-file-image text-primary fs-5"></i>
        {% elseif att.getMimeType() == 'application/pdf' %}
            <i class="bi bi-file-earmark-pdf text-danger fs-5"></i>
        {% elseif att.getMimeType() starts with 'video/' %}
            <i class="bi bi-file-play text-warning fs-5"></i>
        {% else %}
            <i class="bi bi-paperclip text-muted fs-5"></i>
        {% endif %}

        <a href="javascript:void(0)"
           onclick="showAttachment({{ att.getId() }})"
           class="text-decoration-none text-primary fw-medium flex-grow-1"
           style="cursor: pointer;"
           onmouseover="this.style.textDecoration='underline'"
           onmouseout="this.style.textDecoration='none'">
            <i class="bi bi-download me-1"></i>{{ att.getOriginalName() }}
        </a>

        <span class="text-muted small ms-auto">{{ (att.getSizeBytes() / 1024) | round(1) }} KB</span>
    </li>
    {% endfor %}
</ul>
{% else %}
<p class="text-muted mb-0 small">{{ translations.no_attachments | default('Aucune pièce jointe.') }}</p>
{% endif %}