summaryrefslogtreecommitdiff
path: root/templates/_film_card.html
blob: 67238215bf830a6049e5745c94c76f927e996569 (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
<article class="film-card">
  <a class="poster-frame" href="/films/{{ film.id }}" aria-label="{{ film.title }}">
    {% if film.poster_url %}
      <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy">
    {% else %}
      <span>{{ film.title[:1] }}</span>
    {% endif %}
  </a>
  <div class="film-card-body">
    <div class="film-card-main">
      <div class="film-card-header">
        <h2><a href="/films/{{ film.id }}">{{ film.title }}</a></h2>
        <p class="muted">
          {% if film.year %}{{ film.year }}{% endif %}
          {% set directors = split_credit_names(film.director) %}
          {% if directors %}
            {% if film.year %} · {% endif %}
            {% for director in directors %}
              <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %}
            {% endfor %}
          {% endif %}
        </p>
      </div>

      <div class="ledger-strip">
        <span>{{ film.shelf|title }}</span>
        {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %}
        {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %}
        {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %}
      </div>

      {% if film.language or film.genre or film.context or film.how_found or film.watched_with %}
        <div class="fact-list fact-list-compact">
          {% if film.language %}
            <div class="fact-row">
              <span class="fact-label">Lang</span>
              <span class="fact-value">{{ film.language }}</span>
            </div>
          {% endif %}
          {% if film.genre %}
            <div class="fact-row">
              <span class="fact-label">Genre</span>
              <span class="fact-value">{{ film.genre }}</span>
            </div>
          {% endif %}
          {% if film.context %}
            <div class="fact-row">
              <span class="fact-label">Context</span>
              <span class="fact-value">{{ film.context }}</span>
            </div>
          {% endif %}
          {% if film.how_found %}
            <div class="fact-row">
              <span class="fact-label">Found</span>
              <span class="fact-value">{{ film.how_found }}</span>
            </div>
          {% endif %}
          {% if film.watched_with %}
            <div class="fact-row">
              <span class="fact-label">With</span>
              <span class="fact-value">{{ film.watched_with }}</span>
            </div>
          {% endif %}
        </div>
      {% endif %}

      {% if film.notes %}
        <p class="notes-preview">{{ film.notes[:220] }}{% if film.notes|length > 220 %}...{% endif %}</p>
      {% endif %}
    </div>

    <div class="film-card-side">
      {% if film.shelf == 'diary' %}
        <div class="star-control" role="group" aria-label="Rate film" data-film-id="{{ film.id }}" data-current-stars="{{ film.stars }}">
          {% for value in range(1, 4) %}
            <button
              type="button"
              class="star-button {% if film.stars >= value %}is-active{% endif %}"
              data-stars="{{ value }}"
              aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
              aria-pressed="{% if film.stars >= value %}true{% else %}false{% endif %}"
            >✦</button>
          {% endfor %}
        </div>
      {% elif film.stars %}
        <span class="rating">{% for _ in range(film.stars) %}✦{% endfor %}</span>
      {% endif %}

      <div class="inline-actions">
        {% if film.shelf == 'queue' %}
          <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
          <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
            <button class="secondary-button" type="submit">Abandon</button>
          </form>
        {% elif film.shelf == 'diary' %}
          <form method="post" action="/films/{{ film.id }}/shelf/queue">
            <button class="secondary-button" type="submit">Move to queue</button>
          </form>
          <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
            <button class="secondary-button" type="submit">Mark abandoned</button>
          </form>
        {% else %}
          <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
          <form method="post" action="/films/{{ film.id }}/shelf/queue">
            <button class="secondary-button" type="submit">Move to queue</button>
          </form>
        {% endif %}
      </div>
    </div>
  </div>
</article>