{% load i18n displaypage_tags %}
{% with cols=section.columns|dp_clamp total=items|length %}
<div class="dp-container">
  {% include "displaypage/includes/section_header.html" %}
  {% if section.display_type == 'carousel' and total %}
  <div class="dp-carousel dp-carousel--gallery{% if section.crop %} dp-gallery--crop{% endif %}" data-dp-carousel role="region" aria-roledescription="carousel" aria-label="{{ section.title|default:_('Gallery') }}" style="--dp-cols: {{ section.columns|dp_clamp:'1,4' }}">
    <div class="dp-carousel__track" id="dp-carousel-{{ section.pk }}" data-dp-carousel-track tabindex="0">
      {% for item in items %}
      <div class="dp-carousel__slide" role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} / {{ total }}">
        {% include "displaypage/includes/gallery_item.html" with counter=forloop.counter %}
      </div>
      {% endfor %}
    </div>
    {% include "displaypage/includes/carousel_controls.html" with carousel_pk=section.pk %}
  </div>
  {% elif total %}
  <div class="dp-gallery dp-gallery--cols-{{ cols }}{% if section.crop %} dp-gallery--crop{% endif %}" style="--dp-cols: {{ cols }}">
    {% for item in items %}{% include "displaypage/includes/gallery_item.html" with counter=forloop.counter %}{% endfor %}
  </div>
  {% elif can_edit_display_page %}<p class="dp-empty">No images yet.</p>{% endif %}
</div>
{% endwith %}