{% load i18n displaypage_tags %}
{# One player and a list of videos; sections.js switches the player. Without JS the list entries link to the videos. #}
<div class="dp-container">
  {% include "displaypage/includes/section_header.html" %}
  {% if videos %}
  {% with first=videos.0 count=videos|length %}
  <div class="dp-vgallery{% if count > 1 %} dp-vgallery--multi{% endif %}" data-dp-video-gallery>
    <div class="dp-vgallery__stage">
      <div class="dp-embed" data-dp-video-stage>{% dp_video_iframe first.url first.title %}</div>
      {% if count > 1 %}<p class="dp-vgallery__now" data-dp-video-now aria-live="polite">{{ first.title }}</p>{% endif %}
    </div>
    {% if count > 1 %}
    <ul class="dp-vgallery__list" aria-label="{% translate 'Choose a video' %}">
      {% for video in videos %}
      <li class="dp-vgallery__entry">
        <a class="dp-vgallery__thumb{% if forloop.first %} is-active{% endif %}" href="{{ video.url }}"{% if forloop.first %} aria-current="true"{% endif %} data-dp-video-src="{{ video.player_url }}" data-dp-video-service="{{ video.url|dp_embed_service }}" data-dp-video-title="{{ video.title|default:'' }}">
          <span class="dp-vgallery__image">
            {% if video.thumbnail %}<img src="{{ video.thumbnail.get_absolute_url }}" alt="" loading="lazy">{% endif %}
            <span class="dp-vgallery__play" aria-hidden="true"><svg class="dp-icon" viewBox="0 0 24 24" focusable="false"><path d="M8 5.5v13l10.5-6.5z"/></svg></span>
          </span>
          <span class="dp-vgallery__label">{% if video.title %}{{ video.title }}{% else %}{% translate 'Video' %} {{ forloop.counter }}{% endif %}{% if video.date %} <time class="dp-vgallery__date" datetime="{{ video.date|date:'c' }}">{{ video.date|date:'j M Y' }}</time>{% endif %}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
  {% endwith %}
  {% elif can_edit_display_page %}<p class="dp-empty">No videos yet.</p>{% endif %}
</div>