{% extends "layout.html" %}
{% block body %}
<audio controls id="player" preload="auto" tabindex="0">
  {% for m in musics: %}
  <source  src="{{ url_for('collection.download', artists=m.artist, albums=m.album, titles=m.title) }}"/>
  {%- if loop.index == 1 %}{% break %}{% endif %}
  {% endfor %}
  Your browser does not support the audio element.
</audio>
<ul id="playlist" class="list-group">
  {% for m in musics: %}
  <li class="list-group-item{%- if loop.index == 1 %} active{% endif %}" >
      <a href="{{ url_for('collection.download', artists=m.artist, albums=m.album, titles=m.title) }}">
          {{ download_title(m) }}
      </a>
  </li>
  {% endfor %}
</ul>
<script src="/static/player.js"></script>
{% endblock %}
