{% extends "base.html" %}
{% block title %}{{ col.title }}{% endblock %}

{% block extra_head %}
<style>
  .col-wrap { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
  .col-hero { display:flex; gap:2rem; align-items:flex-start; margin-bottom:2rem; flex-wrap:wrap; }
  .col-poster { width:200px; flex-shrink:0; border-radius:10px; overflow:hidden; aspect-ratio:2/3; background:#f0f4f8; display:flex; align-items:center; justify-content:center; color:#5f7a94; font-size:3rem; }
  .col-poster img { width:100%; height:100%; object-fit:cover; }
  .col-info h1 { font-size:1.8rem; font-weight:700; color:#1e2d3d; margin-bottom:.4rem; }
  .col-info .meta { font-size:.85rem; color:#5f7a94; margin-bottom:.75rem; }
  .col-info p { font-size:.92rem; color:#3d5166; line-height:1.7; }
  .badge-access { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:4px; }
  .badge-free { background:#dcfce7; color:#15803d; }
  .badge-premium { background:#fef9c3; color:#854d0e; }
  .badge-subscription { background:#ede9fe; color:#6d28d9; }
  .season-tab { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
  .stab { padding:.35rem 1rem; border-radius:20px; border:1.5px solid #dce6ef; font-size:.82rem; font-weight:600; color:#5f7a94; cursor:pointer; transition:.15s; }
  .stab.active { background:#033152; color:#fff; border-color:#033152; }
  .ep-list { display:flex; flex-direction:column; gap:.6rem; }
  .ep-row { display:flex; gap:1rem; align-items:center; padding:.75rem; border:1px solid #dce6ef; border-radius:8px; text-decoration:none; color:inherit; transition:.15s; background:#fff; }
  .ep-row:hover { box-shadow:0 3px 10px rgba(0,0,0,.08); border-color:#c5d8e8; }
  .ep-thumb { width:120px; flex-shrink:0; aspect-ratio:16/9; border-radius:6px; background:#f0f4f8; display:flex; align-items:center; justify-content:center; color:#5f7a94; overflow:hidden; }
  .ep-thumb img { width:100%; height:100%; object-fit:cover; }
  .ep-num { font-size:.72rem; font-weight:700; color:#5f7a94; min-width:24px; }
  .ep-title { font-weight:600; font-size:.9rem; color:#1e2d3d; line-height:1.3; }
  .ep-meta { font-size:.75rem; color:#5f7a94; margin-top:.2rem; }
  .lock-icon { color:#c2410c; font-size:.8rem; margin-left:auto; flex-shrink:0; }
</style>
{% endblock %}

{% block content %}
<div class="col-wrap">

  <div class="col-hero">
    <div class="col-poster">
      {% if col.thumbnail %}<img src="{{ col.thumbnail.url }}" alt="{{ col.title }}">
      {% else %}<i class="fa-solid {% if col.collection_type == 'album' %}fa-music{% elif col.collection_type == 'podcast' %}fa-microphone{% else %}fa-film{% endif %}"></i>{% endif %}
    </div>
    <div class="col-info">
      <h1>{{ col.title }}</h1>
      <div class="meta">
        {{ col.get_collection_type_display }}
        {% if col.year %} &middot; {{ col.year }}{% endif %}
        {% if col.language %} &middot; {{ col.language }}{% endif %}
        {% if col.director %} &middot; {{ col.director }}{% endif %}
        &nbsp;<span class="badge-access badge-{{ col.access }}">{{ col.get_access_display }}</span>
      </div>
      {% if col.description %}<p>{{ col.description }}</p>{% endif %}
      {% if col.cast %}
      <div style="margin-top:.75rem;font-size:.82rem;color:#5f7a94"><strong style="color:#3d5166">Cast:</strong> {{ col.cast }}</div>
      {% endif %}
    </div>
  </div>

  {% if seasons %}
    <div class="season-tab" id="seasonTabs">
      {% for s in seasons %}
      <div class="stab {% if forloop.first %}active{% endif %}" onclick="showSeason('season-{{ s.pk }}', this)">
        {{ s.display_title }}
      </div>
      {% endfor %}
    </div>
    {% for s in seasons %}
    <div id="season-{{ s.pk }}" class="season-panel" {% if not forloop.first %}style="display:none"{% endif %}>
      <div class="ep-list">
        {% for ep in s.items.all %}
        {% if ep.is_active and ep.hls_status == 'ready' %}
        <a href="{% url 'media_watch' ep.slug %}" class="ep-row">
          <div class="ep-thumb">
            {% if ep.thumbnail %}<img src="{{ ep.thumbnail.url }}" alt="">
            {% else %}<i class="fa-solid fa-film fa-sm"></i>{% endif %}
          </div>
          <span class="ep-num">{{ ep.episode_number|default:forloop.counter }}</span>
          <div style="flex:1;min-width:0">
            <div class="ep-title">{{ ep.title }}</div>
            <div class="ep-meta">{% if ep.duration_display %}{{ ep.duration_display }}{% endif %}</div>
          </div>
          {% if ep.access != 'free' %}<span class="lock-icon"><i class="fa-solid fa-lock"></i></span>{% endif %}
        </a>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div class="ep-list">
      {% for item in items %}
      <a href="{% url 'media_watch' item.slug %}" class="ep-row">
        <div class="ep-thumb">
          {% if item.thumbnail %}<img src="{{ item.thumbnail.url }}" alt="">
          {% else %}<i class="fa-solid {% if item.media_type == 'audio' %}fa-music{% else %}fa-film{% endif %} fa-sm"></i>{% endif %}
        </div>
        <span class="ep-num">{{ item.episode_number|default:item.track_number|default:forloop.counter }}</span>
        <div style="flex:1;min-width:0">
          <div class="ep-title">{{ item.title }}</div>
          <div class="ep-meta">{{ item.get_subtype_display }}{% if item.duration_display %} &middot; {{ item.duration_display }}{% endif %}</div>
        </div>
        {% if item.access != 'free' %}<span class="lock-icon"><i class="fa-solid fa-lock"></i></span>{% endif %}
      </a>
      {% endfor %}
    </div>
  {% endif %}

</div>

<script>
function showSeason(id, tab) {
  document.querySelectorAll('.season-panel').forEach(function(p){ p.style.display='none'; });
  document.querySelectorAll('.stab').forEach(function(t){ t.classList.remove('active'); });
  document.getElementById(id).style.display = 'block';
  tab.classList.add('active');
}
</script>
{% endblock %}