{# Request pill — observer state + request stats, clickable to open Observer panel #}
<button
    type="button"
    class="inline-flex items-center cursor-pointer text-xs rounded-full px-1 py-px bg-white/8 text-white/80 hover:bg-white/12 overflow-hidden divide-x divide-white/10 [&>span]:px-1.5"
    data-toolbar-tab="Observer"
>
    {% if observer.is_persisting() %}
    <span class="inline-flex items-center">
        <span class="relative inline-flex size-1.5 mr-1.5 flex-shrink-0">
            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex size-1.5 rounded-full bg-red-500"></span>
        </span>
        <span class="text-[11px]">Recording</span>
    </span>
    {% elif not observer.is_enabled() %}
    <span class="inline-flex items-center gap-1.5">
        <span class="rounded-full bg-zinc-500 size-1.5 flex-shrink-0"></span>
        <span class="text-[11px]">Disabled</span>
    </span>
    {% endif %}

    {% if trace_stats %}
    <span
        class="text-[11px] text-white/50
               data-[level=warn]:text-amber-400
               data-[level=danger]:text-red-400"
        title="SQL queries"
        {% if trace_stats.query_level != "ok" %}data-level="{{ trace_stats.query_level }}"{% endif %}
    >{{ trace_stats.query_count }}{% if trace_stats.duplicate_count %}+{{ trace_stats.duplicate_count }}{% endif %} {{ "query" if trace_stats.query_count == 1 else "queries" }}</span>
    {% if trace_stats.duration_display %}
    <span
        class="text-[11px] text-white/50
               data-[level=warn]:text-amber-400
               data-[level=danger]:text-red-400"
        title="Request duration"
        {% if trace_stats.duration_level != "ok" %}data-level="{{ trace_stats.duration_level }}"{% endif %}
    >{{ trace_stats.duration_display }}</span>
    {% endif %}
    {% endif %}

    <span
        data-observer-response-size
        class="hidden text-[11px] text-white/50
               data-[level=warn]:text-amber-400
               data-[level=danger]:text-red-400"
        title="Response body size"
        data-observer-response-size-value
    ></span>
</button>

{# System pill — CPU and memory, non-interactive #}
<span class="inline-flex items-center text-xs rounded-full px-1 py-px bg-white/8 overflow-hidden divide-x divide-white/10 [&>span]:px-1.5">
    <span class="items-baseline text-[11px] tabular-nums">
        <span class="text-[9px] text-white/30 mr-1">CPU</span>
        <span
            class="text-white/50
                   data-[level=warn]:text-amber-400
                   data-[level=danger]:text-red-400"
            {% if system_stats.cpu_level != "ok" %}data-level="{{ system_stats.cpu_level }}"{% endif %}
        >{{ system_stats.cpu_percent }}%</span>
    </span>
    <span class="items-baseline text-[11px] tabular-nums">
        <span class="text-[9px] text-white/30 mr-1">MEM</span>
        <span
            class="text-white/50
                   data-[level=warn]:text-amber-400
                   data-[level=danger]:text-red-400"
            {% if system_stats.mem_level != "ok" %}data-level="{{ system_stats.mem_level }}"{% endif %}
        >{{ system_stats.mem_percent }}%</span>
    </span>
</span>

<script nonce="{{ request.csp_nonce }}">
(function() {
    function formatBytes(bytes) {
        if (bytes >= 1000000) return (bytes / 1000000).toFixed(1) + " MB";
        if (bytes >= 1000) return Math.round(bytes / 1000) + " KB";
        return bytes + " B";
    }

    window.addEventListener("load", function() {
        var nav = performance.getEntriesByType("navigation")[0];
        var el = document.querySelector("[data-observer-response-size]");
        if (nav && nav.decodedBodySize > 0 && el) {
            el.textContent = formatBytes(nav.decodedBodySize);
            if (nav.decodedBodySize >= 1000000) {
                el.dataset.level = "danger";
            } else if (nav.decodedBodySize >= 100000) {
                el.dataset.level = "warn";
            }
            el.classList.remove("hidden");
        }
    });
})();
</script>