<div class="basepack-image-gallery-wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    <div class="basepack-image-gallery 
                {{ display_settings.display_options.enable_modal ? 'basepack-image-gallery--modal' }}
                basepack-image-gallery--{{ display_settings.display_options.view_mode  }}">
      <div class="basepack-image-gallery--header">
        {% if component_data.fields.title.value is not empty %}
        <div class="basepack-image-gallery--title-container">
          <h3 class="basepack-image-gallery--title">{{ component_data.fields.title.value }}</h3>
        </div>
        {% endif %}
        {% if component_data.fields.subtitle.value is not empty %}
          <h4 class="basepack-image-gallery--subtitle">{{ component_data.fields.subtitle.value }}</h4>
        {% endif %}
        {% if component_data.fields.description.value is not empty  %}
          <div class="basepack-image-gallery--description">
          {% embed "castorcito:castorcito_formatted_text" with {
            cfield_data: component_data.fields.description
          } %}
          {% endembed %}
          </div>
        {% endif %}
      </div>
      <div class="basepack-image-gallery--body">
        <div class="basepack-image-gallery--items">
        {% for item in component_data.fields.image_gallery_item.items %}
          <div class="basepack-image-gallery--item">
            {% if item.fields.image.value is not empty %}
            <div class="basepack-image-gallery--item--image">
            {% if display_settings.display_options.view_mode == 'grid' %}
              {% if display_settings.display_options.enable_modal %}
                <a class="basepack-image-gallery--item--box" 
                   data-fancybox="gallery" 
                   {{ item.fields.title.value is not empty ? 'data-caption=' ~ item.fields.title.value|escape('html_attr') : '' }}
                   href="{{ item.fields.image.value |file_url }}">
              {% endif %}
            {% endif %}

            {% embed "castorcito:castorcito_image" with {
              cfield_data: item.fields.image,
              cfield_display_settings: display_settings.cfields.image_gallery_item[item.type].cfields.image
            } %}
            {% endembed %}
            {% if display_settings.display_options.view_mode == 'grid' %}
              {% if display_settings.display_options.enable_modal %}
                </a>
              {% endif %}
            {% endif %}
            </div>
            {% endif %}
            {% if display_settings.display_options.enable_modal == 0 %}
              {% if item.fields.title.value is not empty %}
              <div class="basepack-image-gallery--item--title-container">
                <h5 class="basepack-image-gallery--item--title">{{ item.fields.title.value }}</h5>
              </div>
              {% endif %}
            {% endif %}
          </div>
        {% endfor %}
        </div>
        {% if display_settings.display_options.view_mode == 'with-thumbnail' %}
        <div class="basepack-image-gallery--thumbnails">
        {% for item in component_data.fields.image_gallery_item.items %}
          <div class="basepack-image-gallery--item">
            {% if item.fields.image.value is not empty %}
            <div class="basepack-image-gallery--item--image">
            {% embed "castorcito:castorcito_image" with {
              cfield_data: item.fields.image,
              cfield_display_settings: display_settings.cfields.image_gallery_item[item.type].cfields.image
            } %}
            {% endembed %}
            </div>
            {% endif %}
          </div>
        {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% if display_settings.display_options.view_mode == 'with-thumbnail' %}
  {{ attach_library('castorcito_basepack/slick') }}
{% elseif display_settings.display_options.view_mode == 'grid' %}
  {% if display_settings.display_options.enable_modal %}
    {{ attach_library('castorcito_basepack/fancybox') }}
  {% endif %}
{% endif %}
