<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Evonic</title>
    <script>
    // Anti-flash: apply theme + page background before first paint (synchronous, render-blocking)
    (function() {
        var t = localStorage.getItem('evonic-theme') || 'system';
        var isDark = t === 'dark' || (t === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
        if (isDark) {
            document.documentElement.classList.add('dark');
        }
        // Set html background color inline so it paints instantly — prevents black/white flash
        // between page navigations. style.css provides a fallback for dynamic theme toggling.
        document.documentElement.style.backgroundColor = isDark ? '#0f172a' : '#f5f5f5';
        // Listen for system color scheme changes when theme is 'system'
        if (t === 'system' && window.matchMedia) {
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
                document.documentElement.classList.toggle('dark', e.matches);
                document.documentElement.style.backgroundColor = e.matches ? '#0f172a' : '#f5f5f5';
            });
        }
    })();
    </script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}?v=3">
    <script src="{{ url_for('static', filename='js/ui-toggle.js') }}?v=1"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}?v=1"></script>
    <script src="{{ url_for('static', filename='js/lucide.min.js') }}?v=1"></script>
    <script>
    // Init Lucide icons on DOM ready and expose refresh helper for dynamic content
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
    // Global helper: re-render lucide icons after dynamic DOM updates
    function refreshLucideIcons() {
        lucide.createIcons();
    }
    </script>
    <script src="{{ url_for('static', filename='js/marked.min.js') }}?v=1"></script>
    <script src="{{ url_for('static', filename='js/ui-utils.js') }}?v=1"></script>
    <script src="{{ url_for('static', filename='js/approval-modal.js') }}?v=1"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=17">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/recap-prose.css') }}?v=1">
</head>
<body>
    <header>
        <div class="header-inner">
            <a href="/" class="brand">
                <img src="{{ url_for('static', filename='img/mascot.png') }}" alt="Evonic" class="brand-icon" width="28" height="28">
                <span>Evonic</span>
                <small class="brand-version">v{{ evonic_version }}</small>
            </a>

            <button class="nav-toggle" onclick="document.querySelector('nav').classList.toggle('nav-open')" aria-label="Toggle navigation">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                    <line x1="3" y1="6" x2="21" y2="6"/>
                    <line x1="3" y1="12" x2="21" y2="12"/>
                    <line x1="3" y1="18" x2="21" y2="18"/>
                </svg>
            </button>

            <nav>
                {% if session.get('authenticated') %}
                <a href="/" class="{{ 'nav-active' if request.path == '/' else '' }}">Dashboard</a>
                <a href="/agents" class="{{ 'nav-active' if request.path.startswith('/agents') else '' }}">Agents</a>
                <a href="/sessions" class="{{ 'nav-active' if request.path.startswith('/sessions') else '' }}">Sessions</a>
                <a href="/evaluate" class="{{ 'nav-active' if request.path.startswith('/evaluate') else '' }}">Evaluation</a>
                {% endif %}
 
                {% if session.get('authenticated') %}
                <a href="/system" class="{{ 'nav-active' if request.path == '/system' or request.path.startswith('/system/') else '' }}">System</a>
                <a href="/skills" class="{{ 'nav-active' if request.path.startswith('/skills') else '' }}">Skills</a>
                <a href="/plugins" class="{{ 'nav-active' if request.path.startswith('/plugins') else '' }}">Plugins</a>
                <a href="/scheduler" class="{{ 'nav-active' if request.path.startswith('/scheduler') else '' }}">Scheduler</a>
                {% for _nav_item in plugin_nav_items %}
                <a href="{{ _nav_item.path }}" class="{{ 'nav-active' if request.path.startswith(_nav_item.path) else '' }}">{{ _nav_item.label }}</a>
                {% endfor %}
                {% endif %}
                {% if session.get('authenticated') %}
                <hr class="nav-divider">
                <a href="/logout" class="nav-logout">Logout</a>
                {% endif %}
            </nav>
        </div>
        <!-- Update notification banner (hidden by default) -->
        <div id="ev-update-banner" style="display:none">
            <div class="max-w-[1600px] mx-auto px-4 py-2 flex items-center justify-between text-sm">
                <div class="flex items-center gap-2">
                    <span id="ev-update-banner-text"></span>
                </div>
                <div id="ev-update-banner-actions" class="flex items-center shrink-0"></div>
            </div>
        </div>
    </header>

    <main class="max-w-[1600px] mx-auto">
        {% block content %}{% endblock %}
    </main>
    
    <footer>
    </footer>
    <script src="{{ url_for('static', filename='js/update-banner.js') }}?v=1"></script>
</body>
</html>
