{% load static lucide ui %}

{% comment %}
    Standalone shell for the control panel -- does NOT extend templates/_base.html or
    _platform_base.html, and does not load assets/app.css or daisyUI. This surface is
    platform-staff-only, desktop-only (see design_handoff_rosterchief_platform/README.md:
    "Control panel ... Desktop only"), and deliberately never club-branded, so it gets its own
    document shell, its own stylesheet (assets/controlpanel.css -> static/css/controlpanel.css)
    and its own type system (Barlow / Barlow Condensed / IBM Plex Mono) rather than inheriting
    the club-facing app's theme. No mobile nav, no theme toggle -- neither exists in the design.
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>
            {% block title %}{% block panel_title %}Control panel{% endblock panel_title %} · RosterChief{% endblock title %}
        </title>

        <link rel="stylesheet" href="{% static 'css/controlpanel.css' %}">
        {% block extra_head %}{% endblock extra_head %}
    </head>

    {% comment %}
        App-shell layout: the command bar and breadcrumb strip are pinned, <main> is the only
        scrolling region -- same reasoning templates/_base.html gives for the club-facing shell.
    {% endcomment %}
    <body class="flex h-screen flex-col overflow-hidden bg-paper font-sans text-slate">
        <header class="flex h-[52px] shrink-0 items-center gap-5 bg-ink px-5">
            <a class="flex shrink-0 items-center gap-2.5" href="{% url 'controlpanel:dashboard' %}">
                {# The real mark, not the .crest clip-path fallback (that's for clubs with no logo of their own) -- white-on-dark variant for this bar. #}
                <img class="h-7 w-7 shrink-0" src="{% static 'images/rosterchief-white.svg' %}" alt="" width="28" height="28">
                <span class="font-display text-base font-extrabold tracking-[.1em] text-white uppercase">RosterChief</span>
                <span class="font-mono text-[11px] text-on-dark-faint">control</span>
            </a>

            <nav class="flex h-full font-mono text-xs">
                {% include "controlpanel/_nav_items.html" %}
            </nav>

            <div class="flex-1"></div>

            <div class="flex items-center gap-2.5">
                {% block actions %}{% endblock actions %}
            </div>

            {% comment %}
                Native <details>/<summary> disclosure -- no JS needed for a menu this small.
                Only the account/system info on the right, grouped with the status indicator.
            {% endcomment %}
            <details class="account-menu relative shrink-0">
                <summary class="flex cursor-pointer items-center rounded px-1.5 py-1 text-on-dark-dim hover:bg-steel hover:text-white" aria-label="Account">
                    {% lucide "circle-user" size=18 %}
                </summary>
                <div class="absolute top-full right-0 z-20 mt-2 w-64 rounded border border-edge bg-white py-1.5 shadow-lg">
                    <div class="truncate border-b border-rule px-3 pb-2 font-mono text-xs text-muted">{{ user.email }}</div>
                    <a class="flex items-center gap-2.5 px-3 py-2 text-sm text-slate hover:bg-rule" href="{% url 'account_change_password' %}">{% lucide "key-round" size=15 %} Change password</a>
                    <a class="flex items-center gap-2.5 px-3 py-2 text-sm text-slate hover:bg-rule" href="{% url 'mfa_index' %}">{% lucide "shield-check" size=15 %} Two-factor authentication</a>
                    <a class="flex items-center gap-2.5 px-3 py-2 text-sm text-slate hover:bg-rule" href="{% url 'account_logout' %}">{% lucide "log-out" size=15 %} Sign out</a>
                </div>
            </details>

            {% comment %}
                Real, not decorative. Three states, most severe wins: maintenance (reflects
                features.models.Maintenance, the same switch the Features tab's "Close the
                platform" action controls) beats recent job failures (failed_jobs, from
                controlpanel.context_processors.job_health -- see features/models.JobRun)
                beats "all systems ok". Links to where you'd go to do something about it.
            {% endcomment %}
            {% if maintenance_on %}
                <a class="flex shrink-0 items-center gap-2 font-mono text-[11px] text-club hover:underline" href="{% url 'controlpanel:features' %}">
                    <span class="h-[7px] w-[7px] rounded-full bg-club"></span>
                    maintenance mode
                </a>
            {% elif failed_jobs %}
                <a class="flex shrink-0 items-center gap-2 font-mono text-[11px] text-warn hover:underline" href="{% url 'controlpanel:jobs' %}">
                    <span class="h-[7px] w-[7px] rounded-full bg-warn"></span>
                    {{ failed_jobs|length }} job failure{{ failed_jobs|length|pluralize }}
                </a>
            {% else %}
                <div class="flex shrink-0 items-center gap-2 font-mono text-[11px] text-ok">
                    <span class="h-[7px] w-[7px] rounded-full bg-ok"></span>
                    all systems ok
                </div>
            {% endif %}
        </header>

        <div class="flex h-[34px] shrink-0 items-center gap-3 border-b border-edge bg-white px-5 font-mono text-[11px] text-muted">
            {% block breadcrumb %}<span class="text-ink">control</span>{% endblock breadcrumb %}
            <div class="flex-1"></div>
            {% block strip_right %}{% endblock strip_right %}
        </div>

        <main class="flex-1 overflow-y-auto">
            <div class="mx-auto flex w-full max-w-[1440px] flex-col gap-4 px-7 py-6">
                {% if maintenance_on %}
                    <div class="flex items-center gap-3 rounded border border-danger-border bg-danger-bg px-4 py-3 text-sm text-club-dark" role="alert">
                        {% lucide "wrench" size=18 class="shrink-0" %}
                        <div>
                            <span class="font-display font-extrabold tracking-[.04em] uppercase">Platform closed for maintenance.</span>
                            Every club subdomain serves a maintenance page, and the scheduled jobs stand down.
                            <a class="link link-hover font-semibold" href="{% url 'controlpanel:features' %}">Reopen it</a>
                        </div>
                    </div>
                {% endif %}

                {% if messages %}
                    <div class="flex flex-col gap-2">
                        {% for message in messages %}
                            {% with alert=message|as_alert %}
                                <div class="alert {{ alert.css }}" role="alert">
                                    {% lucide alert.icon size=18 %}
                                    <div>
                                        <div class="font-display text-sm font-bold tracking-wide uppercase">{{ alert.title }}</div>
                                        <div class="text-sm">{{ alert.body }}</div>
                                    </div>
                                </div>
                            {% endwith %}
                        {% endfor %}
                    </div>
                {% endif %}

                {% block panel %}{% endblock panel %}
            </div>
        </main>

        {% block extra_body %}{% endblock extra_body %}
    </body>
</html>
