{#
/**
 * @file
 * CivicTheme Slider component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - previous_label: [string] Text for previous button.
 * - next_label: [string] Text for next button.
 * - vertical_spacing: [string] Slider vertical spacing (top, bottom, or both).
 * - with_background: [boolean] Whether to display with a background.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - slides: [string] Slides HTML content.
 *
 * Slots:
 * - content_top: Top content.
 * - title: Slider title.
 * - content_bottom: Bottom content.
 *
 * Blocks:
 * - content_top_block
 * - top_controls_block
 * - slides_block
 * - controls_block
 * - content_bottom_block
 */
#}

{% set with_background_class = with_background ? 'ct-slider--with-background' : '' %}
{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s'|format(theme_class, with_background_class, vertical_spacing_class, modifier_class|default('')) %}

{% if slides is not empty %}
  <div
    role="region"
    aria-label="{{ title|default('Slider') }}"
    aria-roledescription="carousel"
    class="ct-slider {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    <div class="container">
      <div class="row">
        <div class="col-xxs-12">
          {% block content_top_block %}
            {% if content_top is not empty %}
              <div class="ct-slider__content__top">
                {{- content_top|raw -}}
              </div>
            {% endif %}
          {% endblock %}

          <div class="ct-slider__container" data-slider>
            {% block top_controls_block %}
              {% if title is not empty %}
                {% include 'civictheme:heading' with {
                  theme: theme,
                  content: title,
                  level: 3,
                  modifier_class: 'ct-slider__title',
                } only %}
              {% endif %}
            {% endblock %}

            {% block slides_block %}
              <div class="ct-slider__slides" data-slider-panel>
                <div class="ct-slider__slides__inner" data-slider-rail>
                  {{- slides|raw -}}
                </div>
              </div>
            {% endblock %}

            {% block controls_block %}
              <div class="ct-slider__controls">
                <div class="ct-slider__controls__inner">
                  {% include 'civictheme:button' with {
                    theme: theme,
                    text: previous_label|default('Previous'),
                    type: 'secondary',
                    icon: 'left-arrow',
                    icon_placement: 'before',
                    modifier_class: 'ct-slider__controls__previous',
                    attributes: 'data-slider-previous',
                  } only %}
                  {% include 'civictheme:button' with {
                    theme: theme,
                    text: next_label|default('Next'),
                    type: 'secondary',
                    icon: 'right-arrow-2',
                    icon_placement: 'after',
                    modifier_class: 'ct-slider__controls__next',
                    attributes: 'data-slider-next',
                  } only %}
                </div>

                {% include 'civictheme:tag' with {
                  theme: theme,
                  content: 'Slide 1',
                  modifier_class: 'ct-slider__controls__progress-indicator',
                  attributes: 'aria-live="polite" data-slider-progress',
                } only %}
              </div>
            {% endblock %}
          </div>

          {% block content_bottom_block %}
            {% if content_bottom is not empty %}
              <div class="ct-slider__content__bottom">
                {{- content_bottom|raw -}}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>
{% endif %}
