{% extends "base.html" %}

{% block title %}{{ asset.original_filename }} - Media Library{% endblock %}

{% block page_header %}
<div class="flex items-center gap-3">
  <a href="{% if is_shared_library %}{% url 'media_library_org:shared_index' %}{% else %}{% url 'media_library:index' workspace_id=workspace.id %}{% endif %}"
     class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors btn-surface-2"
     style="color: var(--text-tertiary, var(--color-stone-500));">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
  </a>
  <h1 class="text-lg font-semibold" style="color: var(--text-primary, var(--color-stone-900));">{{ asset.original_filename }}</h1>
  {% if asset.is_shared %}
  <span class="text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
        style="background: var(--accent-teal-soft); color: #0F766E;">Shared</span>
  {% endif %}
</div>
{% endblock %}

{% block content %}
<div class="grid grid-cols-3 gap-6">
  <!-- Preview (2 cols) -->
  <div class="col-span-2">
    <div class="rounded-xl overflow-hidden border" style="border-color: var(--border); background: var(--surface-1);">
      {% if asset.file_type == 'image' or asset.file_type == 'gif' %}
        <img src="{{ asset.file.url }}" alt="{{ asset.original_filename }}" class="w-full max-h-[600px] object-contain">
      {% elif asset.file_type == 'video' %}
        <video controls class="w-full max-h-[600px]" preload="metadata">
          <source src="{{ asset.file.url }}" type="{{ asset.mime_type }}">
        </video>
      {% else %}
        <div class="flex items-center justify-center py-24">
          <svg class="w-16 h-16" style="color: var(--text-ghost);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Sidebar (1 col) -->
  <div class="space-y-5">
    {% include "media_library/_asset_detail_panel.html" %}
  </div>
</div>
{% endblock %}