<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}MCP Network Diagnostics{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css">
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f1419;
            color: #e6edf3;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: #161b22;
            border-bottom: 1px solid #30363d;
            padding: 16px 0;
            margin-bottom: 24px;
        }

        nav.top-nav {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        .nav-brand {
            font-size: 18px;
            font-weight: 650;
            color: #f0f6fc;
            text-decoration: none;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .nav-brand:hover {
            text-decoration: none;
            color: #f0f6fc;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1 1 auto;
            min-width: 280px;
            flex-wrap: wrap;
        }

        .nav-link {
            color: #8b949e;
            text-decoration: none;
            padding: 7px 10px;
            border-radius: 8px;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .nav-link:hover, .nav-link.active {
            background: #21262d;
            color: #e6edf3;
            text-decoration: none;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: auto;
            flex: 0 0 auto;
        }

        .nav-identity {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
            min-width: 0;
        }

        .nav-identity .guest-label {
            font-size: 13px;
            color: #8b949e;
            white-space: nowrap;
        }

        .nav-identity .guest-hint {
            font-size: 12px;
            color: #6e7681;
            white-space: nowrap;
        }

        .nav-sign-in {
            flex-shrink: 0;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(88, 166, 255, 0.35);
            background: rgba(88, 166, 255, 0.10);
            color: #58a6ff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .nav-sign-in:hover {
            background: rgba(88, 166, 255, 0.14);
            border-color: rgba(88, 166, 255, 0.55);
            text-decoration: none;
        }

        @media (max-width: 720px) {
            .nav-links {
                flex-basis: 100%;
                order: 3;
            }

            .nav-right {
                width: 100%;
                order: 2;
                margin-left: 0;
                justify-content: space-between;
            }
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 20px;
        }

        .stat-label {
            color: #8b949e;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 600;
            color: #58a6ff;
        }

        .stat-sub {
            color: #8b949e;
            font-size: 14px;
            margin-top: 4px;
        }

        .card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 16px;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: left;
            padding: 12px;
            border-bottom: 1px solid #30363d;
            color: #8b949e;
            font-weight: 600;
            font-size: 14px;
        }

        td {
            padding: 12px;
            border-bottom: 1px solid #21262d;
        }

        tr:hover {
            background: #0d1117;
        }

        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .badge-critical { background: #da3633; color: #fff; }
        .badge-warning { background: #d29922; color: #000; }
        .badge-info { background: #1f6feb; color: #fff; }
        .badge-success { background: #2da44e; color: #fff; }

        .health-score {
            font-size: 48px;
            font-weight: 700;
        }

        .health-good { color: #2da44e; }
        .health-warning { color: #d29922; }
        .health-critical { color: #da3633; }

        a { color: #58a6ff; text-decoration: none; }
        a:hover { text-decoration: underline; }

        .btn {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 6px;
            background: #238636;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
        }

        .btn:hover {
            background: #2ea043;
            text-decoration: none;
        }

        .btn-secondary {
            background: #21262d;
            color: #e6edf3;
        }

        .btn-secondary:hover {
            background: #30363d;
        }

        .time {
            color: #8b949e;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav class="top-nav" aria-label="Primary">
                <div class="nav-left">
                    <a class="nav-brand" href="/">MCP Network Diagnostics</a>
                </div>

                <div class="nav-links" role="navigation" aria-label="Main">
                    <a href="/" class="nav-link {% if request.url.path == '/' %}active{% endif %}">Overview</a>
                    <a href="/tools" class="nav-link {% if '/tools' in request.url.path %}active{% endif %}">Tools</a>
                    <a href="/devices" class="nav-link {% if '/devices' in request.url.path %}active{% endif %}">Devices</a>
                    <a href="/incidents" class="nav-link {% if '/incidents' in request.url.path %}active{% endif %}">Incidents</a>
                    <a href="/intents" class="nav-link {% if '/intents' in request.url.path %}active{% endif %}">Intents</a>
                    <a href="/developer" class="nav-link {% if '/developer' in request.url.path %}active{% endif %}">Developer</a>
                    <a href="/settings" class="nav-link {% if '/settings' in request.url.path %}active{% endif %}">Settings</a>
                </div>

                <div class="nav-right">
                    {% if request.state.consumer_identity %}
                    <div class="nav-identity">
                        <span class="guest-label">Using as guest</span>
                        <span class="guest-hint" title="session-only data, no account">(session-only)</span>
                    </div>
                    <a href="#" class="nav-sign-in">Sign in</a>
                    {% else %}
                    <a href="/" class="nav-sign-in">Continue as guest</a>
                    {% endif %}
                </div>
            </nav>
            <div id="system-status" class="system-status-wrap" hx-get="/partials/status" hx-trigger="load, every 15s" hx-swap="innerHTML">
                <div class="system-status-bar" role="status"><span class="system-status-value">Loading…</span></div>
            </div>
        </div>
    </header>

    <main class="container">
        {% block content %}{% endblock %}
    </main>
</body>
</html>
