<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Memorizz{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/styles.css?v=20">
    <style>
        /* Background accents */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.01) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 255, 136, 0.01) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(0, 217, 255, 0.01) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}
    <div class="layout">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <a href="/dashboard" class="logo">
                    <span class="logo-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M9 3a3 3 0 0 0-3 3v.3A3.7 3.7 0 0 0 4 9.7V10a4 4 0 0 0 1.2 2.9A4 4 0 0 0 4 16v.3A3.7 3.7 0 0 0 6 19.7V20a3 3 0 0 0 3 3"/>
                            <path d="M15 3a3 3 0 0 1 3 3v.3A3.7 3.7 0 0 1 20 9.7V10a4 4 0 0 1-1.2 2.9A4 4 0 0 1 20 16v.3a3.7 3.7 0 0 1-2 3.4V20a3 3 0 0 1-3 3"/>
                            <path d="M9 12h6"/>
                            <path d="M12 3v18"/>
                        </svg>
                    </span>
                    <span class="logo-text">Memorizz</span>
                </a>
                <button
                    type="button"
                    class="sidebar-toggle-btn"
                    id="sidebar-toggle-btn"
                    aria-label="Collapse side navigation"
                    title="Collapse navigation"
                >
                    <span class="sidebar-toggle-icon" id="sidebar-toggle-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m15 18-6-6 6-6"/>
                        </svg>
                    </span>
                </button>
            </div>

            <nav class="sidebar-nav">
                {% set memory_pages = ['personas', 'toolbox', 'conversations', 'workflows', 'long-term', 'short-term', 'entity', 'summaries', 'shared', 'cache'] %}
                <a href="/dashboard" class="nav-item {% if active_page == 'dashboard' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3v18h18"/>
                            <path d="M7 14v4"/>
                            <path d="M12 10v8"/>
                            <path d="M17 6v12"/>
                        </svg>
                    </span>
                    <span>Dashboard</span>
                </a>

                {% if agents_nav %}
                <details class="nav-dropdown" {% if active_page == 'agents' %}open{% endif %}>
                    <summary class="nav-item nav-dropdown-toggle {% if active_page == 'agents' %}active{% endif %}">
                        <span class="nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="4" y="7" width="16" height="12" rx="3"/>
                                <path d="M12 3v4"/>
                                <path d="M9 12h.01"/>
                                <path d="M15 12h.01"/>
                                <path d="M8 16h8"/>
                            </svg>
                        </span>
                        <span>Agents</span>
                        <span class="nav-caret">▾</span>
                    </summary>
                    <div class="nav-dropdown-content">
                        <a href="/agents" class="nav-item nav-item--sub">All Agents</a>
                        {% for nav_agent in agents_nav %}
                        <a href="/agents/{{ nav_agent.agent_id }}/playground" class="nav-item nav-item--sub nav-agent-item {% if nav_agent.agent_id == active_agent_id %}active{% endif %}">
                            <span class="nav-agent-name">{{ nav_agent.name }}</span>
                            <span class="nav-agent-id">{{ nav_agent.short_id }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </details>
                {% else %}
                <a href="/agents" class="nav-item {% if active_page == 'agents' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="4" y="7" width="16" height="12" rx="3"/>
                            <path d="M12 3v4"/>
                            <path d="M9 12h.01"/>
                            <path d="M15 12h.01"/>
                            <path d="M8 16h8"/>
                        </svg>
                    </span>
                    <span>Agents</span>
                </a>
                {% endif %}

                <details class="nav-dropdown" {% if active_page in memory_pages %}open{% endif %}>
                    <summary class="nav-item nav-dropdown-toggle {% if active_page in memory_pages %}active{% endif %}">
                        <span class="nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 3a3 3 0 0 0-3 3v.3A3.7 3.7 0 0 0 4 9.7V10a4 4 0 0 0 1.2 2.9A4 4 0 0 0 4 16v.3A3.7 3.7 0 0 0 6 19.7V20a3 3 0 0 0 3 3"/>
                                <path d="M15 3a3 3 0 0 1 3 3v.3A3.7 3.7 0 0 1 20 9.7V10a4 4 0 0 1-1.2 2.9A4 4 0 0 1 20 16v.3a3.7 3.7 0 0 1-2 3.4V20a3 3 0 0 1-3 3"/>
                                <path d="M9 12h6"/>
                                <path d="M12 3v18"/>
                            </svg>
                        </span>
                        <span>Memory Types</span>
                        <span class="nav-caret">▾</span>
                    </summary>
                    <div class="nav-dropdown-content">
                        <a href="/memory/personas" class="nav-item nav-item--sub {% if active_page == 'personas' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="8" r="4"/>
                                    <path d="M4 20a8 8 0 0 1 16 0"/>
                                </svg>
                            </span>
                            <span>Personas</span>
                        </a>
                        <a href="/memory/toolbox" class="nav-item nav-item--sub {% if active_page == 'toolbox' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.2 2.2-1.8-1.8z"/>
                                </svg>
                            </span>
                            <span>Toolbox</span>
                        </a>
                        <a href="/memory/conversations" class="nav-item nav-item--sub {% if active_page == 'conversations' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 12a8 8 0 0 1-8 8H7l-4 3v-7a8 8 0 1 1 18-4z"/>
                                </svg>
                            </span>
                            <span>Conversations</span>
                        </a>
                        <a href="/memory/workflows" class="nav-item nav-item--sub {% if active_page == 'workflows' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 3h7v7"/>
                                    <path d="M10 14 21 3"/>
                                    <path d="M21 14v7h-7"/>
                                    <path d="m3 10 11 11"/>
                                </svg>
                            </span>
                            <span>Workflows</span>
                        </a>
                        <a href="/memory/long-term" class="nav-item nav-item--sub {% if active_page == 'long-term' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8l-5 3z"/>
                                    <path d="M8 10h8"/>
                                    <path d="M8 14h5"/>
                                </svg>
                            </span>
                            <span>Long-term</span>
                        </a>
                        <a href="/memory/short-term" class="nav-item nav-item--sub {% if active_page == 'short-term' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M13 2 4 14h7l-1 8 10-12h-7z"/>
                                </svg>
                            </span>
                            <span>Short-term</span>
                        </a>
                        <a href="/memory/entity" class="nav-item nav-item--sub {% if active_page == 'entity' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11 4"/>
                                    <path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07L13 20"/>
                                </svg>
                            </span>
                            <span>Entity</span>
                        </a>
                        <a href="/memory/summaries" class="nav-item nav-item--sub {% if active_page == 'summaries' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 19a2 2 0 0 1 2-2h14"/>
                                    <path d="M6 17V5a2 2 0 0 1 2-2h12v16H8a2 2 0 0 1-2-2z"/>
                                </svg>
                            </span>
                            <span>Summaries</span>
                        </a>
                        <a href="/memory/shared" class="nav-item nav-item--sub {% if active_page == 'shared' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <ellipse cx="12" cy="5" rx="7" ry="3"/>
                                    <path d="M5 5v8c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/>
                                    <path d="M5 13v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/>
                                </svg>
                            </span>
                            <span>Shared</span>
                        </a>
                        <a href="/memory/cache" class="nav-item nav-item--sub {% if active_page == 'cache' %}active{% endif %}">
                            <span class="nav-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 4h16v16H4z"/>
                                    <path d="M8 4v6h8V4"/>
                                    <path d="M9 16h6"/>
                                </svg>
                            </span>
                            <span>Cache</span>
                        </a>
                    </div>
                </details>

                <a href="/playground" class="nav-item {% if active_page == 'playground' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="7" width="18" height="10" rx="4"/>
                            <path d="M8 12h4"/>
                            <path d="M10 10v4"/>
                            <path d="M16 11h.01"/>
                            <path d="M18 13h.01"/>
                        </svg>
                    </span>
                    <span>Playground</span>
                </a>

                <a href="/traces" class="nav-item {% if active_page == 'traces' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 12h3"/>
                            <path d="M19 12h3"/>
                            <path d="M6 12a6 6 0 0 1 12 0"/>
                            <path d="M9 12a3 3 0 0 1 6 0"/>
                            <circle cx="12" cy="12" r="1"/>
                        </svg>
                    </span>
                    <span>Traces</span>
                </a>

                <a href="/evalground" class="nav-item {% if active_page == 'evalground' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M10 2v6l-5 9a3 3 0 0 0 2.6 4.5h8.8A3 3 0 0 0 19 17l-5-9V2"/>
                            <path d="M8 7h8"/>
                            <path d="M9 15h6"/>
                        </svg>
                    </span>
                    <span>Evalground</span>
                </a>

                <a href="/settings" class="nav-item {% if active_page == 'settings' %}active{% endif %}">
                    <span class="nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="3"/>
                            <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.2a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.2a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.2a1.7 1.7 0 0 0 1 1.5h.1a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.2a1.7 1.7 0 0 0-1.5 1z"/>
                        </svg>
                    </span>
                    <span>Settings</span>
                </a>
            </nav>

            <div class="sidebar-footer">
                <div class="connection-status">
                    <span class="provider-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <ellipse cx="12" cy="5" rx="7" ry="3"/>
                            <path d="M5 5v8c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/>
                            <path d="M5 13v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/>
                        </svg>
                    </span>
                    <span class="status-dot connected"></span>
                    <span class="status-text">{{ provider_type|title }}</span>
                    <button
                        type="button"
                        class="theme-toggle"
                        id="theme-toggle-btn"
                        aria-label="Toggle light mode (Command/Ctrl + Shift + L)"
                        title="Toggle light mode (Command/Ctrl + Shift + L)"
                    >
                        <span class="theme-toggle-icon" id="theme-toggle-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                                <path d="M12 2v2"/>
                                <path d="M12 20v2"/>
                                <path d="m4.9 4.9 1.4 1.4"/>
                                <path d="m17.7 17.7 1.4 1.4"/>
                                <path d="M2 12h2"/>
                                <path d="M20 12h2"/>
                                <path d="m4.9 19.1 1.4-1.4"/>
                                <path d="m17.7 6.3 1.4-1.4"/>
                            </svg>
                        </span>
                        <span class="theme-toggle-label" id="theme-toggle-label">Light mode</span>
                        <span class="theme-toggle-shortcut">⌘⇧L</span>
                    </button>
                </div>
                <a href="/disconnect" class="disconnect-btn">Disconnect</a>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            {% block content %}{% endblock %}
        </main>
    </div>

    <section id="benchmark-run-dock" class="benchmark-dock" hidden aria-live="polite" aria-label="Benchmark run monitor">
        <div class="benchmark-dock-shell">
            <div class="benchmark-dock-header">
                <div class="benchmark-dock-title-wrap">
                    <span class="benchmark-dock-title">Benchmark Run</span>
                    <code id="benchmark-dock-run-id" class="benchmark-dock-run-id">-</code>
                    <span id="benchmark-dock-status" class="benchmark-dock-status">running</span>
                </div>
                <div class="benchmark-dock-actions">
                    <a id="benchmark-dock-link" class="benchmark-dock-link" href="/evalground">Open</a>
                    <button type="button" id="benchmark-dock-clear" class="benchmark-dock-clear">Clear</button>
                    <button
                        type="button"
                        id="benchmark-dock-toggle"
                        class="benchmark-dock-toggle"
                        aria-label="Collapse benchmark monitor"
                        title="Collapse benchmark monitor"
                    >
                        <span class="benchmark-dock-toggle-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </span>
                    </button>
                </div>
            </div>
            <div class="benchmark-dock-body">
                <pre id="benchmark-dock-output" class="benchmark-dock-output"></pre>
            </div>
        </div>
    </section>
    {% endblock %}

    <script src="/static/js/app.js?v=17" defer></script>
    {% block scripts %}{% endblock %}
</body>
</html>
