{% load i18n displaypage_tags %}
{# Playlist. Without JS each track is a native <audio controls>; sections.js swaps in a compact player. #}
<div class="dp-container dp-container--narrow">
  {% include "displaypage/includes/section_header.html" %}
  {% if tracks %}
  <ol class="dp-playlist" data-dp-playlist>
    {% for track in tracks %}{% if track.url or track.attachment or track.image %}
    <li class="dp-track{% if track.image %} dp-track--with-image{% endif %}" data-dp-track>
      {% if track.url %}
      <button type="button" class="dp-track__play" data-dp-track-play aria-label="{% translate 'Play' %}: {{ track.title }}" data-label-play="{% translate 'Play' %}: {{ track.title }}" data-label-pause="{% translate 'Pause' %}: {{ track.title }}" hidden>
        <svg class="dp-icon dp-icon--play" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.5v13l10.5-6.5z"/></svg>
        <svg class="dp-icon dp-icon--pause" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6v12M15 6v12"/></svg>
      </button>
      {% else %}<span class="dp-track__play dp-track__play--none" aria-hidden="true"></span>{% endif %}
      <div class="dp-track__body">
        <h3 class="dp-track__title">{{ track.title }}</h3>
        {% if track.description %}<p class="dp-track__desc">{{ track.description|linebreaksbr }}</p>{% endif %}
        {% if track.url %}
        <div class="dp-track__progress" data-dp-track-progress hidden>
          <input type="range" class="dp-track__seek" min="0" max="100" step="0.1" value="0" aria-label="{% translate 'Position' %}: {{ track.title }}" data-dp-track-seek disabled>
          <span class="dp-track__time"><span data-dp-track-current>0:00</span><span aria-hidden="true"> / </span><span data-dp-track-duration></span></span>
        </div>
        <audio class="dp-track__audio" controls preload="none" src="{{ track.url }}" data-dp-track-audio>
          <a href="{{ track.url }}">{{ track.title }}</a>
        </audio>
        {% endif %}
        {% if section.allow_download and track.file or track.attachment %}
        <ul class="dp-track__links">
          {% if section.allow_download and track.file %}<li><a class="dp-file-link" href="{{ track.file.get_absolute_url }}" download><svg class="dp-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14"/></svg>{% translate 'Download' %} {{ track.file|dp_file_ext }}<span class="dp-visually-hidden">: {{ track.title }}</span></a></li>{% endif %}
          {% if track.attachment %}<li><a class="dp-file-link" href="{{ track.attachment.get_absolute_url }}"><svg class="dp-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l4 4v14H7zM14 3v4h4"/></svg>{{ track.attachment|dp_media_label }}{% if track.attachment|dp_file_ext %} ({{ track.attachment|dp_file_ext }}){% endif %}</a></li>{% endif %}
        </ul>
        {% endif %}
      </div>
      {% if track.image %}
      <a class="dp-track__image" href="{{ track.image.get_absolute_url }}" data-dp-lightbox="audio-{{ section.pk }}" data-dp-caption="{{ track.title }}">
        <img src="{{ track.image.get_absolute_url }}" alt="{{ track.image.title|default:track.title }}" loading="lazy">
      </a>
      {% endif %}
    </li>
    {% endif %}{% endfor %}
  </ol>
  {% elif can_edit_display_page %}<p class="dp-empty">No tracks yet.</p>{% endif %}
</div>