{% extends "_club_base.html" %}
{% load i18n lucide %}

{% comment %}
    The club-staff shell: team managers, coaches and admins only (never parents or
    players -- see club.mixins.ClubStaffRequiredMixin). Mirrors controlpanel/base.html's
    block structure, extending the club's own skin instead of the platform's.
{% endcomment %}

{% block head_title %}
    {% block section_title %}{% trans "Management" %}{% endblock section_title %}
{% endblock head_title %}

{% block nav_toggle %}
    <button class="btn btn-ghost btn-square lg:hidden" type="button" onclick="document.getElementById('mobile_nav_modal').showModal()" aria-label="{% trans 'Menu' %}">
        {% lucide "menu" size=20 %}
    </button>
{% endblock nav_toggle %}

{% comment %} Kept in the navbar itself only at `lg`+, where there's no hamburger drawer to hold them instead -- see the comment on `nav_icons_class` in _base.html. {% endcomment %}
{% block nav_icons_class %}hidden items-center lg:flex{% endblock nav_icons_class %}

{% block menu %}
    <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-base-300 bg-base-100 lg:block">
        <ul class="menu w-full gap-1 p-3 mt-4">
            {% include "management/_nav_items.html" %}
        </ul>
    </aside>
{% endblock menu %}

{% block main %}
    {# Below `lg` the sidebar is hidden and {% block nav_toggle %} above opens this instead. #}
    <dialog id="mobile_nav_modal" class="modal modal-start lg:hidden">
        <div class="modal-box h-full max-h-none w-72 max-w-[85vw] rounded-none p-0">
            <div class="flex items-center justify-between border-b border-base-300 p-3">
                <span class="font-roboto text-lg font-bold tracking-wider">{% trans "Menu" %}</span>
                <form method="dialog">
                    <button class="btn btn-ghost btn-square btn-sm" aria-label="{% trans 'Close' %}">{% lucide "x" size=18 %}</button>
                </form>
            </div>
            <ul class="menu w-full gap-1 p-3">
                <li>
                    <button type="button" data-theme-toggle>
                        <span data-theme-icon="light" class="hidden items-center gap-3">{% lucide "sun" size=16 %} {% trans "Light theme" %}</span>
                        <span data-theme-icon="dark" class="hidden items-center gap-3">{% lucide "moon" size=16 %} {% trans "Dark theme" %}</span>
                        <span data-theme-icon="auto" class="hidden items-center gap-3">{% lucide "sun-moon" size=16 %} {% trans "Auto theme" %}</span>
                    </button>
                </li>
                {% if has_management_access %}
                    <li><a href="{% url "management:home" %}">{% lucide "layout-dashboard" size=16 %} {% trans "Management" %}</a></li>
                {% endif %}
                {% if user.is_superuser %}
                    <li><a href="{% url "admin:index" %}">{% lucide "shield-cog" size=16 %} {% trans "Django admin" %}</a></li>
                {% endif %}
                <li class="menu-title">{% trans "Navigation" %}</li>
                {% include "management/_nav_items.html" %}
            </ul>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>{% trans "close" %}</button>
        </form>
    </dialog>

    {# flex-col below `sm`: title over a full-width, stacked column of action buttons reads far better on a phone than the same row wrapping mid-button. #}
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
        <div class="flex flex-col gap-2 grow">
            <h1 class="text-3xl font-bold">
                {% block heading %}{% trans "Management" %}{% endblock heading %}
            </h1>
            <span class="text-sm text-base-content/50">{% block subheading %}{% endblock subheading %}</span>
        </div>

        <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
            {% block actions %}{% endblock actions %}
        </div>
    </div>

    {% comment %}
        A final billing notice follows the admin onto every management page -- but only at
        error level (inside 7 days of archiving, or already past it). Shown from the moment
        anything is owed it would sit on every screen for weeks and train people to ignore
        the one week it matters. home.html includes the same partial at every level, hence
        the guard here rather than inside the partial.
    {% endcomment %}
    {% if billing_notice.is_urgent and nav != "home" %}
        {% include "management/_billing_notice.html" %}
    {% endif %}

    {% block panel %}{% endblock panel %}
{% endblock main %}