<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Apply theme before any rendering to prevent flash of wrong theme -->
    <script>
        (function() {
            var t = 'dark';
            try { t = localStorage.getItem('coral-theme') || 'dark'; } catch(_) {}
            if (t === 'system') t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
            document.documentElement.setAttribute('data-theme', t);
        })();
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coral</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap">
    <!-- xterm.js terminal emulator -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/css/xterm.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/lib/xterm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10/lib/addon-fit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11/lib/addon-web-links.min.js"></script>
</head>

<body>
    <header class="top-bar">
        <div class="top-bar-brand">
            <img src="/static/coral.png" alt="Coral" class="top-bar-logo">
            <h1>Coral</h1>
        </div>
        <div class="top-bar-actions">
            <button class="top-bar-btn" onclick="showWebhookModal()"
                    title="Webhook notifications">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                     stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                     stroke-linejoin="round">
                    <path d="M8 1a5 5 0 0 1 5 5v2.5l1.5 2H1.5L3 8.5V6A5 5 0 0 1 8 1z"/>
                    <path d="M6 13a2 2 0 0 0 4 0"/>
                </svg>
            </button>
            <a class="top-bar-btn" href="https://cdknorow.github.io/coral/" target="_blank" rel="noopener" title="Documentation">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2 1.5h4.5a2 2 0 0 1 2 2v11a1.5 1.5 0 0 0-1.5-1.5H2z"/>
                    <path d="M14 1.5H9.5a2 2 0 0 0-2 2v11a1.5 1.5 0 0 1 1.5-1.5H14z"/>
                </svg>
            </a>
            <a class="top-bar-btn" href="https://github.com/cdknorow/coral" target="_blank" rel="noopener" title="GitHub">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                </svg>
            </a>
            <button class="top-bar-btn" onclick="showSettingsModal()" title="Settings">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="M6.7 1.4h2.6l.4 1.8.5.2 1.6-.9 1.8 1.8-.9 1.6.2.5 1.8.4v2.6l-1.8.4-.2.5.9 1.6-1.8 1.8-1.6-.9-.5.2-.4 1.8H6.7l-.4-1.8-.5-.2-1.6.9-1.8-1.8.9-1.6-.2-.5-1.8-.4V6.7l1.8-.4.2-.5-.9-1.6 1.8-1.8 1.6.9.5-.2z" />
                    <circle cx="8" cy="8" r="2.5" />
                </svg>
            </button>
        </div>
    </header>

    <div class="layout">
        {% include "includes/sidebar.html" %}
        <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>

        <!-- Main Content -->
        <main class="main-content">
            <div id="welcome-screen" class="welcome">
                <img src="/static/coral.png" alt="Coral" class="welcome-logo">
                <h2>Welcome to Coral</h2>
                <p>Select a session from the sidebar, or get started:</p>
                <div class="welcome-actions">
                    <button class="welcome-action-card" onclick="showLaunchModal()" aria-label="Launch Agent">
                        <span class="material-icons">add_circle</span>
                        <span>Launch Agent</span>
                    </button>
                    <button class="welcome-action-card" onclick="showJobModal()" aria-label="Create Job">
                        <span class="material-icons">schedule</span>
                        <span>Create Job</span>
                    </button>
                    <button class="welcome-action-card" onclick="showWebhookModal(); showWebhookCreate();" aria-label="Create Webhook">
                        <span class="material-icons">webhook</span>
                        <span>Create Webhook</span>
                    </button>
                    <button class="welcome-action-card" onclick="showThemeConfigurator()" aria-label="Customize Theme">
                        <span class="material-icons">palette</span>
                        <span>Customize Theme</span>
                    </button>
                    <button class="welcome-action-card" onclick="showSettingsModal()" aria-label="Settings">
                        <span class="material-icons">settings</span>
                        <span>Settings</span>
                    </button>
                    <a class="welcome-action-card" href="https://cdknorow.github.io/coral/" target="_blank" rel="noopener" aria-label="Documentation">
                        <span class="material-icons">menu_book</span>
                        <span>Documentation</span>
                    </a>
                </div>
            </div>

            {% include "includes/views/live_session.html" %}

            {% include "includes/views/history_session.html" %}

            <!-- Scheduler Job Detail View -->
            <div id="scheduler-view" style="display:none" class="scheduler-view">
                <div id="scheduler-detail"></div>
            </div>
        </main>
    </div>

    {% include "includes/modals.html" %}

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script type="module" src="/static/app.js"></script>
</body>

</html>