<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Sylvan{% endblock %}</title>
    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
    <script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script>Prism.plugins.autoloader.languages_path='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';</script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:false,theme:'dark',themeVariables:{primaryColor:'#111820',primaryTextColor:'#c8d1dc',lineColor:'#2a3a4e',primaryBorderColor:'#2a3a4e'}});</script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #080b10;
            --bg-subtle: #0c1018;
            --surface: #111820;
            --surface-2: #171f2a;
            --surface-3: #1c2535;
            --border: #1e2a3a;
            --border-bright: #2a3a4e;
            --text: #c8d1dc;
            --text-dim: #7a8899;
            --text-faint: #4a5567;
            --white: #edf0f5;
            --accent: #3dd68c;
            --accent-glow: rgba(61, 214, 140, 0.15);
            --accent-soft: rgba(61, 214, 140, 0.08);
            --warning: #f0a030;
            --danger: #e84855;
            --info: #5ba4f5;
            --purple: #a78bfa;
            --ring-size: 200px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { font-size: 14px; -webkit-font-smoothing: antialiased; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Scanline texture overlay */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.03) 2px,
                rgba(0,0,0,0.03) 4px
            );
            pointer-events: none;
            z-index: 9999;
        }

        .mono { font-family: 'JetBrains Mono', monospace; }

        /* ═══════════════ NAV ═══════════════ */
        .topbar {
            position: sticky; top: 0; z-index: 100;
            display: flex; align-items: center; justify-content: space-between;
            height: 48px; padding: 0 20px;
            background: rgba(8, 11, 16, 0.85);
            backdrop-filter: blur(16px) saturate(1.2);
            border-bottom: 1px solid var(--border);
        }
        .topbar-left { display: flex; align-items: center; gap: 28px; }
        .logo {
            display: flex; align-items: center; gap: 8px;
            text-decoration: none; color: var(--white);
        }
        .logo-mark {
            width: 22px; height: 22px; border-radius: 5px;
            background: linear-gradient(135deg, var(--accent), #2ab370);
            display: grid; place-items: center;
            font: 600 10px/1 'JetBrains Mono', monospace;
            color: #000; letter-spacing: -0.5px;
        }
        .logo-text {
            font: 500 12px/1 'JetBrains Mono', monospace;
            letter-spacing: 0.1em;
        }
        .nav-tabs { display: flex; gap: 2px; }
        .nav-tab {
            padding: 5px 14px; border-radius: 6px;
            font: 400 12px/1 'Inter', sans-serif;
            color: var(--text-dim); text-decoration: none;
            transition: all 0.12s ease;
        }
        .nav-tab:hover { color: var(--white); background: var(--surface); }
        .nav-tab.active {
            color: var(--white); background: var(--surface-2);
            box-shadow: inset 0 0 0 1px var(--border);
        }
        .topbar-right {
            display: flex; align-items: center; gap: 14px;
            font: 400 11px/1 'JetBrains Mono', monospace;
            color: var(--text-faint);
        }
        .status-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(61,214,140,0.3);
            animation: pulse-glow 3s ease-in-out infinite;
        }
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(61,214,140,0.3); }
            50% { box-shadow: 0 0 3px var(--accent), 0 0 6px rgba(61,214,140,0.15); }
        }

        /* ═══════════════ LAYOUT ═══════════════ */
        .page { max-width: 1400px; margin: 0 auto; padding: 28px 24px 60px; }

        .page-header { margin-bottom: 32px; }
        .page-title {
            font: 600 22px/1.2 'Inter', sans-serif;
            color: var(--white); letter-spacing: -0.02em;
        }
        .page-subtitle {
            font: 400 12px/1 'JetBrains Mono', monospace;
            color: var(--text-faint); margin-top: 6px;
            text-transform: uppercase; letter-spacing: 0.06em;
        }

        .section-title {
            font: 500 10px/1 'JetBrains Mono', monospace;
            text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--text-faint); margin-bottom: 14px;
            display: flex; align-items: center; gap: 8px;
        }
        .section-title::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(90deg, var(--border), transparent);
        }

        /* ═══════════════ CARDS ═══════════════ */
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px; padding: 18px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            border-color: var(--border-bright);
            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
        }
        .card-glow:hover {
            border-color: rgba(61,214,140,0.3);
            box-shadow: 0 0 30px rgba(61,214,140,0.06), 0 4px 24px rgba(0,0,0,0.3);
        }

        /* Metric card */
        .metric { text-align: center; padding: 20px 14px; }
        .metric-value {
            font: 700 32px/1 'JetBrains Mono', monospace;
            color: var(--white);
        }
        .metric-value.glow {
            color: var(--accent);
            text-shadow: 0 0 20px rgba(61,214,140,0.4);
        }
        .metric-label {
            font: 400 10px/1 'JetBrains Mono', monospace;
            text-transform: uppercase; letter-spacing: 0.08em;
            color: var(--text-faint); margin-top: 10px;
        }

        /* ═══════════════ EFFICIENCY RING ═══════════════ */
        .ring-container {
            display: flex; align-items: center; justify-content: center;
            gap: 48px; padding: 32px;
            background: var(--surface);
            border: 1px solid var(--border); border-radius: 12px;
            position: relative; overflow: hidden;
        }
        .ring-container::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at center, var(--accent-soft), transparent 70%);
            pointer-events: none;
        }
        .ring-wrap {
            position: relative;
            width: var(--ring-size); height: var(--ring-size);
        }
        .ring {
            width: 100%; height: 100%; border-radius: 50%;
            background: conic-gradient(
                var(--accent) calc(var(--pct) * 1%),
                var(--surface-3) calc(var(--pct) * 1%)
            );
            display: grid; place-items: center;
            animation: ring-reveal 1s ease-out;
        }
        @keyframes ring-reveal {
            from { background: conic-gradient(var(--accent) 0%, var(--surface-3) 0%); }
        }
        .ring-inner {
            width: calc(100% - 20px); height: calc(100% - 20px);
            border-radius: 50%; background: var(--surface);
            display: grid; place-items: center;
            box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
        }
        .ring-text {
            font: 700 42px/1 'JetBrains Mono', monospace;
            color: var(--accent);
            text-shadow: 0 0 30px rgba(61,214,140,0.5);
        }
        .ring-text small {
            font-size: 18px; font-weight: 400;
            color: var(--text-dim);
        }
        .ring-stats { display: flex; flex-direction: column; gap: 18px; min-width: 240px; }
        .ring-stat-row { display: flex; align-items: baseline; justify-content: space-between; }
        .ring-stat-label {
            font: 400 11px/1 'JetBrains Mono', monospace;
            color: var(--text-dim);
        }
        .ring-stat-value {
            font: 600 15px/1 'JetBrains Mono', monospace;
            color: var(--white);
        }

        /* ═══════════════ GRIDS ═══════════════ */
        .grid, .grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: 14px; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }
        .grid-5 { grid-template-columns: repeat(5, 1fr); }
        @media (max-width: 1100px) {
            .grid-5 { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 800px) {
            .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
            .grid-3 { grid-template-columns: 1fr; }
            .ring-container { flex-direction: column; gap: 24px; }
        }

        /* ═══════════════ TABLE ═══════════════ */
        .table-frame {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px; overflow: hidden;
        }
        table { width: 100%; border-collapse: collapse; }
        th {
            font: 500 10px/1 'JetBrains Mono', monospace;
            text-transform: uppercase; letter-spacing: 0.08em;
            color: var(--text-faint); padding: 10px 16px; text-align: left;
            background: var(--bg-subtle);
            border-bottom: 1px solid var(--border);
        }
        th.r { text-align: right; }
        td {
            padding: 9px 16px; font-size: 12.5px;
            border-bottom: 1px solid rgba(30,42,58,0.5);
        }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: rgba(61,214,140,0.02); }
        td.mono { font-family: 'JetBrains Mono', monospace; }
        td.r { text-align: right; }
        td.dim { color: var(--text-dim); }
        td.faint { color: var(--text-faint); font-size: 11px; }
        td.bright { color: var(--white); font-weight: 500; }
        td.accent { color: var(--accent); }

        /* ═══════════════ BADGES ═══════════════ */
        .badge {
            display: inline-flex; align-items: center; height: 20px;
            font: 500 10px/1 'JetBrains Mono', monospace;
            padding: 0 7px; border-radius: 4px; letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .badge-pass { background: rgba(61,214,140,0.12); color: var(--accent); border: 1px solid rgba(61,214,140,0.25); }
        .badge-fail { background: rgba(232,72,85,0.12); color: var(--danger); border: 1px solid rgba(232,72,85,0.25); }
        .badge-critical { background: rgba(232,72,85,0.1); color: #f06070; border: 1px solid rgba(232,72,85,0.2); }
        .badge-high { background: rgba(240,160,48,0.1); color: var(--warning); border: 1px solid rgba(240,160,48,0.2); }
        .badge-medium { background: rgba(91,164,245,0.1); color: var(--info); border: 1px solid rgba(91,164,245,0.2); }
        .badge-low { background: rgba(122,136,153,0.1); color: #8a9aad; border: 1px solid rgba(122,136,153,0.15); }
        .badge-function { background: rgba(167,139,250,0.1); color: var(--purple); border: 1px solid rgba(167,139,250,0.2); }
        .badge-class { background: rgba(240,160,48,0.1); color: var(--warning); border: 1px solid rgba(240,160,48,0.2); }
        .badge-method { background: rgba(91,164,245,0.1); color: var(--info); border: 1px solid rgba(91,164,245,0.2); }
        .badge-constant { background: rgba(61,214,140,0.1); color: var(--accent); border: 1px solid rgba(61,214,140,0.2); }
        .badge-type { background: rgba(232,72,85,0.1); color: #f07080; border: 1px solid rgba(232,72,85,0.2); }
        .badge-pip { background: rgba(59,130,246,0.1); color: #6cb0ff; border: 1px solid rgba(59,130,246,0.2); }
        .badge-npm { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
        .badge-cargo { background: rgba(240,160,48,0.1); color: #f0a030; border: 1px solid rgba(240,160,48,0.2); }
        .badge-go { background: rgba(0,173,216,0.1); color: #00c4e8; border: 1px solid rgba(0,173,216,0.2); }

        /* ═══════════════ PROGRESS RING (SMALL) ═══════════════ */
        .ring-sm {
            width: 80px; height: 80px; border-radius: 50%;
            background: conic-gradient(
                var(--ring-color, var(--accent)) calc(var(--pct) * 1%),
                var(--surface-3) calc(var(--pct) * 1%)
            );
            display: grid; place-items: center;
        }
        .ring-sm-inner {
            width: 62px; height: 62px; border-radius: 50%;
            background: var(--surface);
            display: grid; place-items: center;
        }
        .ring-sm-text {
            font: 600 16px/1 'JetBrains Mono', monospace;
        }

        /* ═══════════════ BARS ═══════════════ */
        .bar-track {
            height: 6px; border-radius: 3px;
            background: var(--surface-3); overflow: hidden;
        }
        .bar-fill {
            height: 100%; border-radius: 3px;
            transition: width 0.6s ease;
        }
        .fill-accent { background: var(--accent); }
        .fill-warning { background: var(--warning); }
        .fill-danger { background: var(--danger); }
        .fill-info { background: var(--info); }
        .fill-purple { background: var(--purple); }

        /* Horizontal stacked bar */
        .stacked-bar {
            display: flex; height: 8px; border-radius: 4px;
            overflow: hidden; background: var(--surface-3);
        }
        .stacked-bar > div { height: 100%; transition: width 0.6s ease; }

        /* ═══════════════ FORMS ═══════════════ */
        .input, select {
            background: var(--surface-2); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 14px; font-size: 13px;
            font-family: 'JetBrains Mono', monospace; color: var(--white);
            outline: none; transition: all 0.15s;
        }
        .input:focus, select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }
        .input::placeholder { color: var(--text-faint); }

        .search-box {
            position: relative;
        }
        .search-box .input {
            width: 100%; padding: 14px 18px; font-size: 14px;
            background: var(--surface);
            border-radius: 10px;
        }
        .search-box .search-icon {
            position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
            color: var(--text-faint); pointer-events: none;
            font-size: 14px;
        }
        .search-box .input.has-icon { padding-left: 42px; }
        .search-box .htmx-indicator {
            position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
        }

        /* ═══════════════ REPO CARD ═══════════════ */
        .repo-card { padding: 18px; }
        .repo-name {
            font: 600 14px/1.2 'JetBrains Mono', monospace;
            color: var(--white); margin-bottom: 12px;
        }
        .repo-stats { display: flex; gap: 16px; margin-bottom: 12px; }
        .repo-stat {
            font: 400 11px/1 'JetBrains Mono', monospace;
            color: var(--text-dim);
        }
        .repo-stat b { color: var(--white); font-weight: 600; }
        .lang-bars { display: flex; gap: 2px; height: 3px; border-radius: 2px; overflow: hidden; }
        .lang-bar { height: 100%; border-radius: 1px; min-width: 4px; }

        /* ═══════════════ ANIMATIONS ═══════════════ */
        @keyframes fade-up {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-in { animation: fade-up 0.3s ease-out both; }
        .delay-1 { animation-delay: 0.05s; }
        .delay-2 { animation-delay: 0.1s; }
        .delay-3 { animation-delay: 0.15s; }
        .delay-4 { animation-delay: 0.2s; }
        .delay-5 { animation-delay: 0.25s; }

        /* ═══════════════ UTILITY ═══════════════ */
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .gap-1 { gap: 4px; }
        .gap-2 { gap: 8px; }
        .gap-3 { gap: 12px; }
        .gap-4 { gap: 16px; }
        .gap-6 { gap: 24px; }
        .flex-1 { flex: 1; }
        .flex-wrap { flex-wrap: wrap; }
        .w-full { width: 100%; }
        .mb-2 { margin-bottom: 8px; }
        .mb-3 { margin-bottom: 12px; }
        .mb-4 { margin-bottom: 16px; }
        .mb-6 { margin-bottom: 24px; }
        .mb-8 { margin-bottom: 32px; }
        .mt-1 { margin-top: 4px; }
        .mt-2 { margin-top: 8px; }
        .text-xs { font-size: 11px; }
        .text-sm { font-size: 12.5px; }
        .text-white { color: var(--white); }
        .text-dim { color: var(--text-dim); }
        .text-faint { color: var(--text-faint); }
        .text-accent { color: var(--accent); }
        .text-center { text-align: center; }
        .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
        a { color: var(--text-dim); text-decoration: none; transition: color 0.12s; }
        a:hover { color: var(--accent); }

        .tag {
            display: inline-flex; align-items: center; height: 22px;
            font: 400 11px/1 'JetBrains Mono', monospace;
            padding: 0 8px; border-radius: 4px;
            background: var(--surface-2); color: var(--text-dim);
            border: 1px solid var(--border);
        }

        /* Code blocks */
        .code-block {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 14px 16px;
            margin-top: 8px;
            overflow-x: auto;
            font: 400 12px/1.6 'JetBrains Mono', monospace;
            color: var(--text);
            tab-size: 4;
            white-space: pre;
        }
        .code-block code {
            font: inherit; color: inherit;
        }
        /* Override Prism tomorrow theme to match our palette */
        code[class*="language-"], pre[class*="language-"] {
            background: var(--bg) !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12px !important;
            line-height: 1.6 !important;
            text-shadow: none !important;
        }
        .code-block pre[class*="language-"] {
            margin: 0; padding: 0; border: none;
            background: transparent !important;
        }
        .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #546e7a !important; }
        .token.keyword { color: #c792ea !important; }
        .token.function { color: #82aaff !important; }
        .token.string { color: #c3e88d !important; }
        .token.number { color: #f78c6c !important; }
        .token.operator { color: #89ddff !important; }
        .token.class-name { color: #ffcb6b !important; }
        .token.boolean { color: #f78c6c !important; }
        .token.builtin { color: #82aaff !important; }
        .token.decorator { color: #c792ea !important; font-style: italic; }
        .token.punctuation { color: #89ddff !important; }

        /* Autocomplete */
        .autocomplete-wrap { position: relative; z-index: 100; }
        .autocomplete-list {
            position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 0 0 8px 8px; max-height: 300px; overflow-y: auto;
            box-shadow: 0 12px 32px rgba(0,0,0,0.6);
        }
        .autocomplete-item {
            padding: 8px 14px; cursor: pointer; display: flex;
            align-items: center; gap: 8px;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s;
        }
        .autocomplete-item:hover { background: var(--surface-2); }
        .autocomplete-item:last-child { border-bottom: none; }

        /* Mermaid overrides */
        .mermaid { background: transparent !important; }
        .mermaid svg { max-width: 100%; }

        /* Clickable symbol result */
        .sym-result { cursor: pointer; transition: border-color 0.15s; }
        .sym-result:hover { border-color: var(--accent); }
        .sym-expand {
            font-size: 10px; color: var(--text-faint);
            transition: transform 0.2s; display: inline-block;
        }
        .sym-expand.open { transform: rotate(90deg); }
        .sym-source { display: none; overflow: hidden; }
        .sym-source.open { display: block; }

        .empty-state {
            text-align: center; padding: 48px 24px;
            color: var(--text-faint);
            font: 400 12px/1.6 'JetBrains Mono', monospace;
        }

        /* htmx */
        .htmx-indicator { display: none; }
        .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
        .spinner {
            display: inline-block; width: 14px; height: 14px;
            border: 2px solid var(--border); border-top-color: var(--accent);
            border-radius: 50%; animation: spin 0.5s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Gate */
        .gate {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 10px 20px; border-radius: 8px;
            font: 600 13px/1 'JetBrains Mono', monospace;
        }
        .gate-pass { background: rgba(61,214,140,0.08); color: var(--accent); border: 1px solid rgba(61,214,140,0.2); }
        .gate-fail { background: rgba(232,72,85,0.08); color: var(--danger); border: 1px solid rgba(232,72,85,0.2); }
        .gate-icon { font-size: 16px; }

        /* Expandable */
        details { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        details + details { margin-top: 8px; }
        summary {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; cursor: pointer;
            background: var(--surface); font: 400 12.5px/1 'Inter', sans-serif;
            color: var(--text); list-style: none;
        }
        summary:hover { background: var(--surface-2); }
        summary::-webkit-details-marker { display: none; }
        details[open] summary { border-bottom: 1px solid var(--border); }
        details .detail-body { padding: 12px 16px; background: var(--bg-subtle); }
    </style>
</head>
<body>
    <nav class="topbar">
        <div class="topbar-left">
            <a href="/" class="logo">
                <div class="logo-mark">S</div>
                <span class="logo-text">SYLVAN</span>
            </a>
            <div class="nav-tabs">
                <a href="/" class="nav-tab {% if active_page == 'overview' %}active{% endif %}">Overview</a>
                <a href="/quality" class="nav-tab {% if active_page == 'quality' %}active{% endif %}">Quality</a>
                <a href="/libraries" class="nav-tab {% if active_page == 'libraries' %}active{% endif %}">Libraries</a>
                <a href="/workspaces" class="nav-tab {% if active_page == 'workspaces' %}active{% endif %}">Workspaces</a>
                <a href="/search" class="nav-tab {% if active_page == 'search' %}active{% endif %}">Search</a>
                <a href="/session" class="nav-tab {% if active_page == 'session' %}active{% endif %}">Session</a>
                <a href="/history" class="nav-tab {% if active_page == 'history' %}active{% endif %}">History</a>
                <a href="/extensions" class="nav-tab {% if active_page == 'extensions' %}active{% endif %}">Extensions</a>
                <a href="/blast-radius" class="nav-tab {% if active_page == 'blast_radius' %}active{% endif %}">Blast Radius</a>
            </div>
        </div>
        <div class="topbar-right">
            <span class="status-dot"></span>
            <span hx-get="/partials/uptime" hx-trigger="load, every 30s" hx-swap="innerHTML">UPTIME {{ uptime() }}</span>
        </div>
    </nav>
    <div class="page">
        {% block content %}{% endblock %}
    </div>
    <script>
        // Re-highlight code blocks after htmx swaps in new content
        document.body.addEventListener('htmx:afterSwap', function() {
            Prism.highlightAll();
        });
    </script>
</body>
</html>
