{% extends "base.html" %}

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

{% block content %}
  <section class="page-heading">
    <p class="eyebrow">{{ shelf_meta.eyebrow }}</p>
    <div class="page-heading-row">
      <h1>{{ shelf_meta.title }}</h1>
      {% if active_shelf == 'queue' %}
        <a class="button-link" href="/queue/random">Surprise me</a>
      {% endif %}
    </div>
  </section>

  <div class="search-row" style="margin-bottom: 20px;">
    <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>

  {% 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 }}">
            <p class="month-label">{{ group.month }}</p>
            {% for film in group.films %}
              {% include "_film_card.html" %}
            {% endfor %}
          </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 %}