{% extends "base.html" %}

{% block title %}{{ shelf_meta.title }} · Lumière{% endblock %}

{% block content %}
  <section class="shelf-hero">
    <div class="shelf-hero-copy">
      <p class="eyebrow">{{ shelf_meta.eyebrow }}</p>
      <h1>{{ shelf_meta.title }}</h1>
      <p class="shelf-hero-text">{{ shelf_meta.empty_text }}</p>
    </div>
    <div class="shelf-hero-meta">
      <div class="shelf-hero-stats">
        {% for stat in shelf_snapshot %}
          <div class="shelf-stat">
            <span class="summary-label">{{ stat.label }}</span>
            <strong>{{ stat.value }}</strong>
          </div>
        {% endfor %}
      </div>
      {% if active_shelf == 'queue' %}
        <a class="button-link" href="/queue/random">Surprise me</a>
      {% endif %}
    </div>
  </section>

  <section class="feed-toolbar">
    <div class="search-row">
      <input
        type="search"
        id="film-search"
        placeholder="Search by title or director…"
        autocomplete="off"
      >
      <select id="film-sort">
        <option value="">Default order</option>
        <option value="date_watched_desc">Date watched — newest</option>
        <option value="date_watched_asc">Date watched — oldest</option>
        <option value="title_asc">Title — A → Z</option>
        <option value="title_desc">Title — Z → A</option>
        <option value="year_desc">Year — newest</option>
        <option value="year_asc">Year — oldest</option>
        <option value="stars_desc">Stars — highest</option>
        <option value="stars_asc">Stars — lowest</option>
      </select>
    </div>
  </section>

  {% if imported is not none %}
    <div class="notice">{{ imported }} entries imported.</div>
  {% endif %}

  {% if skipped is not none and skipped %}
    <div class="notice">{{ skipped }} duplicate entries skipped.</div>
  {% endif %}

  {% if cleared is not none %}
    <div class="notice">{{ cleared }} entries cleared.</div>
  {% endif %}

  {% if deduped is not none %}
    <div class="notice">{{ deduped }} duplicate entries removed.</div>
  {% endif %}

  {% if empty_queue is not none %}
    <div class="notice">The queue is empty. Add a film to get a random pick.</div>
  {% endif %}

  {% if enriched is not none %}
    <div class="notice">{{ enriched }} entries enriched from TMDB.</div>
  {% endif %}

  {% if films %}
    <section class="diary-feed" id="film-feed" data-shelf="{{ active_shelf }}" aria-label="Diary entries">
      {% if active_shelf == 'diary' and grouped_films %}
        {% for group in grouped_films %}
          <div class="month-group" data-month="{{ group.month }}">
            <div class="month-rail">
              <p class="month-label">{{ group.month }}</p>
            </div>
            <div class="month-stack">
              {% for film in group.films %}
                {% include "_film_card.html" %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      {% else %}
        {% for film in films %}
          {% include "_film_card.html" %}
        {% endfor %}
      {% endif %}
    </section>
    {% if has_more %}
    <div id="feed-sentinel" data-shelf="{{ active_shelf }}" data-offset="20" data-total="{{ total_films }}" style="height: 1px; margin: 20px 0;"></div>
    {% endif %}
  {% else %}
    <section class="empty-state">
      <h2>{{ shelf_meta.empty_title }}</h2>
      <p>{{ shelf_meta.empty_text }}</p>
      <a class="button-link" href="/films/new">Add Film</a>
    </section>
  {% endif %}
{% endblock %}