{% 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 }}" > <h1><a href="{{ film.get_absolute_url }}"> <span>{{ film.data.title | safe }}</span> <span>{{ film.data.title_zh | safe }}</span> </a></h1> <h2> {% for director in film.data.director %} <span>{{ director|safe }}</span> {% endfor %} </h2> </div> {% endfor %} </div> </div> {% endblock %} {% block end %} <!-- <script src="{% static 'js/films.js' %}"></script> --> {% endblock %}