{% if is_parent %}
  {% set parent_class = 'component-builder--type-tabs--parent' %}
{% endif %}

<div{{ attributes.addClass(parent_class) }}>

  {{ title_prefix }}
  {% if component_wrapper.display_title.value == 1 %}
    {% if label %}
      <h2{{ title_attributes.addClass('field field--name-title field--type-string') }}>{{ component_wrapper.label }}</h2>
    {% endif %}
  {% endif %}
  {{ title_suffix }}

  {{ header }}
  <div{{ content_attributes.addClass('component-wrapper--content') }}>
    {% if is_parent %}
      {% set nav_component_wrapper_header_id = 'nav-component-wrapper-header--' ~ component_wrapper.id %}
      {% set classes = ['component', 'navigation-component-wrapper'] %}
      <div id="{{ nav_component_wrapper_header_id }}" {{ attributes.addClass(classes, component_wrapper_class) }}>
        <div class="background">
          <div class="overlay"></div>
        </div>
        <div class="group">
          {% if items is not empty %}
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                {% for key, item in tabs_title %}
                  {% if key == 0 %}
                    <button class="nav-link active" id="nav-component-item-tab--{{ component_wrapper.id + key }}" data-bs-toggle="tab" data-bs-target="#nav--{{ component_wrapper.id + key }}" type="button" role="tab" aria-controls="nav--{{ component_wrapper.id + key }}" aria-selected="true">{{ item }}</button>
                  {% else %}
                    <button class="nav-link" id="nav-component-item-tab--{{ component_wrapper.id + key }}" data-bs-toggle="tab" data-bs-target="#nav--{{ component_wrapper.id + key }}" type="button" role="tab" aria-controls="nav--{{ component_wrapper.id + key }}" aria-selected="false">{{ item }}</button>
                  {% endif %}
                {% endfor %}
              </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
              {% for key,item in items %}
                {% if key == 0 %}
                  {% set active = "show active" %}
                {% else %}
                  {% set active = ""%}
                {% endif %}
                <div class="tab-pane fade {{ active }}" id="nav--{{ component_wrapper.id + key }}" role="tabpanel" aria-labelledby="nav-component-item-tab--{{ component_wrapper.id + key }}">
                  {{ item }}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    {% else %}
      <div class="wrapper-inner">
        {{ content.field_tabs }}
      </div>
    {% endif %}
  </div>
  {{ footer }}
</div>
