{% extends "base.html" %} {% block body_class%}animated animated-text{% endblock %} {% block main %} <div class="films"> <!-- <div> <strong>Sort:</strong> <select id="sort-select"> <option value="position" selected>Default</option> <option value="title">Title</option> <option value="duration">Duration</option> <option value="hue">Hue</option> <option value="saturation">Saturation</option> <option value="lightness">Lightness</option> </select> </div> --> <div id="films-list"> {% for film in films %} <div class="film" data-position="{{ film.position }}" data-title="{{ film.data.title }}" data-duration="{{ film.data.duration }}" data-hue="{{ film.data.hue }}" data-saturation="{{ film.data.saturation }}" data-lightness="{{ film.data.lightness }}" > <a href="{{ film.get_absolute_url }}"> <figure> <div> {% for item in film.data.items %} <img src="https://archive.njp.ma/{{ item.id }}/480p.jpg"> {% endfor %} </div> <figcaption> <img src="https://archive.njp.ma/{{ 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 %}