{% extends "admin/base.html" %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% load static %}

{% block extrahead %}
{{ block.super }}
{% if user.is_authenticated %}
<script src="{% static 'admin/js/jwt_session.js' %}"></script>
{% endif %}
<style>
.stapel-nav {
    display: flex;
    align-items: center;
    /* Wrap, never overflow: on a phone the header row is narrower than the
       buttons, and an unwrapped row pushes the switcher off the screen. */
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.stapel-nav a {
    color: var(--header-link-color, #fff);
    text-decoration: none;
}
.stapel-nav a:hover {
    text-decoration: underline;
}
.stapel-dropdown {
    position: relative;
    display: inline-block;
}
/* The disclosure button. The border is currentColor so it contrasts with
   whatever the header is painted in — the light and the dark admin theme
   both give the header a link color chosen to read against it. */
.stapel-dropdown-btn {
    background: rgba(127,127,127,0.25);
    background: color-mix(in srgb, currentColor 18%, transparent);
    border: 1px solid currentColor;
    color: var(--header-link-color, #fff);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;  /* the details marker is off — ▾ is the affordance */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.stapel-dropdown-btn::-webkit-details-marker {
    display: none;
}
.stapel-dropdown-btn:hover {
    background: rgba(127,127,127,0.4);
    background: color-mix(in srgb, currentColor 32%, transparent);
}
.stapel-dropdown-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.stapel-dropdown-btn .chevron {
    transition: transform 0.12s ease;
}
details.stapel-dropdown[open] > .stapel-dropdown-btn .chevron {
    transform: rotate(180deg);
}
.stapel-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--body-bg, #fff);
    min-width: 280px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 6px;
    z-index: 1000;
    padding-top: 8px;
    border: 1px solid var(--hairline-color, #e8e8e8);
}
/* Click/tap/Enter/Space — not hover: a hover-only menu cannot be opened
   on a touch device at all (admin-suite AS-4 follow-up). */
details.stapel-dropdown[open] .stapel-dropdown-content {
    display: block;
}
/* A 280px panel left-anchored to a button that sits near the right edge
   hangs off a phone screen — the service names clip and the Admin/API links
   land outside the viewport. Anchor it to the button's right edge there, so
   it opens inwards. */
@media (max-width: 767px) {
    .stapel-dropdown-content {
        left: auto;
        right: 0;
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 32px);
    }
}
.stapel-dropdown-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline-color, #e8e8e8);
}
.stapel-dropdown-section:last-child {
    border-bottom: none;
}
.stapel-dropdown-title {
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--body-quiet-color, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stapel-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    color: var(--body-fg, #333);
    text-decoration: none;
}
.stapel-dropdown-item:hover {
    background: var(--darkened-bg, #f5f5f5);
    text-decoration: none;
}
.stapel-dropdown-item.active {
    background: var(--selected-bg, #e4e4e4);
    font-weight: 600;
}
.stapel-dropdown-item .links {
    display: flex;
    gap: 8px;
    font-size: 12px;
}
.stapel-dropdown-item .links a {
    color: var(--link-fg, #417690);
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--darkened-bg, #f0f0f0);
}
.stapel-dropdown-item .links a:hover {
    background: var(--link-fg, #417690);
    color: #fff;
    text-decoration: none;
}
.stapel-dropdown-item .links a:focus-visible {
    outline: 2px solid var(--link-fg, #417690);
    outline-offset: 2px;
}
.stapel-nav a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.stapel-swagger-btn {
    background: #85ea2d;
    color: #173647 !important;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
}
.stapel-swagger-btn:hover {
    background: #6ecf1a;
    text-decoration: none !important;
}
.stapel-dashboard-btn {
    background: #3b82f6;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
}
.stapel-dashboard-btn:hover {
    background: #2563eb;
    text-decoration: none !important;
}
/* Force filter sidebar on the right (Django 6.0 flex layout reinforcement) */
#changelist .changelist-form-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
}
#changelist .changelist-form-container > search,
#changelist .changelist-form-container > #changelist-filter {
    display: block;
    flex: 0 0 240px !important;
    order: 1 !important;
    margin: 0 0 0 30px !important;
    width: 240px;
}
#changelist .changelist-form-container > div {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 767px) {
    #changelist .changelist-form-container {
        flex-direction: column !important;
    }
    #changelist .changelist-form-container > search,
    #changelist .changelist-form-container > #changelist-filter {
        flex: none !important;
        width: 100% !important;
        margin: 30px 0 0 0 !important;
        order: 1;
    }
}
</style>
{# Progressive enhancement only — <details> already opens on tap, Enter and #}
{# Space with no JS. This syncs aria-expanded for AT, closes the other menu, #}
{# and adds Escape / outside-click dismissal. #}
<script>
(function () {
    var SEL = "details.stapel-dropdown";
    function each(nodes, fn) { Array.prototype.forEach.call(nodes, fn); }
    function close(d) {
        d.open = false;
        var s = d.querySelector("summary");
        if (s) s.setAttribute("aria-expanded", "false");
    }
    // "toggle" does not bubble — listen in the capture phase.
    document.addEventListener("toggle", function (e) {
        var d = e.target;
        if (!d || !d.matches || !d.matches(SEL)) return;
        var s = d.querySelector("summary");
        if (s) s.setAttribute("aria-expanded", d.open ? "true" : "false");
        if (!d.open) return;
        each(document.querySelectorAll(SEL), function (o) {
            if (o !== d && o.open) close(o);
        });
    }, true);
    document.addEventListener("click", function (e) {
        each(document.querySelectorAll(SEL), function (d) {
            if (d.open && !d.contains(e.target)) close(d);
        });
    });
    document.addEventListener("keydown", function (e) {
        if (e.key !== "Escape" && e.key !== "Esc") return;
        each(document.querySelectorAll(SEL), function (d) {
            if (!d.open) return;
            var focused = d.contains(document.activeElement);
            close(d);
            var s = d.querySelector("summary");
            if (focused && s) s.focus();
        });
    });
})();
</script>
{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{# Service navigation — driven entirely by the STAPEL_SERVICES / NAV_LINKS #}
{# registries (admin-suite AS-4). No hardcoded service list, dashboard map, #}
{# or Tools/Monitoring links live here anymore. #}
{% if user.is_authenticated and stapel_services %}
<div class="stapel-nav">
    {% if current_swagger_url %}
    <a href="{{ current_swagger_url }}" class="stapel-swagger-btn">Swagger</a>
    {% endif %}
    {% if current_dashboard_url %}
    <a href="{{ current_dashboard_url }}" class="stapel-dashboard-btn">Dashboard</a>
    {% endif %}

    {% if stapel_modules %}
    <details class="stapel-dropdown">
        <summary class="stapel-dropdown-btn" role="button" aria-expanded="false">
            Apps <span class="chevron" aria-hidden="true">▾</span>
        </summary>
        <div class="stapel-dropdown-content">
            <div class="stapel-dropdown-section">
                <div class="stapel-dropdown-title">Installed Apps</div>
                {% for module in stapel_modules %}
                <div class="stapel-dropdown-item">
                    <span>{{ module.name }}</span>
                    <span class="links">
                        <a href="{{ module.admin_url }}">Admin</a>
                        {% if module.swagger_url %}<a href="{{ module.swagger_url }}">Swagger</a>{% endif %}
                        {% if module.schema_url %}<a href="{{ module.schema_url }}">Schema</a>{% endif %}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
    </details>
    {% endif %}

    <details class="stapel-dropdown">
        <summary class="stapel-dropdown-btn" role="button" aria-expanded="false">
            Services <span class="chevron" aria-hidden="true">▾</span>
        </summary>
        <div class="stapel-dropdown-content">
            {% if stapel_services_multi %}
            <div class="stapel-dropdown-section">
                <div class="stapel-dropdown-title">All Services</div>
                {% for service in stapel_services %}
                <div class="stapel-dropdown-item{% if service.is_active %} active{% endif %}">
                    <span>{{ service.name }}</span>
                    <span class="links">
                        <a href="{{ service.admin_url }}">Admin</a>
                        {% if service.swagger_url %}<a href="{{ service.swagger_url }}">API</a>{% endif %}
                    </span>
                </div>
                {% endfor %}
            </div>
            {% endif %}
            {% for section, links in stapel_nav_sections.items %}
            <div class="stapel-dropdown-section">
                <div class="stapel-dropdown-title">{{ section|capfirst }}</div>
                {% for link in links %}
                <div class="stapel-dropdown-item">
                    <span>{{ link.title }}</span>
                    <span class="links">
                        <a href="{{ link.url }}"{% if link.external %} target="_blank"{% endif %}>Open</a>
                    </span>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </details>
</div>
{% endif %}
{% endblock %}