{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 * - block_content: Block content entity instance with all available fields.
 *
 * @see template_preprocess_block()
 */
#}
{% set classes = [
  'block',
  'block--spacing',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
  'block-lb-testimonials'
] %}

{% set carousel_id = 'carousel-' ~ configuration['block_revision_id'] %}
<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>
  {{ title_prefix }}
  {{ title_suffix }}

  {% block content %}
    {% if section_title or section_subtitle %}
      <div class="section-description">
        <div class="container">
          <h2>{{ section_title }}</h2>
          <p>{{ section_subtitle }}</p>
        </div>
      </div>
    {% endif %}
    <div class="container">
      <div id="{{ carousel_id }}" class="carousel slide" data-ride="carousel" data-wrap="true">
        {# carousel items #}
        <div class="row">
          <div class="carousel-inner col-12 col-md-10 mx-auto align-self-center">
            {% if items %}
              {% for key, item in items %}
                {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
                <div class="carousel-item item {% if loop.index == 1 %} active{% endif %}">
                  <div class="row justify-content-between">
                    <div class="image col-12 col-lg-2">
                      {% if item.image %}
                        <img src="{{  item.image }}" alt="{{  item.alt }}">
                      {% else %}
                        <img src="{{ default_image }}" alt="{{ 'Default image' }}">
                      {% endif %}
                    </div>
                    <figure class="carousel-gallery-info col-12 col-lg-9">
                      {% if item.body %}
                      <blockquote>
                        <p>{{ item.body }}</p>
                      </blockquote>
                      {% endif %}
                      {% if item.name %}
                        <h4 id="heading-{{ safe_hash }}">
                          &#8212; {{ item.name }}
                        </h4>
                      {% endif %}
                    </figure>
                  </div>
                </div>
              {% endfor %}
            {% endif %}
          </div>
          {# indicators #}
          {% if items %}
            {% if show_control_buttons %}
              <ol class="carousel-indicators">
                {% for key, item in items %}
                  <li data-target="#{{ carousel_id }}" data-slide-to="{{ loop.index - 1 }}" class="{% if loop.index == 1 %} active{% endif %}">
                    <span>&nbsp;</span>
                  </li>
                {% endfor %}
              </ol>
            {% endif %}
          {% endif %}
          {% if show_control_buttons %}
            {# prev #}
            <button class="carousel-control-prev col" role="button" data-target="#{{ carousel_id }}" data-slide="prev">
              <div class="chevron d-block" aria-hidden="true">
                {% include "@ws_small_y_testimonials/chevron.html.twig" %}
              </div>
              <span class="sr-only">{{ 'Previous testimonial'|t }}</span>
          </button>
            {# next #}
            <button class="carousel-control-next col" role="button" data-target="#{{ carousel_id }}" data-slide="next">
              <div class="chevron d-block" aria-hidden="true">
                {% include "@ws_small_y_testimonials/chevron.html.twig" %}
              </div>
              <span class="sr-only">{{ 'Next testimonial'|t }}</span>
            </button>
          {% endif %}
        </div>
      </div>
    </div>
  {% endblock %}
</div>
