{% import "macros.html" as macros %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{% block title %}{{ config.title }}{% endblock %}</title>
	<link rel="stylesheet" href="{{ get_url(path="/style.css") }}">
	<link rel="icon" type="image/png" href="{{ get_url(path="/favicon.png") }}">
</head>
<body>
{% block content %}
	<main class="songs">
		<section class="filters">
			<form>
				<input type="search" placeholder="Hledat">
				<input type="reset" value="">
			</form>
			<div class="button" data-category="classic">Classic</div>
			<div class="button" data-category="mixtape">Mixtape</div>
		</section>
		<section class="song-list">
			{% for song in section.pages %}
				<div class="{{ macros::primary_category(song=song) }}"
					data-title="{{ song.title }}"
					data-category="{{ macros::primary_category(song=song) }}"
					{% if song.taxonomies["artist"] %}
						data-artist="{{ song.taxonomies["artist"][0] }}"
					{% endif %}
				>
					<div class="meta">
						<div class="title">{{ song.title }}</div>
						{% if song.taxonomies["artist"] %}
							<div class="artist">{{ song.taxonomies["artist"][0] }}</div>
						{% endif %}
					</div>
					<div class="links">
						<a href="{{ song.permalink }}" class="html"></a>
						{% for asset in song.assets %}
							{% if asset is matching(song.slug~"[.](pdf)$") %}
								<a href="{{ asset }}" class="pdf"></a>
							{% endif %}
						{% endfor %}
					</div>
				</div>
			{% endfor %}
		</section>
	</main>
{% endblock %}
{% block script %}
	<script src="{{ get_url(path="/js/filter.js") }}"></script>
{% endblock %}
</body>
</html>
