{% comment %}Single asset card for grid view. Expects: asset, workspace{% endcomment %}

<div class="ml-asset-card group cursor-pointer overflow-hidden"
     @click="openDetail('{{ asset.id }}')"
     {% if asset.processing_status == 'pending' or asset.processing_status == 'processing' %}
     hx-get="{% url 'media_library:processing_status' workspace_id=workspace.id asset_id=asset.id %}"
     hx-trigger="every 3s"
     hx-swap="outerHTML"
     {% endif %}>

  <!-- Thumbnail -->
  <div class="relative aspect-square overflow-hidden rounded-t-xl">
    {% if asset.thumbnail %}
      <img src="{{ asset.thumbnail.url }}" alt="{{ asset.original_filename }}"
           class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
           loading="lazy">
    {% elif asset.file_type == 'image' or asset.file_type == 'gif' %}
      <img src="{{ asset.file.url }}" alt="{{ asset.original_filename }}"
           class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
           loading="lazy">
    {% elif asset.processing_status == 'pending' or asset.processing_status == 'processing' %}
      <div class="w-full h-full ml-shimmer flex items-center justify-center">
        <svg class="w-6 h-6 animate-spin" style="color: var(--text-ghost, var(--color-stone-400));" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </div>
    {% else %}
      <div class="w-full h-full ml-thumb-placeholder flex items-center justify-center">
        {% if asset.file_type == 'video' %}
          <svg class="w-8 h-8" style="color: var(--text-ghost, var(--color-stone-400));" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {% elif asset.file_type == 'document' %}
          <svg class="w-8 h-8" style="color: var(--text-ghost, var(--color-stone-400));" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
        {% else %}
          <svg class="w-8 h-8" style="color: var(--text-ghost, var(--color-stone-400));" 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>
        {% endif %}
      </div>
    {% endif %}

    <!-- Type badge -->
    <span class="ml-type-badge absolute top-2 left-2
      {% if asset.file_type == 'image' %}{% elif asset.file_type == 'video' %}{% elif asset.file_type == 'gif' %}{% else %}{% endif %}"
      style="{% if asset.file_type == 'video' %}background: rgba(239,68,68,0.9); color: white;{% elif asset.file_type == 'gif' %}background: rgba(99,102,241,0.9); color: white;{% elif asset.file_type == 'document' %}background: rgba(59,130,246,0.9); color: white;{% else %}background: rgba(255,255,255,0.9); color: var(--text-secondary, var(--color-stone-600));{% endif %}">
      {{ asset.file_type|upper }}
    </span>

    {% if asset.is_shared %}
    <span class="ml-type-badge absolute top-2 right-2"
          style="background: rgba(20,184,166,0.9); color: white;">
      SHARED
    </span>
    {% endif %}

    <!-- Star button -->
    <button @click.stop
            aria-label="{% if asset.is_starred %}Remove from starred{% else %}Add to starred{% endif %}"
            class="absolute bottom-2 right-2 w-7 h-7 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            style="background: rgba(255,255,255,0.9); box-shadow: var(--shadow-sm);"
            hx-post="{% url 'media_library:asset_star' workspace_id=workspace.id asset_id=asset.id %}"
            hx-swap="outerHTML"
            hx-target="closest .ml-asset-card">
      <svg class="w-3.5 h-3.5" fill="{% if asset.is_starred %}var(--warning-500, #EAB308){% else %}none{% endif %}"
           stroke="{% if asset.is_starred %}var(--warning-500, #EAB308){% else %}var(--text-tertiary, #78716C){% endif %}"
           viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
    </button>

    {% if asset.file_type == 'video' and asset.duration_seconds %}
    <span class="absolute bottom-2 left-2 text-xs font-semibold px-1.5 py-0.5 rounded"
          style="background: rgba(0,0,0,0.7); color: white; font-variant-numeric: tabular-nums;">
      {% widthratio asset.duration_seconds 60 1 as mins %}
      {% widthratio asset.duration_seconds 1 1 as secs %}
      {{ mins }}:{{ secs|stringformat:"02d" }}
    </span>
    {% endif %}
  </div>

  <!-- Info -->
  <div class="px-3 py-2.5">
    <p class="text-xs font-medium truncate" style="color: var(--text-primary, var(--color-stone-900));">{{ asset.original_filename }}</p>
    <p class="text-xs mt-0.5" style="color: var(--text-ghost, var(--color-stone-400));">{{ asset.human_file_size }}{% if asset.width and asset.height %} &middot; {{ asset.width }}&times;{{ asset.height }}{% endif %}</p>
  </div>
</div>