{% extends "base.html" %}
{% block title %}Media Library{% endblock %}

{% block extra_head %}
<style>
  .media-browse { max-width:1200px; margin:0 auto; padding:2rem 1.5rem; }
  .media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.25rem; margin-top:1.5rem; }
  .media-card { border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; display:block; background:#fff; border:1px solid #dce6ef; transition:.15s; }
  .media-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.1); transform:translateY(-3px); }
  .card-thumb { aspect-ratio:16/9; background:#f0f4f8; display:flex; align-items:center; justify-content:center; color:#5f7a94; font-size:2rem; position:relative; overflow:hidden; }
  .card-thumb img { width:100%; height:100%; object-fit:cover; }
  .play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); opacity:0; transition:.15s; }
  .media-card:hover .play-overlay { opacity:1; }
  .play-btn { width:48px; height:48px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#033152; font-size:1.1rem; }
  .card-body { padding:.75rem; }
  .card-title { font-weight:600; font-size:.88rem; color:#1e2d3d; margin-bottom:.25rem; line-height:1.3; }
  .card-meta { font-size:.74rem; color:#5f7a94; }
  .lock-badge { position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.65); color:#fff; border-radius:4px; padding:.15rem .4rem; font-size:.68rem; font-weight:700; }
  .filter-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
  .pill { padding:.35rem 1rem; border-radius:20px; border:1.5px solid #dce6ef; font-size:.82rem; font-weight:600; color:#5f7a94; text-decoration:none; transition:.15s; }
  .pill:hover, .pill.active { background:#033152; color:#fff; border-color:#033152; }
</style>
{% endblock %}

{% block content %}
<div class="media-browse">
  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem">
    <h1 style="font-size:1.5rem; font-weight:700; color:#1e2d3d">Media Library</h1>
    <div class="filter-pills">
      <a href="{% url 'media_browse' %}" class="pill {% if not filter_type %}active{% endif %}">All</a>
      <a href="{% url 'media_browse' %}?type=video" class="pill {% if filter_type == 'video' %}active{% endif %}"><i class="fa-solid fa-film me-1"></i>Videos</a>
      <a href="{% url 'media_browse' %}?type=audio" class="pill {% if filter_type == 'audio' %}active{% endif %}"><i class="fa-solid fa-music me-1"></i>Audio</a>
    </div>
  </div>

  {% if items %}
  <div class="media-grid">
    {% for item in items %}
    <a href="{% url 'media_watch' item.slug %}" class="media-card">
      <div class="card-thumb">
        {% if item.thumbnail %}<img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
        {% else %}<i class="fa-solid {% if item.media_type == 'video' %}fa-film{% else %}fa-music{% endif %}"></i>{% endif %}
        <div class="play-overlay"><div class="play-btn"><i class="fa-solid fa-play"></i></div></div>
        {% if item.access != 'free' %}<span class="lock-badge"><i class="fa-solid fa-lock fa-xs"></i> {{ item.get_access_display }}</span>{% endif %}
      </div>
      <div class="card-body">
        <div class="card-title">{{ item.title }}</div>
        <div class="card-meta">
          {{ item.get_subtype_display }}
          {% if item.duration_display %} &middot; {{ item.duration_display }}{% endif %}
          {% if item.collection %} &middot; {{ item.collection.title }}{% endif %}
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div style="text-align:center;padding:4rem;color:#5f7a94">
    <i class="fa-solid fa-photo-film" style="font-size:3rem;opacity:.3;display:block;margin-bottom:1rem"></i>
    No media available yet.
  </div>
  {% endif %}
</div>
{% endblock %}