Personnel filtering

templates/base.html

@@ -25,6 +25,8 @@
 		<p>&copy; {{ now() | date(format="%Y") }} {{ config.title }}</p>
 	</footer>
 
+	{% block script %}
+	{% endblock %}
 </body>
 </html>
 

templates/macros.html

@@ -10,6 +10,7 @@
 
 {% macro personnel() %}
 	{% for person in section.pages %}
+
 		{%- set_global image = "/static/img/placeholder.jpg" %}
 		{%- for asset in person.assets %}
 			{%- if asset is matching(person.slug~"[.](jpg|png)$") %}
@@ -18,10 +19,19 @@
 			{% endif %}
 		{%- endfor %}
 		{%- set image = resize_image(path=image, width=300, height=300, op="fill") %}
-		<div class="person">
+
+		{% set_global dataset = "" %}
+		{% if person.extra.beh %}
+			{% for beh in person.extra.beh %}
+				{% set_global dataset = dataset ~ beh %}
+			{% endfor %}
+		{% endif %}
+
+		<div class="person" data-beh="{{ dataset }}">
 			<img src="{{ image.url }}" alt={{ person.extra.name }}>
 			<div class="name">{{ person.extra.name }}</div>
 			<div class="role">{{ person.extra.role }}</div>
 		</div>
+
 	{% endfor %}
 {% endmacro %}

templates/personnel.html

@@ -5,8 +5,17 @@
 		{{ section.content | safe }}
 	</section>
 	<section class="wrap personnel">
+		<div class="filters">
+			<div id="all" class="button active" data-value="0">Všichni</div>
+			<div id="1" class="button" data-value="1">1. Běh</div>
+			<div id="3" class="button" data-value="3">3. Běh</div>
+		</div>
 		<div class="grid grid-5 gap-3">
 			{{ macros::personnel() }}
 		</div>
 	</section>
 {% endblock %}
+
+{% block script %}
+	<script src="{{ get_url(path="/js/personnel.js") }}"></script>
+{% endblock %}