<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Project-Hub - {{ hub_cwd }}{% if hub_mcp %} (mcp){% endif %}</title>
    <link rel="icon" type="image/svg+xml" href="/static/logo.svg">
    <link rel="stylesheet" href="/static/pico.min.css">
    <link rel="stylesheet" href="/static/tablesort.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <nav>
        <ul>
            <li><img src="/static/logo.svg" alt="" width="20" height="20" style="vertical-align:middle;margin-right:.35rem"><strong>project-hub</strong></li>
            <li><small style="opacity:.5">{{ hub_cwd }}</small></li>
            <li><a href="/"{% if request.url.path == "/" %} aria-current="page"{% endif %}>Dashboard</a></li>
            <li><a href="/mrs"{% if request.url.path == "/mrs" %} aria-current="page"{% endif %}>MRs</a></li>
            <li><a href="/issues"{% if request.url.path == "/issues" %} aria-current="page"{% endif %}>Issues</a></li>
            <li><a href="/pipelines"{% if request.url.path == "/pipelines" %} aria-current="page"{% endif %}>Pipelines</a></li>
            <li><a href="/vulns"{% if request.url.path == "/vulns" %} aria-current="page"{% endif %}>Vulns</a></li>
        </ul>
        <ul>
            <li>
                <span id="sync-btn"
                      hx-get="/fragment/sync-status"
                      hx-trigger="load, every 2s"
                      hx-swap="innerHTML">
                </span>
            </li>
            <li>
                <button id="theme-toggle" class="outline secondary" onclick="cycleTheme()" title="Toggle theme"><svg class="nav-icon theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg><svg class="nav-icon theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
            </li>
            <li>
                <button id="events-bell" class="outline secondary" onclick="toggleEventsPanel()" title="Events">
                    <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>{% set unseen = state.events | selectattr("seen", "false") | list | length if state and state.events else 0 %}{% if unseen %}<sup class="badge">{{ unseen }}</sup>{% endif %}
                </button>
            </li>
            <li><a href="/settings" title="Settings"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></a></li>
        </ul>
    </nav>

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

    <!-- Events panel (slide-in, uses data-open for CSS transition) -->
    <aside id="events-panel" class="events-panel" data-open="false"
           hx-get="/fragment/events-panel"
           hx-trigger="load, every 5s"
           hx-swap="innerHTML">
    <p class="htmx-indicator-inline" aria-busy="true">Loading events…</p>
    </aside>
    <div id="events-overlay" class="events-overlay" onclick="toggleEventsPanel()"></div>

    <!-- Toast zone -->
    <div id="toast-zone" class="toast-zone"></div>

    <footer class="site-footer">
        <a href="https://gitlab.com/b.rajaut/project-hub" target="_blank" rel="noopener">project-hub</a> v{{ hub_version }}
    </footer>

    <script src="/static/htmx.min.js"></script>
    <script src="/static/tablesort.min.js"></script>
    <script src="/static/sortable.min.js"></script>
    <script src="/static/app.js"></script>
</body>
</html>
