<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}asiai — Apple Silicon AI bench{% endblock %}</title>

    <!-- Fonts: Geist (Vercel) — self-hosted, no CDN dependency -->
    <style>
    @font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Geist-Regular.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Geist-Medium.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Geist-SemiBold.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Geist-Bold.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/GeistMono-Regular.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/GeistMono-Medium.woff2') format('woff2'); }
    @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/GeistMono-Bold.woff2') format('woff2'); }
    </style>

    <!-- htmx (local vendor, no CDN dependency) -->
    <script src="/static/vendor/htmx-2.0.4.min.js"></script>

    <!-- htmx SSE extension -->
    <script src="/static/vendor/htmx-ext-sse-2.2.2.js"></script>

    <!-- ApexCharts -->
    <script src="/static/vendor/apexcharts-3.54.1.min.js"></script>

    <!-- asiai styles & charts -->
    <link rel="stylesheet" href="/static/style.css?v=2.0.0">
    <script src="/static/charts.js"></script>
</head>
<body>
    <div class="layout">
        <!-- Sidebar -->
        <nav class="sidebar" aria-label="Main navigation">
            <div class="sidebar-logo" style="text-align: center;">
                <img src="/static/logo.svg" alt="asiai" width="160" height="160" style="border-radius: 12px; margin-bottom: 0.5rem;">
                <div class="sidebar-tagline">Apple Silicon AI<br>inference bench</div>
            </div>
            <ul class="sidebar-nav">
                <li>
                    <a href="/" class="{% if nav_active == 'dashboard' %}active{% endif %}">
                        <span class="nav-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor"/><rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/></svg></span>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="/monitor" class="{% if nav_active == 'monitor' %}active{% endif %}">
                        <span class="nav-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg></span>
                        <span>Monitor</span>
                    </a>
                </li>
                <li>
                    <a href="/bench" class="{% if nav_active == 'bench' %}active{% endif %}">
                        <span class="nav-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 13V7M8 13V3M12 13V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
                        <span>Benchmark</span>
                    </a>
                </li>
                <li>
                    <a href="/history" class="{% if nav_active == 'history' %}active{% endif %}">
                        <span class="nav-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 12L5.5 7L8.5 9.5L14 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                        <span>History</span>
                    </a>
                </li>
                <li>
                    <a href="/doctor" class="{% if nav_active == 'doctor' %}active{% endif %}">
                        <span class="nav-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
                        <span>Doctor</span>
                    </a>
                </li>
            </ul>
            <div style="margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid var(--border);">
                <button id="theme-toggle" class="btn" style="width: 100%; justify-content: center;" onclick="toggleTheme()" aria-label="Toggle dark/light theme">
                    <span id="theme-icon">&#9788;</span>
                    <span id="theme-label">Light</span>
                </button>
            </div>
        </nav>

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

    <script>
    function toggleTheme() {
        var current = document.documentElement.getAttribute('data-theme') || 'dark';
        var next = current === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', next);
        localStorage.setItem('asiai-theme', next);
        updateThemeButton(next);
    }

    function updateThemeButton(theme) {
        var icon = document.getElementById('theme-icon');
        var label = document.getElementById('theme-label');
        if (theme === 'light') {
            icon.textContent = '\u263E';
            label.textContent = 'Dark';
        } else {
            icon.textContent = '\u263C';
            label.textContent = 'Light';
        }
    }

    (function() {
        var saved = localStorage.getItem('asiai-theme') || 'dark';
        document.documentElement.setAttribute('data-theme', saved);
        updateThemeButton(saved);
    })();
    </script>

    <script>
    /* Precision Instrument — counter animation for hero numbers */
    function animateCounter(el, target, duration) {
        if (!el || isNaN(target)) return;
        var start = 0;
        var startTime = null;
        var decimals = String(target).includes('.') ? String(target).split('.')[1].length : 0;
        function step(ts) {
            if (!startTime) startTime = ts;
            var progress = Math.min((ts - startTime) / duration, 1);
            var eased = 1 - Math.pow(1 - progress, 3); /* easeOutCubic */
            var current = start + (target - start) * eased;
            el.textContent = current.toFixed(decimals);
            if (progress < 1) requestAnimationFrame(step);
        }
        requestAnimationFrame(step);
    }
    /* Auto-animate hero numbers on load */
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.hero-number[data-animate]').forEach(function(el) {
            var val = parseFloat(el.textContent);
            if (!isNaN(val)) animateCounter(el, val, 800);
        });
    });
    </script>

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