{% set wrapper_classes = ['views-bootstrap-tabs'] %}
{% set option_classes = ['nav'] %}
{% set option_classes = option_classes|merge(['nav-' ~ tab_type]) %}
{% if tab_position == 'justified' or tab_position == 'stacked' %}
  {% set option_classes = option_classes|merge(['nav-' ~ tab_position]) %}
{% elseif tab_position == 'left' %}
  {% set wrapper_classes = wrapper_classes|merge(['d-flex align-items-start']) %}
  {% set option_classes = option_classes|merge(['flex-column me-3']) %}
  {% set aria_attr = ' aria-orientation="vertical"' %}
{% elseif tab_position == 'right' %}
  {% set wrapper_classes = wrapper_classes|merge(['d-flex align-items-start']) %}
  {% set option_classes = option_classes|merge(['flex-column ms-3']) %}
{% elseif tab_position != 'basic' %}
  {% set wrapper_classes = ['tabs-' ~ tab_position] %}
{% endif %}
{% set tabid = 'views-bootstrap-tab-' ~ id %}
{% set tabs_html %}
  <div{{ create_attribute({'class': option_classes, 'role': 'tablist'}) }}{{ aria_attr }}>
    {% set attributes = create_attribute().addClass('nav-link') %}
    {% for key, tab in tabs %}
      {% if loop.first %}
        {% set attributes = attributes.addClass('active') %}
        {% set selected = 'true' %}
      {% else %}
        {% set attributes = attributes.removeClass('active') %}
        {% set selected = 'false' %}
      {% endif %}
      {% set tab_id = "tab-" ~ tabid ~ '-' ~ key %}
        <button {{ attributes }} id="{{ tab_id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ tab_id }}" type="button" role="tab" aria-controls="{{ tab_id }}" aria-selected="{{ selected }}">{{ tab }}</button>
    {% endfor %}
  </div>
{% endset %}
{% if group_title %}<h3>{{ group_title }}</h3>{% endif %}
<div{{ create_attribute({'class': wrapper_classes}) }}>
  {% if tab_position != 'below' and tab_position != 'right' %}
    {{ tabs_html }}
  {% endif %}
  {% set tabs_attributes = create_attribute({'class': 'tab-pane'}) %}
  {% if tab_fade == 'fade' %}
    {% set tabs_attributes = tabs_attributes.addClass('fade') %}
  {% endif %}

  <div{{ create_attribute({'class': 'tab-content mb-2 mt-2'}) }}>
    {% for key, row in rows %}
      {% if loop.first %}
        {% set tabs_attributes = tabs_attributes.addClass('active') %}
        {% if tab_fade == 'fade' %}
          {% set tabs_attributes = tabs_attributes.addClass('show') %}
        {% endif %}
      {% else %}
        {% set tabs_attributes = tabs_attributes.removeClass('active') %}
      {% endif %}
      <div{{ tabs_attributes.setAttribute('id', "tab-" ~ tabid ~ '-' ~ key).setAttribute('role', 'tabpanel') }}>
        {% if row.content is not empty %}
          {{ row.content }}
        {% endif %}
        {% if row.content_tabs is not empty %}
          {% for tc_key, tab_content in row.content_tabs %}
            {{ tab_content }}
          {% endfor %}
        {% endif %}
      </div>
    {% endfor %}
  </div>
  {% if tab_position == 'below' or tab_position == 'right' %}
    {{ tabs_html }}
  {% endif %}
</div>