{% include head.html %}
<body>
<div class="site-ctr">
<!-- Navbar -->
{% include nav.html %}
<div class="reactive-bg">
{% assign path = page.url | split: "/" %}
{% assign album = path[2] %}
<br><br>
<div class="card" style="width: 23rem;margin:auto;">
{% if page.has_art %}
<img src="/assets/images/{{album}}/cover.jpg" class="card-img" alt="Cover art">
{% endif %}
<div class="card-body">
<p class="card-text">
<h3>{{page.title}}</h3>
<p>{{page.description}}</p>
<hr>
<!-- Audio controller -->
<audio id="audio" controls style="width:100%">
<source id="audioSource" src="{{page.tracks[0][1]}}" type="audio/mpeg">
Your browser does not support audio players
</audio>
<br><br>
<div id="tracklist">
{% for track in page.tracks %}
<a href="#" data-value="{{track[1]}}">{{track[0]}}</a><br>
{% endfor %}
</div>
</p>
</div>
</div>
</div>
</div>
{% include footer.html %}
<!-- Audio player controller -->
<script>
tracklist.onclick = function (e) {
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('audioSource');
source.src = elm.getAttribute('data-value');
audio.load();
audio.play();
};
</script>
</body>