website/app/views/music.twig

{% extends 'templates/default.php' %}

{% block javascripts %}
	<script type="text/javascript" src="/js/modules/music-player.js"></script>
	<script type="text/javascript" src="/js/music.js"></script>
{% endblock %}

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

{% block content %}

	<header id="music-header" class="row">
		<h1>Music</h1>
	</header>

	<!-- music player -->
	<section class="row">
		<!-- no javascript warning -->
		<noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>

		<!-- left album stuff -->
		<article class="col-sm-5 col-xs-12">
			<div class="thumbnail shadow-1">
				<img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
				<div class="caption">
					<h3>{{ albums[0].title }}</h3>
					{% if albums[0].description %}
						<hr />
						<p>{{ albums[0].description }}</p>
					{% endif %}
				</div>
			</div>
		</article>

		<!-- right album stuff -->
		<div class="col-sm-7 col-xs-12">
			<article id="music-player-card" class="card">
				<audio id="music-player" controls>
					<source src="{{ albums[0].songs[0].audio_file }}.ogg" type="audio/ogg" />
					<source src="{{ albums[0].songs[0].audio_file }}.mp3" type="audio/mpeg" />
				</audio>
			</article>

			<article class="card">
				<ul>
					{% for song in album.songs %}
						<li>{{ song.title }}</li>
					{% endfor %}
				</ul>
			</article>
		</div>
	</section>

	<!-- available albums -->
	<section class="row">
		{% for album in albums %}
			<!-- album details -->
			<div class="col-sm-3 col-xs-6">
				<div class="thumbnail shadow-1">
					<img src="{{ album.album_art }}" alt="{{ album.title }}">
					<div class="caption">
						<h5>{{ album.title }}</h5>
					</div>
				</div>
			</div>
		{% endfor %}
	</section>

{% endblock %}