{# tab.twig: Bootstrap 5 solamente #}
{% set tab_id = 'tabs-' ~ id %}

<ul class="nav nav-tabs border-bottom mb-3" id="{{ tab_id }}" role="tablist">
  {% for item in items %}
    {% set btn_id = tab_id ~ '-button-' ~ loop.index %}
    {% set pane_id = tab_id ~ '-pane-' ~ loop.index %}

    <li class="nav-item" role="presentation">
      <button
        class="nav-link {{ loop.first ? 'active' : '' }}"
        id="{{ btn_id }}"
        data-bs-toggle="tab"
        data-bs-target="#{{ pane_id }}"
        type="button"
        role="tab"
        aria-controls="{{ pane_id }}"
        aria-selected="{{ loop.first ? 'true' : 'false' }}">
        {{ item.title }}
      </button>
    </li>
  {% endfor %}
</ul>

<div class="tab-content" id="{{ tab_id }}-content">
  {% for item in items %}
    {% set pane_id = tab_id ~ '-pane-' ~ loop.index %}
    <div class="tab-pane fade {{ loop.first ? 'show active' : '' }}"
         id="{{ pane_id }}"
         role="tabpanel"
         aria-labelledby="{{ tab_id }}-button-{{ loop.index }}">
      <div class="pt-3">
        {{ item.content|raw }}
      </div>
    </div>
  {% endfor %}
</div>
