{% extends "base.html" %}
{% block content %}

<div class="hero">
  <div>
    <h1 class="hero-title">K-Drama &amp; Movie <span>Catalogue</span></h1>
    <p class="hero-sub">{{ total }} titles · Browse, discover, save to your list</p>
  </div>
</div>

<form class="controls" method="GET" action="/">
  <div class="search-wrap">
    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
    </svg>
    <input type="text" name="q" placeholder="Search titles or genres…" value="{{ query }}">
  </div>
  <div class="filter-pills">
    <a href="/?q={{ query }}&type=all"     class="pill {% if filter_type == 'all' %}active{% endif %}">All</a>
    <a href="/?q={{ query }}&type=K-Drama" class="pill {% if filter_type == 'K-Drama' %}active{% endif %}">K-Drama</a>
    <a href="/?q={{ query }}&type=K-Movie" class="pill {% if filter_type == 'K-Movie' %}active{% endif %}">K-Movie</a>
  </div>
</form>

{% if catalogue %}
<div class="grid">
  {% for item in catalogue %}
  <div class="card">
    <div class="card-poster" style="background: linear-gradient(160deg, {{ item.poster_color }}cc, {{ item.poster_color }}55);">
      <div class="card-poster-inner">
        <div class="big-letter">{{ item.title[0] }}</div>
        <div class="ko-title">{{ item.year }}</div>
      </div>
      <span class="type-badge">{{ item.type }}</span>
    </div>
    <div class="card-body">
      <div class="card-title">{{ item.title }}</div>
      <div class="card-meta">
        <span class="star">★</span> {{ item.rating }}
        {% if item.episodes %}<span>· {{ item.episodes }} eps</span>{% endif %}
      </div>
      <div class="card-genre">{{ item.genre }}</div>
    </div>
    <div class="card-footer">
      {% if item.id in watchlist_ids %}
        <span class="btn btn-saved">
          <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24"><path d="M5 3a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2H5z"/></svg>
          Saved
        </span>
      {% else %}
        <form method="POST" action="/add/{{ item.id }}">
          <button type="submit" class="btn btn-add">
            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 3a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2H5z"/><path d="M12 8v8M8 12h8"/></svg>
            Add to List
          </button>
        </form>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty">
  <div class="big">🔍</div>
  <p>No results for "<strong>{{ query }}</strong>"</p>
  <a href="/" class="btn btn-outline" style="width:auto; display:inline-flex;">Clear Search</a>
</div>
{% endif %}

{% endblock %}