{% load i18n displaypage_tags %}
<div class="dp-container{% if section.display_type != 'grid' %} dp-container--narrow{% endif %}">
  {% include "displaypage/includes/section_header.html" %}
  {% with count=quotes|length %}
  {% if section.display_type == 'carousel' and count > 1 %}
  <div class="dp-carousel dp-carousel--single dp-carousel--quotes" data-dp-carousel role="region" aria-roledescription="carousel" aria-label="{{ section.title|default:_('Quotes') }}">
    <div class="dp-carousel__track" id="dp-carousel-{{ section.pk }}" data-dp-carousel-track tabindex="0">
      {% for quote in quotes %}
      <div class="dp-carousel__slide" role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} / {{ count }}">
        {% include "displaypage/includes/quote.html" with quote=quote variant="feature" %}
      </div>
      {% endfor %}
    </div>
    {% include "displaypage/includes/carousel_controls.html" with carousel_pk=section.pk %}
  </div>
  {% elif section.display_type == 'grid' %}
  <div class="dp-quote-grid dp-quote-grid--{% if count == 1 %}one{% elif count == 2 or count == 4 %}two{% else %}three{% endif %}">
    {% for quote in quotes %}{% include "displaypage/includes/quote.html" with quote=quote variant="card" %}{% endfor %}
  </div>
  {% else %}
  <div class="dp-quote-list">
    {% for quote in quotes %}{% include "displaypage/includes/quote.html" with quote=quote variant="feature" %}{% endfor %}
  </div>
  {% endif %}
  {% if not count and can_edit_display_page %}<p class="dp-empty">No quotes yet.</p>{% endif %}
  {% endwith %}
</div>