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

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

{% block content %}

	<header class="music-header row">
		<h3>Music</h3>
	</header>

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

		<!-- music player -->
		<article id="music-player" class="card col-md-5">
			<audio controls>
				<source src="/audio/opting_out_ep/01 Opting Out.ogg" type="audio/ogg">
  				<source src="/audio/opting_out_ep/01 Opting Out.mp3" type="audio/mpeg">
			</audio>

			<h4>Now Playing</h4>
			<ol class="now-playing-list">
				<li data-title="Opting Out" data-album="Opting Out EP" data-sequence="1" data-path="/audio/opting_out_ep/01 Opting Out"><a href="">Opting Out</a></li>
				<li data-title="Elsewhere" data-album="Opting Out EP" data-sequence="2" data-path="/audio/opting_out_ep/02 Elsewhere"><a href="">Elsewhere</a></li>
				<li data-title="What Happened to Forever?" data-album="Opting Out EP" data-sequence="3" data-path="/audio/opting_out_ep/03 What Happened to Forever"><a href="">What Happened to Forever?</a></li>
				<li data-title="Lady" data-album="Opting Out EP" data-sequence="4" data-path="/audio/opting_out_ep/04 Lady"><a href="">Lady</a></li>
			</ol>
		</article>

		<!-- music playlist section -->
		<article id="music-list-section" class="col-md-7">
			<!-- music playlists -->
			<div class="music-list card"><a href="">
				<h3 class="music-list-header selected">Opting Out EP</h3>
				<ol>
					<li data-title="Opting Out" data-album="Opting Out EP" data-sequence="1" data-path="/audio/opting_out_ep/01 Opting Out">Opting Out</li>
					<li data-title="Elsewhere" data-album="Opting Out EP" data-sequence="2" data-path="/audio/opting_out_ep/02 Elsewhere">Elsewhere</li>
					<li data-title="What Happened to Forever?" data-album="Opting Out EP" data-sequence="3" data-path="/audio/opting_out_ep/03 What Happened to Forever">What Happened to Forever?</li>
					<li data-title="Lady" data-album="Opting Out EP" data-sequence="4" data-path="/audio/opting_out_ep/04 Lady">Lady</li>
				</ol>
			</a></div>
			<div class="music-list card"><a href="">
				<h3 class="music-list-header">Brain Scrub - Single</h3>
				<ol>
					<li data-title="Brain Scrub" data-album="Brain Scrub - Single" data-sequence="1" data-path="/audio/opting_out_ep/01 Brain Scrub">Brain Scrub</li>
				</ol>
			</a></div>
		</article>
	</section>

{% endblock %}