<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}GraQle Studio{% endblock %}</title>
    <link rel="stylesheet" href="/studio/static/css/studio.css">
    <script src="/studio/static/vendor/htmx.min.js"></script>
    <script defer src="/studio/static/vendor/alpine.min.js"></script>
    {% block head %}{% endblock %}
</head>
<body class="dark">
    <!-- Mobile hamburger -->
    <button class="mobile-menu-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')" aria-label="Toggle menu">
        &#9776;
    </button>

    <nav class="sidebar">
        <div class="sidebar-brand">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/><circle cx="4" cy="8" r="2"/><circle cx="20" cy="8" r="2"/>
                <circle cx="4" cy="16" r="2"/><circle cx="20" cy="16" r="2"/>
                <line x1="6" y1="8" x2="9" y2="10"/><line x1="18" y1="8" x2="15" y2="10"/>
                <line x1="6" y1="16" x2="9" y2="14"/><line x1="18" y1="16" x2="15" y2="14"/>
            </svg>
            <span>GraQle Studio</span>
        </div>
        <div class="sidebar-nav">
            <a href="/studio/" class="nav-item {% block nav_dashboard %}{% endblock %}" onclick="document.querySelector('.sidebar').classList.remove('open')">
                <span class="nav-icon">&#9632;</span> Dashboard
            </a>
            <a href="/studio/graph" class="nav-item {% block nav_graph %}{% endblock %}" onclick="document.querySelector('.sidebar').classList.remove('open')">
                <span class="nav-icon">&#9673;</span> Graph Explorer
            </a>
            <a href="/studio/reasoning" class="nav-item {% block nav_reasoning %}{% endblock %}" onclick="document.querySelector('.sidebar').classList.remove('open')">
                <span class="nav-icon">&#9889;</span> Live Reasoning
            </a>
            <a href="/studio/metrics" class="nav-item {% block nav_metrics %}{% endblock %}" onclick="document.querySelector('.sidebar').classList.remove('open')">
                <span class="nav-icon">&#9776;</span> Metrics
            </a>
            <a href="/studio/settings" class="nav-item {% block nav_settings %}{% endblock %}" onclick="document.querySelector('.sidebar').classList.remove('open')">
                <span class="nav-icon">&#9881;</span> Settings
            </a>
        </div>
        <div class="sidebar-footer">
            <div class="graph-status">
                {% if graph_loaded %}
                <span class="status-dot green"></span> {{ node_count }} nodes &middot; {{ edge_count }} edges
                {% else %}
                <span class="status-dot red"></span> No graph loaded
                {% endif %}
            </div>
        </div>
    </nav>

    <!-- Overlay for mobile sidebar -->
    <div class="sidebar-overlay" onclick="document.querySelector('.sidebar').classList.remove('open')"></div>

    <main class="main-content">
        <!-- Deprecation banner: this is the lightweight Studio -->
        <div style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); border: 1px solid #4f46e5; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px;">
            <span style="font-size: 20px;">&#x26A0;</span>
            <div style="flex: 1;">
                <strong style="color: #c7d2fe;">This is the lightweight built-in Studio.</strong>
                <span style="color: #a5b4fc;"> For the full experience (Intelligence, Governance, DRACE, rich graph filters), use </span>
                <a href="https://graqle.com/dashboard" target="_blank" style="color: #818cf8; text-decoration: underline; font-weight: 600;">graqle.com/dashboard</a>
                <span style="color: #a5b4fc;"> or run </span>
                <code style="background: rgba(99,102,241,0.2); padding: 2px 6px; border-radius: 4px; color: #c7d2fe;">npm run dev</code>
                <span style="color: #a5b4fc;"> in graqle-studio/.</span>
            </div>
        </div>
        {% block content %}{% endblock %}
    </main>

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