{% comment %}
YouTube thumbnail picker modal content - loaded via HTMX.
Context: assets (image-only), workspace.
Clicking an asset dispatches a 'thumbnail-selected' event with the asset id
and URL. The composer's Alpine root listens and writes the value to the
per-account thumbnails map.
{% endcomment %}

{% if assets %}
<div class="grid grid-cols-4 gap-3">
    {% for asset in assets %}
    <div class="group relative rounded-xl overflow-hidden border border-stone-200 aspect-video cursor-pointer hover:border-orange-400 hover:shadow-md transition-all duration-150"
         @click="$dispatch('thumbnail-selected', { assetId: '{{ asset.id }}', url: '{% if asset.thumbnail %}{{ asset.thumbnail.url }}{% elif asset.file %}{{ asset.file.url }}{% endif %}', filename: '{{ asset.filename|escapejs }}' })">
        {% if asset.thumbnail %}
        <img src="{{ asset.thumbnail.url }}" class="w-full h-full object-cover" alt="{{ asset.filename }}">
        {% elif asset.file %}
        <img src="{{ asset.file.url }}" class="w-full h-full object-cover" alt="{{ asset.filename }}">
        {% else %}
        <div class="w-full h-full bg-stone-100 flex items-center justify-center">
            <svg class="w-8 h-8 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 %}
        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-150 flex items-center justify-center">
            <div class="w-8 h-8 rounded-full bg-white/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-150 shadow-sm">
                <svg class="w-4 h-4 text-stone-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-1.5 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-150">
            <span class="text-[10px] text-white font-medium truncate block">{{ asset.filename }}</span>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-12">
    <div class="w-14 h-14 mx-auto rounded-2xl bg-stone-100 flex items-center justify-center mb-3">
        <svg class="w-6 h-6 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>
    <p class="text-sm font-medium text-stone-500 mb-1">No images available</p>
    <p class="text-xs text-stone-400">Upload images to your media library to use them as thumbnails</p>
</div>
{% endif %}