<div class="basepack-banner--wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    <div class="basepack-banner--item {{ component_data.fields.media_type.value ? 'bp-media-type--' ~ component_data.fields.media_type.value }}">
      {% if component_data.fields.title.value is not empty
        or component_data.fields.subtitle.value is not empty
        or component_data.fields.description.value is not empty
        or component_data.fields.link.value is not empty %}
      <div class="basepack-banner--item--content">
        {% if component_data.fields.title.value is not empty %}
        <div class="basepack-banner--item--title-container">
          <h3 class="basepack-banner--item--title">{{ component_data.fields.title.value }}</h3>
        </div>
        {% endif %}
        {% if component_data.fields.subtitle.value is not empty %}
          <h4 class="basepack-banner--item--subtitle">{{ component_data.fields.subtitle.value }}</h4>
        {% endif %}
        {% if component_data.fields.description.value is not empty  %}
          <div class="basepack-banner--item--description">
            {% embed "castorcito:castorcito_formatted_text" with {
              cfield_data: component_data.fields.description
            } %}
            {% endembed %}
          </div>
        {% endif %}
        {% if component_data.fields.link.value is not empty %}
        <div class="basepack-banner--item--link-wrapper">
          <a class="basepack-banner--item--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>
      {% endif %}

      {% if component_data.fields.media_type.value == 'image' %}

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

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

            {% if display_settings.cfields.image.image_loading.attribute is not null %}
              {% set loading = display_settings.cfields.image.image_loading.attribute %}
            {% else %}
              {% set loading = false %}
            {% endif %}

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

            {% if display_settings.cfields.image.image_style is not empty %}
              {% set comp_height = false %}
              {% set comp_width = false %}
            {% else %}
              {% set comp_height = component_data.fields.image.height %}
              {% set comp_width = component_data.fields.image.width %}
            {% endif %}

             {{ drupal_image(component_data.fields.image.value, display_settings.cfields.image.image_style, {
               alt: component_data.fields.image.alt|t,
               title: component_data.fields.image.title|t,
               width: comp_width,
               height: comp_height,
               loading,
               }) }}
            </picture>
          {% else %}
            {% embed "castorcito:castorcito_image" with {
              cfield_data: component_data.fields.image,
              cfield_display_settings: display_settings.cfields.image
            } %}
            {% endembed %}
          {% endif %}
        </div>
        {% endif %}

      {% elseif component_data.fields.media_type.value == 'video' %}
        {% if component_data.fields.video.value is not empty %}
        <div class="basepack-banner--item--video">
          {% autoescape false %}
            {{ component_data.fields.video.value }}
          {% endautoescape %}
        </div>
        {% endif %}
      {% elseif component_data.fields.media_type.value == 'video_image' %}
        {% if component_data.fields.video_image.value is not empty %}
        <div class="basepack-banner--switch">

        {% if component_data.fields.video_image.value is not empty %}
        <div class="basepack-banner--item--video-image">
          {% if component_data.fields.video_responsive_image.value is not empty %}

            {% if display_settings.cfields.image.image_loading.attribute is not null %}
              {% set loading = display_settings.cfields.image.image_loading.attribute %}
            {% else %}
              {% set loading = false %}
            {% endif %}

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

            {% if display_settings.cfields.video_image.image_style is not empty %}
              {% set comp_height = false %}
              {% set comp_width = false %}
            {% else %}
              {% set comp_height = component_data.fields.video_image.height %}
              {% set comp_width = component_data.fields.video_image.width %}
            {% endif %}

           {{ drupal_image(component_data.fields.video_image.value, display_settings.cfields.video_responsive_image.image_style, {
             alt: component_data.fields.video_image.alt|t,
             title: component_data.fields.video_image.title|t,
             width: comp_width,
             height: comp_height,
             loading
             }) }}
            </picture>
          {% else %}
            {% embed "castorcito:castorcito_image" with {
              cfield_data: component_data.fields.video_image,
              cfield_display_settings: display_settings.cfields.video_image
            } %}
            {% endembed %}
          {% endif %}
        </div>
        {% endif %}
        </div>
        {% endif %}
        {% if component_data.fields.video.value is not empty %}
        <div class="basepack-banner--item--video hidden">
          {% autoescape false %}
            {{ component_data.fields.video.value }}
          {% endautoescape %}
        </div>
        {% endif %}
      {% endif %}
    </div>
  </div>
</div>
