{# LIBRARIES #}
{{ attach_library('ui_patterns/bs_carousel.carousel_lib') }}
{% if slides|length > 1 %}
  {{ attach_library('ui_patterns/libraries.bs_carousel') }}
{% endif %}

{# VARIABLES #}
{% set fade = fade|default(false) %}
{% set show_indicators = show_indicators|default(false) %}
{% set show_playpause = show_playpause|default(false) %}
{% set show_controls = show_controls|default(false) %}
{% set slide_classes = slide_classes|default('') %}
{% set overlay = overlay|default(false) %}

{% set carousel_attributes = carousel_attributes|default(create_attribute())
  .setAttribute("data-bs-interval", data_interval|default('5000'))
  .setAttribute("data-bs-keyboard", data_keyboard|default('true'))
  .setAttribute("data-bs-pause", data_pause|default('hover'))
  .setAttribute("data-bs-ride", data_ride|default('carousel'))
  .setAttribute("data-bs-wrap", data_wrap|default('true'))
  .setAttribute("data-bs-touch", data_touch|default('true'))
  .setAttribute("id", "crslc-#{ pid }")
%}

{% set carousel_class = [
  carousel_class|default(""),
  fade ? 'carousel-fade',
  'carousel', 'slide'
] %}

{# TEMPLATE #}
<div {{ carousel_attributes.addClass(carousel_class) }}>

  {# Overlay. This is one per carousel. Each slide can have an overlay too #}
  {% if overlay %}
    <div class="carousel-overlay">
      {{ overlay|raw }}
    </div>
  {% endif %}
  {% if overlay_src and overlay_alt %}
    <div class="carousel-overlay">
      <img class="poly-over" src="{{ overlay_src }}" alt="{{ overlay_alt }}" />
    </div>
  {% endif %}

  {% block carousel_inner %}
  <div class="carousel-inner slide-show">
    {% for slide in slides %}
      {% set vars = {
        'sid': slide['sid'] ? slide['sid'] : 'sid-' ~ random(),
        'active': loop.first,
        'slide': slide['slide'] ? slide['slide'] : false,
        'title': slide['title'] ? slide['title'] : false,
        'subtitle': slide['subtitle'] ? slide['subtitle'] : false,
        'body': slide['body'] ? slide['body'] : false,
        'link_title': slide['link_title'] ? slide['link_title'] : false,
        'link_url': slide['link_url'] ? slide['link_url'] : false,
        'image': slide['image'] ? slide['image'] : false,
        'image_src': slide['image_src'] ? slide['image_src'] : false,
        'image_alt': slide['image_alt'] ? slide['image_alt'] : false,
        'overlay': slide['overlay'] ? slide['overlay'] : false,
        'overlay_src': slide['overlay_src'] ? slide['overlay_src'] : false,
        'overlay_alt': slide['overlay_alt'] ? slide['overlay_alt'] : false,
        'readmore': slide['readmore'] ? slide['readmore'] : false,
        'link_scope': slide['link_scope'] ? slide['link_scope'] : false,
        'slide_classes': slide_classes,
      } %}
      {{ pattern('bs_slide', vars) }}
    {% endfor %}
  </div>
  {% endblock %}

  {% block carousel_controls %}
  {% if slides|length > 1 and show_controls %}
    <button class="carousel-control-prev carousel-control" type="button" data-bs-target="#crslc-{{ pid }}" data-bs-slide="prev">
      <i class="fas fa-chevron-left display-6"></i>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next carousel-control" type="button" data-bs-target="#crslc-{{ pid }}" data-bs-slide="next">
      <i class="fas fa-chevron-right display-6"></i>
      <span class="visually-hidden">Next</span>
    </button>
  {% endif %}
  {% endblock %}

  {% block carousel_transport %}
  {% if slides|length > 1 and show_playpause %}
    <div class="crsl-transport">
      <button id="crsl-play-{{ pid }}" class="crsl-trsp crsl-play icon-button visually-hidden" type="button" data-crsl-target="crslc-{{ pid }}" data-crsl-action="play">
        <i class="fas fa-play"></i>
        <span class="visually-hidden">Play</span>
      </button>
      <button id="crsl-pause-{{ pid }}" class="crsl-trsp crsl-pause icon-button" type="button" data-crsl-target="crslc-{{ pid }}" data-crsl-action="pause">
        <i class="fas fa-pause"></i>
        <span class="visually-hidden">Pause</span>
      </button>
    </div>
  {% endif %}
  {% endblock %}

  {% block carousel_indicators %}
  {% if slides|length > 1 and show_indicators  %}
    <div class="carousel-indicators">
      {% for slide in slides %}
        <button
          type="button"
          data-bs-target="#crslc-{{ pid }}"
          data-bs-slide-to="{{ loop.index0 }}"
          class="{{ loop.first ? "active" }}"
          aria-current="{{ loop.first ? "true" : "false" }}"
          aria-label="Slide {{ loop.index }}">
        </button>
      {% endfor %}
    </div>
  {% endif %}
  {% endblock %}

</div>
