{% load static lucide ui i18n %}

{% comment %}
    Standalone shell for club management -- does NOT extend templates/_base.html or
    _club_base.html, and does not load assets/app.css or daisyUI. Same reasoning as
    controlpanel/templates/controlpanel/base.html's own standalone shell, but this
    surface IS club-branded (design_handoff_rosterchief_platform/README.md, "Club
    theming"): the --tenant-club/--tenant-club-dark custom properties below feed
    assets/management.css's --color-club/--color-club-dark tokens, set per request
    from Club.secondary_color. Desktop only, matching the design's own scope for this
    surface -- no mobile nav here, unlike the club-facing chrome this replaces.

    The page itself scrolls (body/document), not a boxed-in <main> under a fixed-
    height shell -- the sidebar and topbar are sticky (top-0) instead, same reasoning
    (and same fix) as mobile/templates/mobile/base.html's own shell: a fixed shell
    with an inner overflow-y-auto <main> reads as two separate scrollable areas
    nested inside each other, most noticeable on a tall page like the week calendar
    (event_list.html's own .cal-week-body, sized well past a screenful of hours).
{% 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 %}Management{% endblock panel_title %} &middot; {{ club.name }}{% endblock title %}
        </title>

        <link rel="stylesheet" href="{% static 'css/management.css' %}">
        {% if club.secondary_color %}
            <style>
                :root {
                    --tenant-club: {{ club.secondary_color }};
                    --tenant-club-dark: color-mix(in srgb, {{ club.secondary_color }} 80%, black);
                    {% comment %}
                        Club.secondary_content_color is already the WCAG-luminance black-or-white
                        choice (Club._content_color_for) -- e.g. the active nav item's own text,
                        which sits on --color-club and can't assume white reads on every colour.
                    {% endcomment %}
                    --tenant-club-content: {{ club.secondary_content_color }};
                }
            </style>
        {% endif %}
        {% if club.primary_color %}
            <style>
                :root {
                    {# Same WCAG black-or-white choice as secondary_content_color above, for the sidebar's own background. #}
                    --tenant-sidebar-bg: {{ club.primary_color }};
                    --tenant-sidebar-fg: {{ club.primary_content_color }};
                }
            </style>
        {% endif %}
        {% block extra_head %}{% endblock extra_head %}
    </head>

    <body class="flex min-h-screen flex-col bg-paper font-sans text-slate">
        <div class="flex flex-1">
            <aside class="sticky top-0 flex h-screen w-[236px] shrink-0 flex-col overflow-y-auto bg-sidebar-bg py-5">
                <a class="flex items-center gap-2.5 px-[18px] pb-[22px]" href="{% url 'management:home' %}">
                    {% if club.logo %}
                        <img class="crest h-[30px] w-7 shrink-0 object-cover" src="{{ club.logo.url }}" alt="">
                    {% else %}
                        <span class="crest flex h-[30px] w-7 shrink-0 items-center justify-center bg-club">
                            <span class="font-display text-[10px] font-extrabold text-club-content">{{ club.initials }}</span>
                        </span>
                    {% endif %}
                    <span class="min-w-0">
                        <span class="block truncate font-display text-[17px] leading-none font-extrabold tracking-[.06em] text-sidebar-fg uppercase">{{ club.name }}</span>
                        <span class="block font-mono text-[10px] text-sidebar-fg-faint">RosterChief &middot; management</span>
                    </span>
                </a>

                <nav class="flex flex-col gap-0.5 px-2.5">
                    {% include "management/_nav_items.html" %}
                </nav>

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

                <div class="px-[18px]">
                    {% comment %}
                        <details>, not a click-driven dropdown -- no JS needed to open it, only
                        the outside-click/Escape listener below to close it (a <details> stays
                        open until its own <summary> is clicked again otherwise, which would be
                        the only sidebar element on the whole page that doesn't dismiss itself).
                        Opens upward (bottom-full): the trigger sits at the very bottom of the
                        sidebar, so a menu opening down would run off the viewport.
                    {% endcomment %}
                    <details id="user-menu" class="dismissable-details relative border-t border-sidebar-hairline pt-3.5">
                        <summary class="flex cursor-pointer list-none items-center gap-2.5 [&::-webkit-details-marker]:hidden">
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sidebar-chip font-display text-[13px] font-extrabold text-sidebar-fg">{% if user.member %}{{ user.member.first_name|slice:":1" }}{{ user.member.last_name|slice:":1" }}{% else %}?{% endif %}</span>
                            <span class="min-w-0 flex-1">
                                <span class="block truncate text-[13px] font-semibold text-sidebar-fg">{{ user.member|default:user.email }}</span>
                                <span class="block text-[11px] text-sidebar-fg-faint">{% if is_club_admin %}Admin{% else %}Staff{% endif %}</span>
                            </span>
                            {% lucide "chevron-up" size=14 class="shrink-0 text-sidebar-fg-faint" %}
                        </summary>
                        <div class="absolute bottom-full left-0 z-20 mb-2 w-full rounded-xl border border-sidebar-hairline bg-sidebar-bg p-1.5 shadow-lg">
                            <a class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-sidebar-fg-dim hover:bg-sidebar-hairline hover:text-sidebar-fg" href="{% url 'account_change_password' %}">{% lucide "key-round" size=14 %} {% trans "Change password" %}</a>
                            <a class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-sidebar-fg-dim hover:bg-sidebar-hairline hover:text-sidebar-fg" href="{% url 'mfa_index' %}">{% lucide "shield-check" size=14 %} {% trans "Manage two-factor auth" %}</a>
                            <div class="my-1 h-px bg-sidebar-hairline"></div>
                            <a class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-sidebar-fg-dim hover:bg-sidebar-hairline hover:text-sidebar-fg" href="{% url 'account_logout' %}">{% lucide "log-out" size=14 %} {% trans "Log out" %}</a>
                        </div>
                    </details>
                </div>
            </aside>

            <div class="flex min-w-0 flex-1 flex-col">
                <header class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-line bg-white px-7">
                    <span class="font-display text-2xl font-extrabold text-ink uppercase">{% block heading %}{% block topbar_title %}Management{% endblock topbar_title %}{% endblock heading %}</span>
                    {% block topbar_context %}{% endblock topbar_context %}
                    <div class="flex-1"></div>
                    {% if unread_notification_count is not None %}
                        {# Same <details>/<summary> convention as the sidebar's own user-menu below -- no JS needed to open it, only the shared outside-click/Escape listener to close it. #}
                        <details id="notification-menu" class="dismissable-details relative">
                            <summary class="btn btn-outline btn-square list-none [&::-webkit-details-marker]:hidden" aria-label="{% trans "Notifications" %}">
                                {% lucide "bell" size=16 %}
                                {% if unread_notification_count %}
                                    <span class="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-club px-1 font-mono text-[9px] font-bold text-white">{{ unread_notification_count }}</span>
                                {% endif %}
                            </summary>
                            <div class="absolute top-full right-0 z-20 mt-2 w-80 rounded-xl border border-line bg-white p-1.5 shadow-lg">
                                <div class="flex items-center justify-between px-2.5 py-2">
                                    <span class="font-display text-xs font-bold tracking-[.08em] text-ink uppercase">{% trans "Notifications" %}</span>
                                    {% if unread_notification_count %}
                                        <form method="post" action="{% url 'management:notification_mark_all_read' %}">
                                            {% csrf_token %}
                                            <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                            <button class="text-xs text-club hover:underline" type="submit">{% trans "Mark all read" %}</button>
                                        </form>
                                    {% endif %}
                                </div>
                                <div class="flex max-h-96 flex-col overflow-y-auto">
                                    {% for notification in recent_notifications %}
                                        <div class="flex flex-col gap-0.5 rounded-lg px-2.5 py-2 {% if not notification.read_at %}bg-subhead{% endif %}">
                                            <span class="text-[13px] font-semibold text-ink">{{ notification.title }}</span>
                                            <span class="text-xs text-muted">{{ notification.body|truncatechars:100 }}</span>
                                            <span class="font-mono text-[10px] text-dim">{{ notification.created|timesince }} {% trans "ago" %}</span>
                                        </div>
                                    {% empty %}
                                        <p class="px-2.5 py-6 text-center text-sm text-muted">{% trans "Nothing yet." %}</p>
                                    {% endfor %}
                                </div>
                            </div>
                        </details>
                    {% endif %}
                    <div class="flex items-center gap-2">
                        {% block actions %}{% endblock actions %}
                    </div>
                </header>

                {% block filter_strip %}{% endblock filter_strip %}

                <main class="flex-1">
                    <div class="flex flex-col gap-4 px-7 py-6">
                        {% if billing_notice.is_urgent and nav != "home" %}
                            {% include "management/_billing_notice.html" %}
                        {% 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>
            </div>
        </div>

        <script>
            (() => {
                // <details>, not a click-driven dropdown -- no JS needed to open either
                // the user menu or the notification bell, only this shared outside-
                // click/Escape listener to close whichever one is open (a <details>
                // stays open until its own <summary> is clicked again otherwise).
                const menus = document.querySelectorAll(".dismissable-details");
                if (!menus.length) return;
                document.addEventListener("click", (event) => {
                    menus.forEach((menu) => {
                        if (menu.open && !menu.contains(event.target)) menu.open = false;
                    });
                });
                document.addEventListener("keydown", (event) => {
                    if (event.key === "Escape") menus.forEach((menu) => { menu.open = false; });
                });
            })();

            // Search-as-you-type: any [data-autosubmit] input submits its own form a
            // beat after typing stops, instead of needing a separate Search button.
            // Debounced (not one submit per keystroke) so a full-page GET reload isn't
            // fired on every character -- 400ms is short enough to feel immediate,
            // long enough that normal typing speed never triggers it mid-word.
            document.querySelectorAll("[data-autosubmit]").forEach((input) => {
                let timeout;
                input.addEventListener("input", () => {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => input.form.requestSubmit(), 400);
                });
            });
        </script>

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