<div class="basepack-carousel-wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    {% if component_data.fields.title.value is not empty %}
      <div class="basepack-carousel--title-container">
        <h3 class="basepack-carousel--title">{{ component_data.fields.title.value }}</h3>
      </div>
    {% endif %}
    {% if component_data.fields.subtitle.value is not empty %}
      <h4 class="basepack-carousel--subtitle">{{ component_data.fields.subtitle.value }}</h4>
    {% endif %}
    {% if component_data.fields.description.value is not empty  %}
      <div class="basepack-carousel--description">
        {% embed "castorcito:castorcito_formatted_text" with {
          cfield_data: component_data.fields.description
        } %}
        {% endembed %}
      </div>
    {% endif %}
    <div class="basepack-carousel-items"
      data-items="{{ display_settings.display_options.items_per_slide }}"
      data-autoplay="{{ display_settings.display_options.enable_autoplay }}"
      data-delay="{{ display_settings.display_options.autoplay_delay }}"
    >
      {% for item in component_data.fields.carousel_item.items %}
        <div class="basepack-carousel-item ">
          <div class="basepack-carousel-item--content">
            <div class="basepack-carousel-item--inner">
              {% if item.fields.image.value is not empty %}
                <div class="basepack-carousel--item--image">
                  {% embed "castorcito:castorcito_image" with {
                    cfield_data: item.fields.image,
                    cfield_display_settings: display_settings.cfields.carousel_item[item.type].cfields.image
                  } %}
                  {% endembed %}
                </div>
              {% endif %}
              {% if item.fields.title.value is not empty %}
                <div class="basepack-carousel-item--title-container">
                  <h3 class="basepack-carousel-item--title">{{ item.fields.title.value }}</h3>
                </div>
              {% endif %}
              {% if item.fields.link.value is not empty %}
                <div class="basepack-carousel--item--link-wrapper">
                  <a class="basepack-carousel--item--link"
                    href="{{ item.fields.link.external
                            ? item.fields.link.value
                            : drupal_url(item.fields.link.relative) }}"
                    {{ item.fields.link.target ? 'target=' ~ item.fields.link.target }}>
                    {{ item.fields.link.text }}
                  </a>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    {% if component_data.fields.link.value is not empty %}
      <div class="basepack-carousel--link-wrapper">
        <a class="basepack-carousel--link"
          href="{{ component_data.fields.link.external
                  ? component_data.fields.link.value
                  : drupal_url(component_data.fields.link.relative) }}"
          {{ component_data.fields.link.target ? 'target=' ~ component_data.fields.link.target }}>
          {{ component_data.fields.link.text }}
        </a>
      </div>
    {% endif %}
  </div>
</div>
{{ attach_library('castorcito_basepack/slick') }}
