54 lines
1.4 KiB
HTML
54 lines
1.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block body_class%}animated animated-text{% endblock %}
|
|
{% block main %}
|
|
|
|
<div class="films">
|
|
<div class="actions">
|
|
<strong>Filter:</strong>
|
|
<select id="filter-select">
|
|
<option value="">All Types</option>
|
|
{% for type in types %}
|
|
<option value="{{ type.value }}">{{ type.title }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<strong>Sort:</strong>
|
|
<select id="sort-select">
|
|
<option value="title">Title</option>
|
|
<option value="year">Year</option>
|
|
<option value="duration">Duration</option>
|
|
</select>
|
|
</div>
|
|
<div id="films-list">
|
|
{% for film in films %}
|
|
<div class="film"
|
|
data-position="{{ film.position }}"
|
|
data-title="{{ film.data.title }}"
|
|
data-year="{{ film.data.year|default:"9999" }}"
|
|
data-duration="{{ film.duration_seconds }}"
|
|
data-type="{{ film.data.type|join:"," }}"
|
|
>
|
|
<a href="{{ film.get_absolute_url }}">
|
|
<figure>
|
|
<div>
|
|
{% for item in film.data.items %}
|
|
<img src="{{ stream_prefix }}/{{ item.id }}/480p.jpg">
|
|
{% endfor %}
|
|
</div>
|
|
<figcaption>
|
|
<img src="{{ stream_prefix }}/{{ film.data.items.0.id }}/timeline64p.jpg">
|
|
</figcaption>
|
|
<figcaption>
|
|
{{ film.data.title | safe }}
|
|
{% if film.data.date %}({{ film.data.date|safe}}){% endif %}
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block end %}
|
|
<script src="{% static 'js/films.js' %}"></script>
|
|
{% endblock %}
|