{% load i18n %}
{# Previous / next for a [data-dp-carousel]; sections.js shows them when the track overflows. Context: carousel_pk (the track id is dp-carousel-<pk>). #}
<div class="dp-carousel__controls" data-dp-carousel-controls hidden>
  <button type="button" class="dp-icon-button dp-carousel__btn" data-dp-carousel-prev aria-controls="dp-carousel-{{ carousel_pk }}" aria-label="{% translate 'Previous' %}"><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>
  <span class="dp-carousel__status" data-dp-carousel-status aria-live="polite"></span>
  <button type="button" class="dp-icon-button dp-carousel__btn" data-dp-carousel-next aria-controls="dp-carousel-{{ carousel_pk }}" aria-label="{% translate 'Next' %}"><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>
</div>