{% extends "index.html" %}
{% block content %}
	<main class="song">
		{% for asset in page.assets %}
			{% if asset is matching(page.slug~"[.](html)$") %}
				<iframe class="song" src="{{ asset }}"></iframe>
				<nav class="controls hidden">
					<section class="font-size">
						<div class="button icon-subtract" id="font-size-decrease"></div>
						<div class="button icon-font-size" id="font-size-reset"></div>
						<div class="button icon-add" id="font-size-increase"></div>
					</section>
					<section class="transpose">
						<div class="button icon-subtract" id="transpose-decrease"></div>
						<div class="button icon-transpose" id="transpose-reset"></div>
						<div class="button icon-add" id="transpose-increase"></div>
					</section>
					<section class="autoscroll">
						<div class="button icon-scroll" id="autoscroll"></div>
					</section>
				</nav>
			{% endif %}
		{% endfor %}
	</main>
{% endblock %}

{% block script %}
	<script src="{{ get_url(path="/js/song-controls.js") }}"></script>
{% endblock %}