<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>VibeDeck</title>
    <style>{{ css|safe }}</style>
    <!-- Highlight.js for syntax highlighting in file preview -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
</head>
<body>
    <div class="status-bar" id="status-bar">
        <div class="status-indicator">
            <button class="hamburger-btn" id="hamburger-btn" title="Toggle sidebar">&#9776;</button>
            <span class="status-dot"></span>
            <span id="status-text">Connecting...</span>
        </div>
        <div class="session-title-bar" id="session-title-bar"></div>
        <button class="right-sidebar-toggle" id="right-sidebar-toggle" title="Toggle file tree"><div class="folder-icon"></div></button>
        <button class="terminal-toggle-btn" id="terminal-toggle-btn" title="Toggle terminal"><div class="terminal-icon"></div></button>
        <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode">&#9790;</button>
    </div>

    <!-- Sidebar -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <input type="text" id="sidebar-search" placeholder="Search sessions..." class="sidebar-search">
            <div class="sidebar-controls">
                <label class="auto-switch" id="auto-switch-label">
                    <input type="checkbox" id="auto-switch" checked>
                    <span>Auto-switch</span>
                </label>
                <label class="auto-switch" id="status-colors-label">
                    <input type="checkbox" id="status-colors" checked>
                    <span>Colors</span>
                </label>
                <label class="auto-switch" id="hide-tools-label" title="Hide tool calls and results">
                    <input type="checkbox" id="hide-tools">
                    <span>Hide tools</span>
                </label>
                <button class="new-session-btn" id="new-session-btn" title="New session in custom directory">+ New</button>
            </div>
            <div class="sidebar-sort-row">
                <label class="sort-label">
                    <span>Group:</span>
                    <select class="sort-select" id="group-by-select">
                        <option value="session">Session</option>
                        <option value="project">Project</option>
                    </select>
                </label>
                <label class="sort-label">
                    <span>Order:</span>
                    <select class="sort-select" id="order-by-select">
                        <option value="created">Created</option>
                        <option value="modified">Modified</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="project-list" id="project-list"></div>
        <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
    </div>

    <!-- Main content -->
    <div class="main-content" id="main-content">
        <div class="container">
            <div class="project-header-bar">
                <h1 id="project-title">VibeDeck</h1>
                <button class="copy-icon-btn" id="copy-path-btn" title="Copy project path" style="display: none;"></button>
            </div>
            <div class="session-id-bar" id="session-id-bar" style="display: none;">
                <span class="session-id-label">Session:</span>
                <code class="session-id-value" id="session-id-value"></code>
                <button class="copy-icon-btn copy-icon-btn-small" id="copy-session-btn" title="Copy session ID"></button>
            </div>
            <div id="sessions"></div>
        </div>
    </div>

    <!-- Preview Pane -->
    <div class="preview-pane" id="preview-pane">
        <div class="preview-body">
            <!-- File view row: tree sidebar + file preview -->
            <div class="file-view-row">
                <!-- Left: Tree -->
                <div class="file-tree-sidebar">
                    <div class="file-tree-header">
                        <span class="tree-header-title">Files</span>
                        <button class="tree-toggle-btn" id="tree-collapse-btn" title="Collapse Tree">
                            <div class="hamburger-icon"><span></span></div>
                        </button>
                    </div>
                    <div class="file-tree-content" id="file-tree-content"></div>
                </div>

                <!-- Resize Handle -->
                <div class="tree-resize-handle" id="tree-resize-handle"></div>

                <!-- Right: Content -->
                <div class="preview-main-area">
                    <!-- Header (Scoped to File View) -->
                    <div class="preview-header">
                        <button class="tree-expand-btn" id="tree-expand-btn" title="Expand Tree">
                            <div class="folder-icon"></div>
                        </button>

                        <div class="preview-title">
                            <span class="preview-filename" id="preview-filename">File Browser</span>
                            <span class="preview-path" id="preview-path"></span>
                        </div>
                        <div class="preview-actions">
                            <label class="preview-view-toggle" id="preview-view-toggle" style="display: none;" title="Toggle between rendered and source view">
                                <input type="checkbox" id="preview-view-checkbox" checked>
                                <span class="toggle-label">Rendered</span>
                            </label>
                            <label class="preview-follow-toggle" id="preview-follow-toggle" style="display: none;" title="Auto-scroll to bottom on new content">
                                <input type="checkbox" id="preview-follow-checkbox" checked>
                                <span>Follow</span>
                            </label>
                            <button class="preview-copy-btn" id="preview-copy-btn" title="Copy file path" style="display: none;">Copy Path</button>
                            <button class="preview-close-btn" id="preview-close-btn" title="Close preview">&times;</button>
                        </div>
                    </div>

                    <div class="preview-content" id="preview-content">
                        <div class="pending-session-placeholder" style="padding-top: 100px;">
                            <p>Select a file to view</p>
                        </div>
                    </div>
                    <div class="preview-status" id="preview-status"></div>
                </div>
            </div>

            <!-- Terminal resize handle + panel (full width, below file view row) -->
            <div class="terminal-resize-handle" id="terminal-resize-handle"></div>
            <div class="terminal-panel" id="terminal-panel">
                <div class="terminal-container" id="terminal-container"></div>
            </div>
        </div>
        
        <div class="preview-resize-handle" id="preview-resize-handle"></div>
    </div>

    <!-- Input bar -->
    <div class="input-bar hidden" id="input-bar">
        <div class="input-bar-left">
            <textarea
                id="message-input"
                class="input-textarea"
                placeholder="Send a message... (Shift+Enter for newline)"
                rows="1"
            ></textarea>
            <div class="input-meta-row">
                <div class="input-status" id="input-status"></div>
                <div class="context-indicator" id="context-indicator" style="display: none;"></div>
            </div>
        </div>
        <div class="input-bar-buttons">
            <button class="send-btn" id="send-btn">
                <span>Send</span>
            </button>
            <button class="fork-btn hidden" id="fork-btn" title="Fork: create new session with conversation history">
                <span>Fork</span>
            </button>
            <button class="interrupt-btn hidden" id="interrupt-btn">
                <span>Stop</span>
            </button>
        </div>
    </div>

    <!-- Session tooltip (hidden, shown on hover) -->
    <div class="session-tooltip" id="session-tooltip" style="display: none;"></div>

    <!-- Message tooltip for token usage (hidden, shown on hover) -->
    <div class="message-tooltip" id="message-tooltip"></div>

    <!-- Flash message -->
    <div class="flash-message" id="flash-message"></div>

    <!-- New Session Modal -->
    <dialog id="new-session-modal" class="new-session-modal">
        <div class="modal-header">
            <h2>New Session</h2>
            <button class="modal-close-btn" id="modal-close-btn" type="button">&times;</button>
        </div>
        <form id="new-session-form" method="dialog">
            <div class="modal-field">
                <label for="modal-cwd">Working Directory</label>
                <input type="text" id="modal-cwd" class="modal-input" placeholder="/path/to/project" autocomplete="off">
            </div>
            <div class="modal-field">
                <label for="modal-backend">Backend</label>
                <select id="modal-backend" class="modal-select">
                    <option value="">Loading...</option>
                </select>
            </div>
            <div class="modal-field" id="modal-model-field" style="display: none;">
                <label for="modal-model">Model</label>
                <div class="model-select-wrapper">
                    <input type="text" id="modal-model-search" class="modal-input model-search" placeholder="Search models...">
                    <select id="modal-model" class="modal-select">
                    </select>
                </div>
            </div>
            <div class="modal-buttons">
                <button type="button" class="modal-btn modal-btn-cancel" id="modal-cancel-btn">Cancel</button>
                <button type="submit" class="modal-btn modal-btn-create">Create Session</button>
            </div>
        </form>
    </dialog>

    <!-- Permission Modal -->
    <dialog id="permission-modal" class="permission-modal">
        <div class="modal-header">
            <h2>Permission Required</h2>
        </div>
        <div class="permission-content">
            <p class="permission-intro">Claude wants to perform the following operations:</p>
            <div id="permission-denials-list" class="denials-list"></div>
        </div>
        <div class="modal-buttons">
            <button type="button" class="modal-btn modal-btn-reject" id="permission-reject-btn">Reject</button>
            <button type="button" class="modal-btn modal-btn-grant" id="permission-grant-btn">Grant</button>
        </div>
    </dialog>

    <!-- Floating artifacts panel -->
    <div class="artifacts-float" id="artifacts-float">
        <div class="artifacts-header" id="artifacts-toggle">
            <span class="artifacts-label">Artifacts</span>
            <span class="artifacts-badge" id="artifacts-badge"></span>
            <button class="artifacts-expand-btn" id="artifacts-expand-btn" title="Expand/collapse">▼</button>
        </div>
        <div class="artifacts-body" id="artifacts-body">
            <div class="artifacts-list" id="artifacts-list"></div>
        </div>
    </div>

    <!-- Floating controls -->
    <div class="floating-controls" id="floating-controls">
        <button class="scroll-btn scroll-btn-end" id="scroll-top-btn" title="Scroll to top">⤒</button>
        <button class="scroll-btn" id="prev-user-btn" title="Previous user message">↑</button>
        <label class="auto-scroll-float" id="auto-scroll-float">
            <input type="checkbox" id="auto-scroll-checkbox" checked>
            <span>Follow</span>
        </label>
        <button class="scroll-btn" id="next-user-btn" title="Next user message">↓</button>
        <button class="scroll-btn scroll-btn-end" id="scroll-bottom-btn" title="Scroll to bottom">⤓</button>
    </div>

    <!-- Load application JavaScript as ES module -->
    <script type="module" src="static/js/app.js"></script>
</body>
</html>
