{% comment %}
Media attachments list - rendered as sortable thumbnails.
Context: media_attachments, post, workspace.
{% endcomment %}

{% for attachment in media_attachments %}
<div class="media-thumb" draggable="true">
    {% if attachment.media_asset.is_video %}
    <video src="{{ attachment.media_asset.file.url }}#t=0.5" data-asset-id="{{ attachment.media_asset.id }}" class="w-full h-full object-cover" muted preload="metadata"></video>
    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div class="w-5 h-5 rounded-full bg-black/50 flex items-center justify-center">
            <svg class="w-2.5 h-2.5 text-white ml-px" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
        </div>
    </div>
    {% elif attachment.media_asset.thumbnail %}
    <img src="{{ attachment.media_asset.thumbnail.url }}" alt="{{ attachment.alt_text|default:attachment.media_asset.filename }}">
    {% elif attachment.media_asset.file %}
    <img src="{{ attachment.media_asset.file.url }}" alt="{{ attachment.alt_text|default:attachment.media_asset.filename }}">
    {% else %}
    <div class="w-full h-full bg-stone-100 flex items-center justify-center">
        <svg class="w-5 h-5 text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
    </div>
    {% endif %}
    {% if post %}
    <button type="button" class="remove-btn"
            hx-post="{% url 'composer:remove_media' workspace_id=workspace.id post_id=post.id media_id=attachment.id %}"
            hx-target="#media-list"
            hx-swap="innerHTML">
        <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
    {% endif %}
</div>
{% empty %}
<!-- No media attached yet - empty state handled by the dropzone -->
{% endfor %}