{% extends "base.html" %}
{% block body_attrs %}data-slug-path="{{ slugified_path }}"{% endblock %}
{% block content %}
<h2>Player</h2>

{% if is_playlist %}
<p><strong>Now Playing:</strong> <span id="now-playing">{{ files[0].name }}</span></p>

<{{ mediatype }} id="media-player" controls autoplay preload></{{ mediatype }}>
<ul class="files" id="playlist">
  {% for file in files %}
  <li data-src="{{ file.stream_url }}">
    <span class="track" onclick="playFromList(this)">{{ file.name }}</span>
  </li>
  {% endfor %}
</ul>

{% else %}
<{{ mediatype }} controls autoplay preload>
  <source src="{{ stream_url }}">
  Your browser does not support the {{ mediatype }} tag.
</{{ mediatype }}>
{% endif %}
{% endblock %}
