filter/sort

app/templates/films.html

@@ -3,28 +3,29 @@
 {% block main %}
 
 <div class="films">
-	<!--
-	<div>
+	<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="position" selected>Default</option>
 			<option value="title">Title</option>
+			<option value="year">Year</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 }}"
+			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>