{% if use_tabs %}

<ul id="a{{ tabs_id }}-nav" class="nav nav-tabs nav-justified" role="tablist">
    {% for i, tab_name in enumerate(content.keys()) %}
    <li class="nav-item">
        <a class="nav-link {% if i==0 %} active {% endif %}" id="a{{ tabs_id }}-{{ i }}-tab" data-bs-toggle="tab" href="#a{{ tabs_id }}-{{ i }}" role="tab"  aria-controls="a{{ tabs_id }}-{{ i }}" {% if i==0 %} aria-expanded="true" {% endif %}>{{ tab_name }}</a>
    </li>
    {% endfor %}
</ul>

<!-- Content Panel -->
<div id="a{{ tabs_id }}-nav-content" class="tab-content">
    {% for i, tab_content in enumerate(content.values()) %}
    <div class="tab-pane fade {% if i==0 %} show active {% endif %}" id="a{{ tabs_id }}-{{ i }}" role="tabpanel" aria-labelledby="a{{ tabs_id }}-{{ i }}-tab">
        {% for _content in tab_content %}
        {{ _content.to_html() }}
        {% endfor %}
    </div>
    {% endfor %}
</div>

{% else %}

<ul id="a{{ tabs_id }}-nav" class="nav nav-pills nav-justified" role="tablist">
    {% for i, tab_name in enumerate(content.keys()) %}
    <li class="nav-item">
        <a class="nav-link {% if i==0 %} active {% endif %}" id="a{{ tabs_id }}-{{ i }}-tab" data-bs-toggle="tab" href="#a{{ tabs_id }}-{{ i }}" role="tab"  aria-controls="a{{ tabs_id }}-{{ i }}" {% if i==0 %} aria-expanded="true" {% endif %}>{{ tab_name }}</a>
    </li>
    {% endfor %}
</ul>

<!-- Content Panel -->
<div id="a{{ tabs_id }}-nav-content" class="tab-content">
    {% for i, tab_content in enumerate(content.values()) %}
    <div class="tab-pane fade {% if i==0 %} show active {% endif %}" id="a{{ tabs_id }}-{{ i }}" role="tabpanel" aria-labelledby="a{{ tabs_id }}-{{ i }}-tab">
        {% for _content in tab_content %}
        {{ _content.to_html() }}
        {% endfor %}
    </div>
    {% endfor %}
</div>

{% endif %}