{% load components %}

{# Django template for Carousel #}
<div class="usx-carousel {{ className|default:'' }}" role="region" aria-roledescription="carousel" aria-label="{{ ariaLabel|default:'Featured content' }}">
  <div class="usx-carousel__viewport" tabindex="-1">
    <div class="usx-carousel__track">
      {% if children %}
        {{ children|safe }}
      {% elif slides %}
        {% for slide in slides %}
            <section id="{{ id }}-slide-{{ forloop.counter }}" class="usx-carousel__slide" role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} of {{ slides|length }}" tabindex="0">
              {% if slide.content %}
                {{ slide.content|safe }}
              {% elif slide.src %}
                {% image src=slide.src alt=slide.alt caption=slide.caption hideCaption=True href=slide.href rounded=slide.rounded circular=slide.circular objectFit=slide.objectFit maxWidth=slide.maxWidth maxHeight=slide.maxHeight className=slide.className %}{% endimage %}
              {% else %}
                {# Fallback: render the slide object/string directly #}
                {{ slide|safe }}
              {% endif %}
            </section>
          {% endfor %}
      {% else %}
        <p><em>No slides available.</em></p>
      {% endif %}
    </div>
  </div>

  {% if showDots %}
    <div class="usx-carousel__dots" aria-label="Slide navigation">
      {% if slides %}
        {% for slide in slides %}
          <a href="#{{ id }}-slide-{{ forloop.counter }}" aria-label="Go to slide {{ forloop.counter }}" tabindex="-1"></a>
        {% endfor %}
      {% elif slideIds %}
        {% for slideId in slideIds %}
          <a href="{{ slideId }}" aria-label="Go to slide {{ forloop.counter }}" tabindex="-1"></a>
        {% endfor %}
      {% endif %}
    </div>
  {% endif %}
</div>