<div class="basepack-slideshow--slick-wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    <div class="basepack-slideshow--slick" 
          data-bullets="{{ display_settings.display_options.hide_bullets }}" 
          data-numbers="{{ display_settings.display_options.use_numbers }}" 
          data-autoplay="{{ display_settings.display_options.disable_autoplay }}" 
          data-sspeed="{{ display_settings.display_options.slide_speed }}" 
          data-loop="{{ display_settings.display_options.disable_infinite_loop }}" 
          data-arrows="{{ display_settings.display_options.hide_navigation_arrows }}" 
          data-direction="{{ display_settings.display_options.transition_direction }}">

      {% for slideItem in component_data.fields.slides.items  %}
      <div class="basepack-slideshow">
        <div class="basepack-slideshow--item" >
          <div class="basepack-slideshow--item--content">
            {% if slideItem.fields.title.value is not empty %}
            <div class="basepack-slideshow--item--title-container">
              <h3 class="basepack-slideshow--item--title">{{ slideItem.fields.title.value }}</h3>
            </div>
            {% endif %}
            {% if slideItem.fields.subtitle.value is not empty %}
              <h4 class="basepack-slideshow--item--subtitle">{{ slideItem.fields.subtitle.value }}</h4>
            {% endif %}
            {% if slideItem.fields.description.value is not empty  %}
              <div class="basepack-slideshow--item--description">
                {% embed "castorcito:castorcito_formatted_text" with {
                  cfield_data: slideItem.fields.description
                } %}
                {% endembed %}
              </div>
            {% endif %}
            {% if slideItem.fields.link.value is not empty %}
            <div class="basepack-slideshow--item--link-wrapper">
              <a class="basepack-slideshow--item--link" 
                href="{{ slideItem.fields.link.external
                        ? slideItem.fields.link.value
                        : drupal_url(slideItem.fields.link.relative) }}"
                {{ slideItem.fields.link.target ? 'target=' ~ slideItem.fields.link.target }}>
                {{ slideItem.fields.link.text }}
              </a>
            </div>
            {% endif %}
          </div>

        {% if slideItem.fields.image.value is not empty %}
        <div class="basepack-slideshow--item--image">

          {% if slideItem.fields.responsive_image.value is not empty %}

          {% if display_settings.cfields.slides[slideItem.type].cfields.image.image_loading.attribute is not null %}
            {% set loading = display_settings.cfields.slides[slideItem.type].cfields.image.image_loading.attribute %}
          {% else %}
            {% set loading = false %}
          {% endif %}

          <picture>
            {% if display_settings.cfields.slides[slideItem.type].cfields.responsive_image.image_style is not empty%}
              <source media="(max-width: 767px)" srcset="{{ slideItem.fields.responsive_image.value|image_style(display_settings.cfields.slides[slideItem.type].cfields.responsive_image.image_style) }}">
            {% else %}
              <source media="(max-width: 767px)" srcset="{{ file_url(slideItem.fields.responsive_image.value) }}">
            {% endif %}

            {% if display_settings.cfields.slides[slideItem.type].cfields.image.image_style is not empty %}
              {% set comp_height = false %}
              {% set comp_width = false %}
            {% else %}
              {% set comp_height = slideItem.fields.image.height %}
              {% set comp_width = slideItem.fields.image.width %}
            {% endif %}

             {{ drupal_image(slideItem.fields.image.value, display_settings.cfields.slides[slideItem.type].cfields.image.image_style, {
               alt: slideItem.fields.image.alt|t,
               title: slideItem.fields.image.title|t,
               width: comp_width,
               height: comp_height,
               loading,
               }) }}
          </picture>
          {% else %}
            {% embed "castorcito:castorcito_image" with {
              cfield_data: slideItem.fields.image,
              cfield_display_settings: display_settings.cfields.slides[slideItem.type].cfields.image
            } %}
            {% endembed %}
          {% endif %}
        </div>
        {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{{ attach_library('castorcito_basepack/slick') }}
