{% load i18n displaypage_tags %}
{# Full-width banner slides. The first slide's heading is the page's h1 when this is the first section and the page title is hidden. #}
{% with count=slides|length %}
{% if count %}
<div class="dp-hero{% if count > 1 %} dp-hero--multi{% endif %}" data-dp-hero{% if section.autoplay and count > 1 %} data-dp-autoplay="7000"{% endif %}{% if count > 1 %} role="region" aria-roledescription="carousel" aria-label="{{ section.title|default:_('Highlights') }}"{% endif %}>
  {% for slide in slides %}
  {% dp_link slide.link_url as slide_href %}
  <div class="dp-hero__slide{% if forloop.first %} is-active{% endif %}{% if not slide.image and not slide.video_file %} dp-hero__slide--plain{% endif %}" data-dp-hero-slide{% if count > 1 %} role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} / {{ count }}"{% endif %}{% if not forloop.first %} aria-hidden="true"{% endif %}>
    {% if slide.media_type == 'video' and slide.video_file %}
    <video class="dp-hero__media dp-bg-video" muted loop playsinline preload="{% if forloop.first %}auto{% else %}none{% endif %}"{% if forloop.first %} autoplay{% endif %} data-dp-bg-video{% if slide.image %} poster="{{ slide.image.get_absolute_url }}"{% elif slide.video_file.poster %} poster="{{ slide.video_file.poster.get_absolute_url }}"{% endif %} aria-hidden="true">
      {% if slide.mobile_video_file %}<source src="{{ slide.mobile_video_file.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
      <source src="{{ slide.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' %}"{% if not forloop.first %} tabindex="-1"{% endif %}>
      <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>
    {% elif slide.image %}
    <picture class="dp-hero__media">
      {% if slide.mobile_image %}<source srcset="{{ slide.mobile_image.get_absolute_url }}" media="(max-width: 767px)">{% endif %}
      <img src="{{ slide.image.get_absolute_url }}" alt=""{% if not forloop.first %} loading="lazy"{% endif %}>
    </picture>
    {% endif %}
    {% if slide.heading or slide.text or slide_href %}
    <div class="dp-hero__caption dp-container">
      <div class="dp-hero__panel">
        {% if slide.heading %}{% if forloop.first and first and not display_page.show_title %}<h1 class="dp-hero__heading">{{ slide.heading }}</h1>{% else %}<h2 class="dp-hero__heading">{{ slide.heading }}</h2>{% endif %}{% endif %}
        {% if slide.text %}<p class="dp-hero__text">{{ slide.text|linebreaksbr }}</p>{% endif %}
        {% if slide_href %}<p class="dp-hero__action"><a class="dp-button dp-button--light" href="{{ slide_href }}"{% if not forloop.first %} tabindex="-1"{% endif %}>{{ slide.link_text|default:_("Read more") }}</a></p>{% endif %}
      </div>
    </div>
    {% endif %}
  </div>
  {% endfor %}
  {% if count > 1 %}
  <div class="dp-hero__nav">
    <button type="button" class="dp-icon-button dp-hero__arrow" data-dp-hero-prev aria-label="{% translate 'Previous slide' %}"><svg class="dp-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m14.5 6-6 6 6 6"/></svg></button>
    {% for slide in slides %}<button type="button" class="dp-hero__dot{% if forloop.first %} is-active{% endif %}" data-dp-hero-dot="{{ forloop.counter0 }}" aria-label="{% translate 'Show slide' %} {{ forloop.counter }}"{% if forloop.first %} aria-current="true"{% endif %}></button>{% endfor %}
    <button type="button" class="dp-icon-button dp-hero__arrow" data-dp-hero-next aria-label="{% translate 'Next slide' %}"><svg class="dp-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9.5 6 6 6-6 6"/></svg></button>
    {% if section.autoplay %}<button type="button" class="dp-icon-button dp-hero__pause" data-dp-hero-pause aria-label="{% translate 'Pause slideshow' %}" data-label-pause="{% translate 'Pause slideshow' %}" data-label-play="{% translate 'Play slideshow' %}"><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>{% endif %}
  </div>
  {% endif %}
</div>
{% elif can_edit_display_page %}<div class="dp-container"><p class="dp-empty">No slides yet.</p></div>{% endif %}
{% endwith %}