{% load i18n insight_tags %}

<div
  data-insight-carousel
  data-autoplay="{{ carousel_config.autoplay|yesno:'true,false' }}"
  data-show-dots="{{ carousel_config.show_dots|yesno:'true,false' }}"
  data-show-index="{{ carousel_config.show_index|yesno:'true,false' }}"
  data-items-per-slide="{{ carousel_config.items_per_slide|default:1 }}"
  role="region"
  aria-roledescription="{% trans 'carousel' %}"
  aria-label="{{ carousel_config.label|default:_('Content carousel') }}"
  class="flex relative rtl:flex-row-reverse w-full"
>
  <div class="mx-auto max-w-5xl overflow-hidden">
    <div class="carousel-track flex pt-6 pb-16 transition-transform duration-500 ease-in-out">
      {% for item in carousel_config.carousel_items %}
        <div class="carousel-item flex justify-center px-2">
          {% block carousel_content %}{% endblock carousel_content %}
        </div>
      {% endfor %}
    </div>
  </div>

  <!-- Navigation Buttons -->
  {% button label=_("To previous page") icon_name="chevron-left" icon_only=True round=True extra_classes="carousel-prev absolute top-1/2 ltr:left-4 rtl:right-4 -translate-y-1/2" %}
  {% button label=_("To next page") icon_name="chevron-right" icon_only=True round=True extra_classes="carousel-next absolute top-1/2 ltr:right-4 rtl:left-4 -translate-y-1/2" %}

  <!-- Pagination Dots -->
  {% if carousel_config.show_dots %}
    <div class="carousel-dots -translate-x-1/2 flex absolute bottom-4 left-1/2 gap-2">
      {% for i in slides_count %}
        <button class="carousel-dot size-3 bg-transparent border border-insight-surface rounded-insight-full transition" data-index="{{ i }}">
          <span class="sr-only">{% trans "Go to page:" %} {{ i }}</span>
        </button>
      {% endfor %}
    </div>
  {% endif %}

  <!-- Page number -->
  {% if carousel_config.show_index %}
    <div class="carousel-index absolute right-4 bottom-4 px-3 py-1 text-sm bg-insight-surface rounded-insight-overlay">
      <span class="carousel-index-text text-insight-body"></span>
    </div>
  {% endif %}
</div>