{% if all_tabs %}
<div class="border-b border-gray-200 dark:border-gray-700 mt-4" x-data="{ activeTab: '{{ current_tab.slug }}' }">
    <nav class="-mb-px flex gap-1 px-4" aria-label="Dashboard tabs">
        {% for tab in all_tabs %}
        <a href="{% url 'django_cfg_dashboard_tab' slug=tab.slug %}"
           class="group inline-flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition-colors duration-150
                  {% if tab.slug == current_tab.slug %}
                    border-primary-500 text-primary-600 dark:text-primary-400
                  {% else %}
                    border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600
                  {% endif %}">
            <span class="material-icons" style="font-size: 16px;">{{ tab.icon }}</span>
            {{ tab.title }}
        </a>
        {% endfor %}
    </nav>
</div>
{% endif %}