{% extends "base.html" %}

{% block title %}{{ page_title }} · Lumière{% endblock %}

{% block content %}
  <section class="form-shell">
    <div class="form-heading">
      <p class="eyebrow">Diary Entry</p>
      <h1>{{ page_title }}</h1>
    </div>

    {% if error %}
      <div class="notice error">{{ error }}</div>
    {% endif %}

    <div class="tmdb-panel">
      <label for="tmdb-query">TMDB title search</label>
      <div class="search-row">
        <input id="tmdb-query" type="search" autocomplete="off" placeholder="Search by title">
        <button id="tmdb-search" type="button">Search</button>
      </div>
      <div id="tmdb-results" class="tmdb-results" aria-live="polite"></div>
    </div>

    <form class="film-form" method="post" action="{{ action }}">
      <input id="tmdb_id" name="tmdb_id" type="hidden" value="{{ film.tmdb_id if film and film.tmdb_id else '' }}">

      <div class="form-grid">
        <div class="field span-2">
          <label for="title">Display title</label>
          <input id="title" name="title" required value="{{ film.title if film else '' }}">
        </div>

        <div class="field span-2">
          <label for="original_title">Original title</label>
          <input id="original_title" name="original_title" value="{{ film.original_title if film and film.original_title else '' }}">
        </div>

        <div class="field">
          <label for="director">Director</label>
          <input id="director" name="director" value="{{ film.director if film and film.director else '' }}">
        </div>

        <div class="field">
          <label for="year">Year</label>
          <input id="year" name="year" inputmode="numeric" value="{{ film.year if film and film.year else '' }}">
        </div>

        <div class="field">
          <label for="country">Country</label>
          <input id="country" name="country" value="{{ film.country if film and film.country else '' }}">
        </div>

        <div class="field">
          <label for="language">Language</label>
          <input id="language" name="language" value="{{ film.language if film and film.language else '' }}">
        </div>

        <div class="field">
          <label for="runtime">Runtime</label>
          <input id="runtime" name="runtime" type="number" min="0" inputmode="numeric" value="{{ film.runtime if film and film.runtime is not none else '' }}">
        </div>

        <div class="field">
          <label for="date_watched">Watched</label>
          <input id="date_watched" name="date_watched" type="date" value="{{ film.date_watched if film and film.date_watched else '' }}">
        </div>

        <div class="field">
          <label for="shelf">Shelf</label>
          {% set current_shelf = shelf_override if shelf_override else (film.shelf if film and film.shelf else 'diary') %}
          <select id="shelf" name="shelf">
            <option value="diary" {% if current_shelf == 'diary' %}selected{% endif %}>Diary</option>
            <option value="queue" {% if current_shelf == 'queue' %}selected{% endif %}>Queue</option>
            <option value="abandoned" {% if current_shelf == 'abandoned' %}selected{% endif %}>Abandoned</option>
          </select>
        </div>

        <div class="field">
          <label for="stars">Stars</label>
          {% set current_stars = film.stars if film else 0 %}
          <select id="stars" name="stars">
            <option value="0" {% if current_stars|string == '0' %}selected{% endif %}>Unstarred</option>
            <option value="1" {% if current_stars|string == '1' %}selected{% endif %}>1 star</option>
            <option value="2" {% if current_stars|string == '2' %}selected{% endif %}>2 stars</option>
            <option value="3" {% if current_stars|string == '3' %}selected{% endif %}>3 stars</option>
          </select>
        </div>

        <div class="field checkbox-field">
          <label class="check-label" for="rewatch">
            <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}>
            Rewatch
          </label>
        </div>

        <div class="field">
          <label for="rewatch_count">Rewatch count</label>
          <input id="rewatch_count" name="rewatch_count" type="number" min="0" inputmode="numeric" value="{{ film.rewatch_count if film and film.rewatch_count is not none else 0 }}">
        </div>

        <div class="field span-2">
          <label for="watched_with">Watched with</label>
          <input id="watched_with" name="watched_with" placeholder="Solo, Maya, Film club" value="{{ film.watched_with if film and film.watched_with else '' }}">
        </div>

        <div class="field">
          <label for="how_found">How found</label>
          <input id="how_found" name="how_found" placeholder="Recommendation, festival, streaming queue" value="{{ film.how_found if film and film.how_found else '' }}">
        </div>

        <div class="field">
          <label for="context">Context</label>
          <input id="context" name="context" placeholder="Criterion, Festival, Kiarostami deep-dive" value="{{ film.context if film and film.context else '' }}">
        </div>

        <div class="field span-2">
          <label for="poster_url">Poster URL</label>
          <input id="poster_url" name="poster_url" value="{{ film.poster_url if film and film.poster_url else '' }}">
        </div>

        <div class="poster-preview-field">
          <div class="poster-frame poster-preview">
            {% if film and film.poster_url %}
              <img id="poster-preview" src="{{ film.poster_url }}" alt="Poster preview">
            {% else %}
              <img id="poster-preview" alt="Poster preview">
            {% endif %}
          </div>
        </div>

        <div class="field notes-field">
          <label for="notes">Notes</label>
          <textarea id="notes" name="notes" rows="10">{{ film.notes if film and film.notes else '' }}</textarea>
        </div>
      </div>

      <div class="form-actions">
        <a href="{{ '/films/' ~ film.id if film and film.id else '/' }}">Cancel</a>
        <button type="submit">{{ submit_label }}</button>
      </div>
    </form>
  </section>
{% endblock %}