<div class="advancedpack-swiper-js-wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner swiper">
    <div class="advancedpack-swiper-js swiper-wrapper
          {{ 'ap-swiper-' ~ display_settings.display_options.effect }} 
          {{ display_settings.display_options.direction == 'vertical' ? 'swiper-vertical' : '' }}
          {{ display_settings.display_options.slide_per_views > 1 ? 'swiper-columns' : 'swiper-no-columns' }}" 
          data-slide-per-view="{{ display_settings.display_options.slide_per_views }}" 
          data-space-between="{{ display_settings.display_options.space_between }}" 
          data-centered-slides="{{ display_settings.display_options.centered_slides }}"  
          data-loop="{{ display_settings.display_options.loop }}" 
          data-navigation="{{ display_settings.display_options.navigation }}" 
          data-keyboard="{{ display_settings.display_options.keyboard }}" 
          data-effect="{{ display_settings.display_options.effect }}" 
          data-creative-style="{{ display_settings.display_options.creative_style }}" 
          data-scrollbar="{{ display_settings.display_options.scrollbar }}" 
          data-scrollbar-hide="{{ display_settings.display_options.scrollbar_hide }}" 
          data-direction="{{ display_settings.display_options.direction }}" 
          data-free-mode="{{ display_settings.display_options.free_mode }}" 
          data-zoom="{{ display_settings.display_options.zoom }}" 
          data-autoplay="{{ display_settings.display_options.autoplay }}" 
          data-delay-autoplay="{{ display_settings.display_options.delay_autoplay }}" 
          data-disable-on-interaction="{{ display_settings.display_options.disable_on_interaction }}" 
          data-autoplay-progress="{{ display_settings.display_options.autoplay_progress }}" 
          data-pagination="{{ display_settings.display_options.pagination }}"
          data-clickable="{{ display_settings.display_options.clickable }}"   
          data-pagination-type="{{ display_settings.display_options.pagination_type }}"  
          data-mousewheel="{{ display_settings.display_options.mousewheel }}">

      {% for slideItem in component_data.fields.slides.items  %}
      <div class="advancedpack-swiper-js--item--slide swiper-slide">
        {% if display_settings.display_options.zoom %}
        <div class="swiper-zoom-container">
        {% endif %}
        

        <div class="advancedpack-swiper-js--item" >
          <div class="advancedpack-swiper-js--item--content">
            {% if slideItem.fields.title.value is not empty %}
            <div class="advancedpack-swiper-js--item--title-container">
              <h3 class="advancedpack-swiper-js--item--title">{{ slideItem.fields.title.value }}</h3>
            </div>
            {% endif %}
            {% if slideItem.fields.subtitle.value is not empty %}
              <h4 class="advancedpack-swiper-js--item--subtitle">{{ slideItem.fields.subtitle.value }}</h4>
            {% endif %}
            {% if slideItem.fields.description.value is not empty  %}
              <div class="advancedpack-swiper-js--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="advancedpack-swiper-js--item--link-wrapper">
              <a class="advancedpack-swiper-js--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="advancedpack-swiper-js--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>
        {% if display_settings.display_options.zoom %}
          </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% if display_settings.display_options.scrollbar %}
    <div class="swiper-scrollbar"></div>
    {% endif %}
    {% if display_settings.display_options.pagination %}
    <div class="swiper-pagination"></div>
    {% endif %}
    {% if display_settings.display_options.autoplay_progress %}
    <div class="swiper-autoplay-progress">
      <svg viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="20"></circle>
      </svg>
      <span></span>
    </div>
    {% endif %}
    {% if display_settings.display_options.navigation %}
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    {% endif %}

  </div>
</div>
{{ attach_library('castorcito_advancedpack/swiperjs') }}
