{% load unfold %}

{% with tabs=adminform|tabs %}
    {% if tabs %}
        <div x-data="{openTab: null}">
            <ul class="bg-gray-100 border border-transparent flex gap-10 mb-6 px-4 py-3 rounded-md text-gray-400 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-400">
                {% for fieldset in tabs %}
                    <li>
                        <a class="cursor-pointer font-semibold hover:text-gray-700 dark:hover:text-white"
                        x-on:click="openTab = '{{ fieldset.name|slugify }}'"
                        x-bind:class="openTab == '{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %} ? 'text-gray-700 dark:text-white' : ''">
                            {{ fieldset.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

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