{% load i18n %}
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
    <h3 class="text-xl font-bold text-navy mb-6">{% trans "Attachments" %}</h3>
    
    {% if attachments %}
    <div class="grid grid-cols-2 gap-4">
        {% for attachment in attachments %}
        <div class="bg-slate-50 rounded-xl p-4 flex items-center gap-4">
            <div class="w-12 h-12 bg-navy rounded-xl flex items-center justify-center flex-shrink-0">
                <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-semibold text-navy truncate">{{ attachment.filename }}</p>
                <p class="text-xs text-slate">{{ attachment.file_size|filesizeformat }} • {{ attachment.created_at|date:"M d, Y" }}</p>
            </div>
            <a href="{{ attachment.file.url }}" class="p-2 bg-light text-navy rounded-lg hover:bg-blue-100 transition" download>
                <i data-lucide="download" class="w-5 h-5"></i>
            </a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i data-lucide="paperclip" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
        <p class="text-slate">{% trans "No attachments" %}</p>
    </div>
    {% endif %}
</section>
