{% load unfold %}

{% with tabs=adminform|tabs %}
    {% if tabs %}
        <div x-data="{openTab: null}" x-show="activeTab == 'general'">
            <ul class="bg-base-100 flex gap-1 mb-6 px-1.5 py-1.5 rounded-default text-font-default-light @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-default-dark">
                {% for fieldset in tabs %}
                    <li>
                        <a class="block cursor-pointer font-semibold px-2.5 py-2 rounded-default hover:text-base-700 dark:hover:text-white"
                           x-on:click="openTab = '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'"
                           x-bind:class="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %} ? 'bg-white text-font-important-light shadow-xs dark:bg-base-900 dark:text-font-important-dark' : ''">
                            {{ fieldset.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            {% for fieldset in tabs %}
                <div class="tab-wrapper{% if fieldset.name %} fieldset-{{ fieldset.name|slugify }} fieldset-{{ forloop.counter0 }}-{{ fieldset.name|slugify }}{% endif %}"
                     x-show="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %}">
                    {% include 'admin/includes/fieldset.html' %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}
