{% extends "nav.html" %}
{% block title %}{{ name }}{% endblock %}

{% block content %}
<h1>Now Playing: {{ id }}. {{ name }} ({% for _, _, _, album_code in album_info %}{{ album_code }}{% if not loop.last %}, {% endif %}{% endfor %})
</h1>

<!-- Artist info -->

<p>Artist:  </p>
<ul>
{% for name, name_rm, credit in artist_info %}
    <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
{% endfor %}
</ul>

<!-- Album info -->

<p>Album: </p>
<ul>
{% for album_id, track, album_name, album_code in album_info %}
  <li><a href="{{ url_for('albumpage', id=album_id) }}">{{ album_name }}</a> #{{ track }}</li>
{% endfor %}
</ul>

<!-- Clips -->

<p>Clips: </p>
<ul>
{% for song_id, motif_id, motif in clip_info %}
    <li>
        <audio
            controls
            src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
        </audio>
        <a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
    </li>
{% endfor %}
</ul>
{% endblock %}