{% if tabs | length > 0 %}
    {% set random_id = range(100000, 999999) | random %}

    <div class="row item {% if classes %}{{ classes }}{% endif %}" {% if id %} id="{{ id }}"{% endif %}>
        <ul class="nav nav-tabs tab-nav" role="tablist">
            {% for tab in tabs %}
                {% set unique_id = anchor_id ~ '-' ~ random_id ~ '-' ~ loop.index0 %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link {% if loop.first %}active{% endif %}"
                            id="tab-{{ unique_id }}"
                            data-bs-toggle="tab"
                            data-bs-target="#tab-pane-{{ unique_id }}"
                            type="button"
                            role="tab"
                            aria-controls="tab-pane-{{ unique_id }}"
                            aria-selected="{% if loop.first %}true{% else %}false{% endif %}">{{ tab.name | fmt_badge }}</button>
                </li>
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for tab in tabs %}
                {% set unique_id = anchor_id ~ '-' ~ random_id ~ '-' ~ loop.index0 %}
                <div class="tab-pane fade {% if loop.first %}show active{% endif %}"
                     id="tab-pane-{{ unique_id }}"
                     role="tabpanel"
                     aria-labelledby="tab-pane-{{ unique_id }}">
                    <div class="row item">
                        {{ tab.render() }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}