{% extends "frame.twig" %}

{% block title %}
	{{ title }}
{% endblock %}

	{% block mainContent %}
		<section>
			<div class="page-title">
				<span>{{title}}</span><br>
                This is a custom temlate
			</div>
		</section>
		<article>
			<div class="page">
				<p>{{content | raw}}</p>
				<div>
					<div class="page_files">
						<div class="page_doc">
						<strong>Files</strong><br/>
							{% for doc in files %}
								{% if doc.type != "mp3" %}
									{% set path = doc.file|split('/') %}
									<a href="{{doc.file}}">{{path[6]}}</a>
								
								{% endif %}
							{% endfor %}
						</div>
						<div class="page_sounds">
						<strong>Sounds</strong><br/>
							{% for doc in files %}
							{% if doc.type == "mp3" %}
								<audio controls>
									<source src="{{doc.file}}" type="audio/mpeg">
									Your browser does not support the audio element.
								</audio> 
							{% endif %}
							{% endfor %}
						</div>
						
					</div>
					<br/>
					{{meta['who']}} dropped this {{ meta['when']  }}<br  />
					<strong>tags: </strong>
					{% for tag in meta['tags'] %}
						{% if dynamicRender is defined %}
							{% if dynamicRender == 'true'  %}
								<a href="{{ "/tags/"~tag.slug }}">{{ tag.label }}</a>
							{% else  %}
								<a href="{{ "/tags/"~tag.slug~".html"  }}">{{ tag.label }}</a>
							{% endif  %}
						{% else  %}
							<a href="{{ "/tags/"~tag.slug~".html"  }}">{{ tag.label }}</a>
						{% endif  %}
					{% endfor %}
					
				</div>
			</div>
		</article>
	{% endblock %}