<div class="attachment-gallery">
    {% for att in attachments %}
    <div class="attachment-gallery-item">
        {% if att.get('is_image') and att.get('thumbnail_url') %}
        <img src="{{ att['thumbnail_url'] }}" alt="{{ att.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-full="{{ att['url'] }}" data-mime="{{ att.get('mime_type', '') }}">
        {% elif att.get('is_image') %}
        <img src="{{ att['url'] }}" alt="{{ att.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-full="{{ att['url'] }}" data-mime="{{ att.get('mime_type', '') }}">
        {% else %}
        <a href="{{ att['url'] }}" target="_blank" rel="noopener" class="non-image" download="{{ att.get('original_filename', 'file') }}">
            <span class="icon">{{ file_icon_emoji(att.get('original_filename', 'file')) }}</span>
            <span class="name">{{ att.get('original_filename', 'file') }}</span>
            <span class="size">{{ format_file_size(att.get('file_size', 0)) }}</span>
        </a>
        {% endif %}
    </div>
    {% endfor %}
</div>

<div class="attachment-lightbox" id="attachment-lightbox">
    <button type="button" class="attachment-lightbox-close">&times;</button>
    <img src="" alt="">
</div>
