{{ attach_library('goizueta_theme/variable-content-carousel-item') }}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'variable-content-carousel-item' %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}
{% import '@components/icons/icons.twig' as icons %}

<article {{ attributes|raw }}>
  {% if variable_content_carousel_item.heading %}
    <div class="variable-content-carousel-item__title">
      {%
        include '@components/heading/heading.twig' with {
          "heading" : variable_content_carousel_item.heading
        } only
      %}
    </div>
  {% endif %}

  {% if variable_content_carousel_item.image %}
    <div class="variable-content-carousel-item__image">
      {{ variable_content_carousel_item.image }}
    </div>
  {% elseif variable_content_carousel_item.video %}
    <div class="variable-content-carousel-item__image">
      <a href="{{ variable_content_carousel_item.video.url }}" class="variable-content-carousel-item__video-link" data-lity aria-label="Link to open video">
        {{ variable_content_carousel_item.video.poster }}
        <span class="variable-content-carousel-item__icon-wrapper">
          {{ icons.get('play', 'spotlight__play-icon') }}
        </span>
      </a>
    </div>
  {% endif %}


    <div class="variable-content-carousel-item__text">
      {% if variable_content_carousel_item.eyebrow %}
        <div class="eyebrow">
          {{ variable_content_carousel_item.eyebrow }}
        </div>
      {% endif %}
      {% if variable_content_carousel_item.sub_heading %}
        {% include '@components/heading/heading.twig' with {
          "heading" : variable_content_carousel_item.sub_heading
        } only %}
      {% endif %}
      {% if variable_content_carousel_item.text %}
        {{ variable_content_carousel_item.text }}
      {% endif %}
    </div>


  {% if variable_content_carousel_item.button %}
    <div class="variable-content-carousel-item__button">
      {%
        include '@components/button/button.twig' with {
          "button": {
            "text": variable_content_carousel_item.button.text,
            "url": variable_content_carousel_item.button.url,
            "icon": variable_content_carousel_item.button.icon,
          }
        } only
      %}
    </div>
  {% endif %}
</article>