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

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

{% block nav_toggle %}
    <button class="btn btn-ghost btn-square lg:hidden" type="button" onclick="document.getElementById('mobile_nav_modal').showModal()" aria-label="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 %}
    {% comment %}
        Outside <main>, so it never scrolls with the content. Its own overflow-y-auto is for
        the day the menu itself grows taller than the screen.
    {% endcomment %}
    <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 "controlpanel/_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">Menu</span>
                <form method="dialog">
                    <button class="btn btn-ghost btn-square btn-sm" aria-label="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 %} Light theme</span>
                        <span data-theme-icon="dark" class="hidden items-center gap-3">{% lucide "moon" size=16 %} Dark theme</span>
                        <span data-theme-icon="auto" class="hidden items-center gap-3">{% lucide "sun-moon" size=16 %} Auto theme</span>
                    </button>
                </li>
                {% if has_management_access %}
                    <li><a href="{% url "management:home" %}">{% lucide "layout-dashboard" size=16 %} Management</a></li>
                {% endif %}
                {% if user.is_superuser %}
                    <li><a href="{% url "admin:index" %}">{% lucide "shield-cog" size=16 %} Django admin</a></li>
                {% endif %}
                <li class="menu-title">Navigation</li>
                {% include "controlpanel/_nav_items.html" %}
            </ul>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    {% if maintenance_on %}
        <div class="alert alert-error mb-6">
            {% lucide "wrench" size=20 %}
            <span>
        <strong>The platform is currently closed for maintenance.</strong>
        Clubs see a maintenance page and the scheduled jobs are standing down.
    </span>
            <a class="btn btn-sm gap-2 btn-error btn-soft" href="{% url 'controlpanel:features' %}">{% lucide "unlock" size=16 %} Reopen platform</a>
        </div>
    {% endif %}
    <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-row items-center gap-3">
            {% block logo %}{% endblock logo %}

            <div class="flex flex-col gap-2 grow">
                <h1 class="text-3xl font-bold">
                    {% block heading %}Control panel{% endblock heading %}
                </h1>
                <span class="text-sm text-base-content/50">{% block subheading %}{% endblock subheading %}</span>
            </div>
        </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>

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