{% extends 'base.html' %}
{% block title %}Catalogue{% endblock %}
{% macro cards(movies, recent=false) %}
<div class="catalogue-grid{% if recent %} catalogue-recent{% if random_search %} catalogue-random{% endif %}{% endif %}">
  {% for movie in movies %}
  {% set is_episode = movie.media_type is defined and movie.media_type == 'episode' %}
  {% set entry_url = '/catalogue/tv/' ~ movie.series_id if is_episode else '/catalogue/' ~ ('tv/' if movie.media_type is defined and movie.media_type == 'tv' else '') ~ movie.tmdb_id %}
  <a class="catalogue-card" href="{{ entry_url }}{% if is_episode %}#episode-{{ movie.tmdb_id }}{% endif %}">
    {% if movie.poster_path %}
    <img src="{{ entry_url }}/poster" alt="{{ movie.series_title if is_episode else movie.title }} poster" loading="lazy">
    {% else %}<span class="catalogue-no-poster">No poster available</span>{% endif %}
    <span class="catalogue-card-title">{% if is_episode %}{{ movie.series_title }} · S{{ '%02d' | format(movie.season_number) }}E{{ '%02d' | format(movie.episode_number) }} — {% endif %}{{ movie.title }}</span>
    <span class="catalogue-card-year">{% if is_episode %}Episode · {% elif movie.media_type is defined and movie.media_type == 'tv' %}TV · {% endif %}{{ movie.release_year or 'Year unknown' }}</span>
  </a>
  {% endfor %}
</div>
{% endmacro %}
{% block content %}
<h1 class="sr-only">Catalogue</h1>
<div class="control-panel">
  <div class="catalogue-brand">
    {% include 'logo.html' %}
    <div class="catalogue-counts">
      <h2>Movies: {{ '{:,}'.format(catalogue_counts.movies) }}</h2>
      <h2>TV Shows: {{ '{:,}'.format(catalogue_counts.tv_shows) }}</h2>
      <h2>TV Series: {{ '{:,}'.format(catalogue_counts.tv_seasons) }}</h2>
      <h2>TV Episodes: {{ '{:,}'.format(catalogue_counts.tv_episodes) }}</h2>
    </div>
  </div>
  <section class="control-settings" aria-labelledby="recent-heading">
    <div class="catalogue-recent-heading">
      <h2 id="recent-heading">{{ 'Random picks' if random_search else 'Recent additions' }}</h2>
      {% if not random_search %}
      <form method="get" action="/catalogue" aria-label="Browse recent additions" class="catalogue-pagination">
        {% if not selected_categories %}<input type="hidden" name="type" value="{{ search_type }}">{% endif %}
        {% for category_id in selected_categories %}<input type="hidden" name="category" value="{{ category_id }}">{% endfor %}
        {% if search_title %}<input type="hidden" name="title" value="{{ search_title }}">{% endif %}
        {% if search_index %}<input type="hidden" name="index" value="{{ search_index }}">{% endif %}
        {% if recent_page > 0 %}
        <button type="submit" name="recent_page" value="{{ recent_page - 1 }}" aria-label="Newer additions" title="Newer additions">←</button>
        {% endif %}
        {% if has_older %}
        <button type="submit" name="recent_page" value="{{ recent_page + 1 }}" aria-label="Older additions" title="Older additions">→</button>
        {% endif %}
      </form>
      {% endif %}
    </div>
    {% if recent %}{{ cards(recent, true) }}
    {% elif random_search %}<p>No shows, episodes or movies in the catalogue yet.</p>
    {% elif recent_page > 0 %}<p>No older additions.</p>
    {% else %}<p>No movies in the catalogue yet.</p>{% endif %}
  </section>
</div>
<div class="catalogue-search-panels">
<section class="batch-panel" aria-labelledby="search-heading">
  <h2 id="search-heading">Title Search</h2>
  <form method="get" action="/catalogue" class="catalogue-search" role="search">
    <input type="hidden" name="recent_page" value="{{ recent_page }}">
    <label for="catalogue-title">Title:
      <input type="search" id="catalogue-title" name="title" value="{{ search_title }}">
    </label>
    <label for="catalogue-type">Type:
      <select id="catalogue-type" name="type">
        {% for value, label in [('movie', 'Movie'), ('tv', 'TV'), ('both', 'Both')] %}
        <option value="{{ value }}"{% if search_type == value %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <button type="submit">Search</button>
  </form>
</section>
<section class="batch-panel catalogue-index" aria-labelledby="index-search-heading">
  <h2 id="index-search-heading">Search Index</h2>
  <nav aria-label="Search by title initial">
    <div class="catalogue-index-row">
      <a href="/catalogue?index=symbols"{% if search_index == 'symbols' %} aria-current="true"{% endif %}>Numbers and Symbols</a>
    </div>
    <div class="catalogue-index-alphabet">
      {% for letter in available_initials %}<span class="catalogue-index-letter">&nbsp;&nbsp;<a href="/catalogue?index={{ letter }}"{% if search_index == letter %} aria-current="true"{% endif %}>{{ letter }}</a>&nbsp;&nbsp;{% if not loop.last %}<span aria-hidden="true">|</span>{% endif %}</span>{% endfor %}
    </div>
  </nav>
</section>
<section class="batch-panel catalogue-categories" aria-labelledby="category-search-heading">
  <h2 id="category-search-heading">Category Search</h2>
  <form method="get" action="/catalogue" class="category-search" aria-label="Category search">
    <input type="hidden" name="recent_page" value="{{ recent_page }}">
    <div class="category-options">
      {% for category in catalogue_categories %}
      <label><input type="checkbox" name="category" value="{{ category.genre_id }}"{% if category.genre_id in selected_categories %} checked{% endif %}> {{ category.name }}</label>
      {% else %}<p>No categories available.</p>{% endfor %}
    </div>
    <button type="submit">Search</button>
  </form>
</section>
<section class="batch-panel" aria-labelledby="random-search-heading">
  <h2 id="random-search-heading">Random Search</h2>
  <form method="get" action="/catalogue" aria-label="Random search">
    <button type="submit" name="random" value="1">Search</button>
  </form>
</section>
</div>
{% if search_title or selected_categories or search_index %}
<section class="batch-panel catalogue-results" aria-labelledby="search-results-heading">
  <h2 id="search-results-heading">Search Results ({{ movies | length }})</h2>
  {% if movies %}{{ cards(movies) }}
  {% else %}<p role="status">{% if search_index %}No titles found in this index group.{% elif selected_categories %}No movies or TV shows found in the selected categories.{% else %}No titles found for “{{ search_title }}”.{% endif %}</p>{% endif %}
</section>
{% endif %}
{% endblock %}