{% comment %}
Vertical tabs change form layout
{% endcomment %}
{% load i18n jazzy_tabler %}

<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
            {% for fieldset in sections %}
            <button class="nav-link {% if forloop.first %}active{% endif %}" data-bs-toggle="pill" data-bs-target="#vtab-{{ fieldset.name|unicode_slugify }}" type="button" role="tab" {% if forloop.first %}aria-selected="true"{% endif %}>
                {{ fieldset.name|default:_("General") }}
            </button>
            {% endfor %}
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content">
            {% for fieldset in sections %}
            <div class="tab-pane {% if forloop.first %}active show{% endif %}" id="vtab-{{ fieldset.name|unicode_slugify }}" role="tabpanel">
                {% if fieldset.is_inline %}
                    {{ fieldset.formset.management_form }}
                    {% include fieldset.opts.template with inline_admin_formset=fieldset %}
                {% else %}
                    {% include "admin/includes/fieldset.html" with heading=None %}
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>