{% extends "base.jinja" %}
{% 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 id, track, album_name, album_code in album_info %}
  <li><a href="/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 = "/static/clip/{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac">
    </audio>
    <a href = "/motif/{{ motif_id }}"> {{ motif }} </a>
  </li>
{% endfor %}

{% endblock %}