<div class="basepack-tabs--wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    <div class="basepack-tabs">
      <div class="basepack-tabs--header">
        {% if component_data.fields.title.value is not empty  %}
        <div class="basepack-tabs--title-container">
          <h3 class="basepack-tabs--title">{{ component_data.fields.title.value }}</h3>
        </div>
        {% endif %}
        {% if component_data.fields.subtitle.value is not empty  %}
        <h4 class="basepack-tabs--subtitle">{{ component_data.fields.subtitle.value }}</h4>
        {% endif %}
        {% if component_data.fields.description.value is not empty  %}
        <div class="basepack-tabs--description">
        {% embed "castorcito:castorcito_formatted_text" with {
          cfield_data: component_data.fields.description
        } %}
        {% endembed %}
        </div>
        {% endif %}
      </div>
      <div class="basepack-tabs--tabs-wrapper {{ component_data.fields.tab_alignment.value }}">
        <div class="basepack-tabs--tabs">
          {% for tabItem in component_data.fields.tab_item.items %}
            <div data-tab-item="tab-item-{{ loop.index }}" class="basepack-tabs--item-tab {{ loop.index == 1 ? 'is-active' }}">
              {{ tabItem.head.fields.label.value }}
            </div>
          {% endfor %}
        </div>
        <div class="basepack-tabs--item-wrapper">
        {% for tabContent in component_data.fields.tab_item.items %}
        <div class= "tab-item-{{ loop.index }} basepack-tabs--item-content--wrapper {{ loop.index == 1 ? 'is-active' }}">
          <div class="basepack-tabs--item-content--item">
            {% set sdc_id = display_settings.cfields.tab_item.body[tabContent.body.type].sdc.id %}

            {% embed sdc_id with {
              component_data: tabContent.body,
              display_settings: display_settings.cfields.tab_item.body[tabContent.body.type]
            } %}
            {% endembed %}
          </div>
        </div>
        {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
