{% load i18n displaypage_tags %}
{# The media of a text & media section. Context: section, gallery, embed_html; background=True inside "over media" layouts. #}
{% if section.media_type == 'video' %}
  {% if section.video_file %}
    {% if background %}
    <video class="dp-text-media__bg dp-bg-video" autoplay muted loop playsinline preload="metadata" data-dp-bg-video{% if section.image %} poster="{{ section.image.get_absolute_url }}"{% elif section.video_file.poster %} poster="{{ section.video_file.poster.get_absolute_url }}"{% endif %} aria-hidden="true">
      {% if section.mobile_video_file %}<source src="{{ section.mobile_video_file.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
      <source src="{{ section.video_file.get_absolute_url }}">
    </video>
    <button type="button" class="dp-icon-button dp-bg-video__toggle" data-dp-bg-video-toggle hidden aria-label="{% translate 'Pause background video' %}" data-label-pause="{% translate 'Pause background video' %}" data-label-play="{% translate 'Play background video' %}">
      <svg class="dp-icon dp-icon--pause" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6v12M15 6v12"/></svg>
      <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>
    </button>
    {% else %}
    <div class="dp-embed dp-embed--video">
      <video class="dp-embed__frame" controls preload="metadata" playsinline{% if section.image %} poster="{{ section.image.get_absolute_url }}"{% elif section.video_file.poster %} poster="{{ section.video_file.poster.get_absolute_url }}"{% endif %}>
        {% if section.mobile_video_file %}<source src="{{ section.mobile_video_file.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
        <source src="{{ section.video_file.get_absolute_url }}">
        <a href="{{ section.video_file.get_absolute_url }}">{{ section.video_file|dp_media_label }}</a>
      </video>
    </div>
    {% endif %}
  {% elif embed_html %}
    <div class="dp-embed">{% dp_embed embed_html %}</div>
  {% endif %}
{% elif section.media_type == 'gallery' and gallery %}
  {% if background %}
  <div class="dp-fader dp-text-media__bg" data-dp-fader="6000">
    {% for image in gallery %}<img class="dp-fader__slide{% if forloop.first %} is-active{% endif %}" src="{{ image.get_absolute_url }}" alt=""{% if not forloop.first %} loading="lazy"{% endif %}>{% endfor %}
  </div>
  {% else %}
  <div class="dp-carousel dp-carousel--single dp-carousel--images" data-dp-carousel role="region" aria-roledescription="carousel" aria-label="{{ section.title|default:_('Images') }}">
    <div class="dp-carousel__track" id="dp-carousel-{{ section.pk }}" data-dp-carousel-track tabindex="0">
      {% for image in gallery %}
      <div class="dp-carousel__slide" role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} / {{ gallery|length }}">
        <a class="dp-text-media__image" href="{{ image.get_absolute_url }}" data-dp-lightbox="text-media-{{ section.pk }}"{% if image.title %} data-dp-caption="{{ image.title }}"{% endif %}><img src="{{ image.get_absolute_url }}" alt="{{ image.title }}" loading="lazy"></a>
      </div>
      {% endfor %}
    </div>
    {% include "displaypage/includes/carousel_controls.html" with carousel_pk=section.pk %}
  </div>
  {% endif %}
{% elif section.image %}
  {% if background %}
  <picture class="dp-text-media__bg">
    {% if section.mobile_image %}<source srcset="{{ section.mobile_image.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
    <img src="{{ section.image.get_absolute_url }}" alt="{{ section.image.title }}">
  </picture>
  {% else %}
  <a class="dp-text-media__image" href="{{ section.image.get_absolute_url }}" data-dp-lightbox="text-media-{{ section.pk }}"{% if section.caption %} data-dp-caption="{{ section.caption }}"{% endif %}>
    <picture>
      {% if section.mobile_image %}<source srcset="{{ section.mobile_image.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
      <img src="{{ section.image.get_absolute_url }}" alt="{{ section.image.title|default:section.caption }}" loading="lazy">
    </picture>
  </a>
  {% endif %}
{% endif %}