{% extends "base.html" %}
{% load lucide %}

{% block title %}
    {% block panel_title %}Control panel{% endblock panel_title %} · RosterChief
{% endblock title %}

{% block main %}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-2xl font-bold">
                {% block heading %}Control panel{% endblock heading %}
            </h1>
            {% block subheading %}{% endblock subheading %}
        </div>
        <div class="flex gap-2">
            {% block actions %}{% endblock actions %}
        </div>
    </div>
    <div role="tablist" class="tabs-boxed tabs mb-6 w-fit">
        <a role="tab" href="{% url 'controlpanel:dashboard' %}" class="tab gap-2 {% if nav == 'dashboard' %}tab-active{% endif %}">{% lucide "layout-dashboard" size=16 %} Dashboard</a>
        <a role="tab" href="{% url 'controlpanel:club_list' %}" class="tab gap-2 {% if nav == 'clubs' %}tab-active{% endif %}">{% lucide "building-2" size=16 %} Clubs</a>
        <a role="tab" href="{% url 'controlpanel:features' %}" class="tab gap-2 {% if nav == 'features' %}tab-active{% endif %}">{% lucide "toggle-right" size=16 %} Features</a>
        {% if user.is_superuser %}
            <a role="tab" href="{% url 'controlpanel:admins' %}" class="tab gap-2 {% if nav == 'admins' %}tab-active{% endif %}">{% lucide "user-cog" size=16 %} Admins</a>
        {% endif %}
    </div>
    {% block panel %}{% endblock panel %}
{% endblock main %}