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

{% set watched_count = watchlist | selectattr('status', 'equalto', 'watched') | list | length %}
{% set later_count   = watchlist | selectattr('status', 'equalto', 'watch_later') | list | length %}

<div class="wl-header">
  <div>
    <h1 class="hero-title">My <span>Watch List</span></h1>
    <p class="hero-sub">Your personal K-drama &amp; movie tracker</p>
  </div>
  <div class="wl-stats">
    <div class="stat-chip later-stat">
      <span class="num">{{ later_count }}</span>
      Watch Later
    </div>
    <div class="stat-chip watched-stat">
      <span class="num">{{ watched_count }}</span>
      Watched
    </div>
  </div>
</div>

{% if watchlist %}
<div class="wl-grid">
  {% for item in watchlist %}
  <div class="wl-card {% if item.status == 'watched' %}is-watched{% else %}is-later{% endif %}">
    <div class="wl-card-stripe" style="background: linear-gradient(180deg, {{ item.poster_color }}88, {{ item.poster_color }}22);">
      {{ item.title[0] }}
    </div>
    <div class="wl-card-body">
      {% if item.status == 'watched' %}
        <span class="status-tag watched">✓ Watched</span>
      {% else %}
        <span class="status-tag later">◷ Watch Later</span>
      {% endif %}
      <div class="wl-card-title">{{ item.title }}</div>
      <div class="wl-card-meta">
        {{ item.year }} · {{ item.type }} · <span style="color:#f5c842">★</span> {{ item.rating }}
        {% if item.episodes %} · {{ item.episodes }} eps{% endif %}
      </div>
      <div class="wl-card-actions">
        <form method="POST" action="/toggle/{{ item.id }}">
          {% if item.status == 'watched' %}
            <button type="submit" class="btn btn-outline">↩ Unwatch</button>
          {% else %}
            <button type="submit" class="btn btn-watched">✓ Mark Watched</button>
          {% endif %}
        </form>
        <form method="POST" action="/remove/{{ item.id }}">
          <button type="submit" class="btn btn-remove">✕ Remove</button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty">
  <div class="big">🎬</div>
  <p>Your list is empty. Start adding titles from the catalogue!</p>
  <a href="/" class="btn btn-add" style="width:auto; display:inline-flex;">Browse Catalogue</a>
</div>
{% endif %}

{% endblock %}