summaryrefslogtreecommitdiff
path: root/templates/form.html
blob: 05006e07b4ef3df07b9ed2bc093ac276ee86544b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
{% extends "base.html" %}

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

{% block content %}
  <section class="form-shell">
    {% if error %}
      <div class="notice error">{{ error }}</div>
    {% endif %}

    <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 '' }}">

      {% set current_stars = film.stars if film and film.stars else 0 %}
      <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
      <div class="form-heading">
        <div>
          <p class="eyebrow">Diary Entry</p>
          <h1>{{ page_title }}</h1>
        </div>
        <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
          {% for value in range(1, 4) %}
            <button
              type="button"
              class="star-button {% if current_stars >= value %}is-active{% endif %}"
              data-stars="{{ value }}"
              aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
              aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
            >✦</button>
          {% endfor %}
        </div>
      </div>

      <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>

      <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="genre">Genre</label>
          <input id="genre" name="genre" value="{{ film.genre if film and film.genre 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 '' }}"
            {% if not (film and film.date_watched) %}data-default-today{% endif %}>
        </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 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 %}