{% load static %}
<!DOCTYPE html>
<html lang="en" data-theme="dark">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{ app_label|default:"SciTeX App" }}</title>
        <link rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
        <!-- scitex-ui workspace shell CSS (canonical source) -->
        <link rel="stylesheet" href="{% static 'scitex_ui/css/shell/theme.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/app-shell.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/stx-shell-sidebar.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/workspace-three-col.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/workspace.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/panel-resizer.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/resizer.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/standalone-resizer-pos.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/11-shortcuts-modal.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/workspace-files-tree/index.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/repo-monitor.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/workspace-viewer.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/workspace-viewer-preview.css' %}" />
        <link rel="stylesheet"
              href="{% static 'scitex_ui/css/shell/media-viewer.css' %}" />
        {% block extra_css %}{% endblock %}
    </head>
    <body class="dark-theme workspace-page footer-collapsed no-transition">
        <!--
          Standalone shell: vanilla TS layout matching scitex-cloud's global_base.html.
          Structure: Console/Chat | Files | Viewer | App Content
          The vanilla TS WorkspacePanelResizer initializes from data attributes.
          App content (React or other) mounts into #app-content inside ws-module-pane.
        -->
        <div id="workspace-three-col" class="workspace-three-col">
            <!-- ── Console/Chat Pane ──────────────────── -->
            <div class="ws-ai-pane" id="ws-ai-pane">
                <div id="stx-shell-ai-panel"
                     class="stx-shell-sidebar stx-shell-ai-panel"
                     aria-hidden="false">
                    <div id="stx-shell-ai-resizer"
                         class="panel-resizer stx-shell-resizer-right"
                         data-panel-resizer
                         data-target="#stx-shell-ai-panel"
                         data-direction="left"
                         data-min-width="48"
                         data-default-width="300"
                         data-storage-key="ws-ai-panel-width"
                         data-collapse-key="stx-shell-ai-panel-collapsed"
                         data-toggle-btn="stx-shell-ai-toggle"></div>
                    <div class="stx-shell-sidebar__header stx-shell-ai-panel-header"
                         id="stx-shell-ai-panel-header">
                        <button class="panel-toggle-btn"
                                id="stx-shell-ai-toggle"
                                title="Toggle Console (Alt+A)">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        <span class="stx-shell-sidebar__title"
                              id="stx-shell-ai-collapsed-title"
                              title="Console">
                            <i class="fas fa-terminal"></i> Console
                        </span>
                        <div class="stx-shell-ai-mode-toggle">
                            <button class="stx-shell-ai-mode-btn active"
                                    data-mode="console"
                                    title="Terminal">
                                <i class="fas fa-terminal"></i> Console
                            </button>
                            <button class="stx-shell-ai-mode-btn" data-mode="chat" title="AI Chat">
                                <i class="fas fa-robot"></i> Chat
                            </button>
                        </div>
                        <button class="stx-shell-ai-input-btn stx-shell-shortcuts-btn"
                                id="stx-shell-shortcuts-btn"
                                title="Keyboard Shortcuts">
                            <i class="fas fa-keyboard"></i>
                        </button>
                    </div>
                    <div class="stx-shell-sidebar__content stx-shell-ai-body">
                        <!-- Chat view (matches scitex-cloud workspace_ai_pane.html) -->
                        <div id="stx-shell-ai-chat-view" class="stx-shell-ai-view">
                            <div class="stx-shell-ai-sessions-bar">
                                <button class="stx-shell-ai-new-chat" title="New chat">
                                    <i class="fas fa-plus"></i>
                                </button>
                                <div id="stx-shell-ai-sessions-list" class="stx-shell-ai-sessions-list"></div>
                                <div class="stx-shell-ai-panel-actions">
                                    <button class="stx-shell-ai-action-btn"
                                            id="stx-shell-ai-copy-chat"
                                            title="Copy chat">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                    <button class="stx-shell-ai-action-btn"
                                            id="stx-shell-ai-print-chat"
                                            title="Print chat">
                                        <i class="fas fa-print"></i>
                                    </button>
                                    <button class="stx-shell-ai-action-btn"
                                            id="stx-shell-ai-clear-chat"
                                            title="Clear chat">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="stx-shell-ai-messages" class="stx-shell-ai-messages">
                                <div class="stx-shell-ai-empty">
                                    <i class="fas fa-robot"></i>
                                    <span>Ask anything about SciTeX.</span>
                                    <span>I can take actions: stats, plots, literature, and your current work.</span>
                                </div>
                            </div>
                            <div class="stx-shell-ai-input-area">
                                <span id="stx-shell-ai-model-badge" class="stx-shell-ai-model-badge"></span>
                                <div id="stx-shell-ai-image-preview" class="stx-shell-ai-image-preview"></div>
                                <div class="stx-shell-ai-input-wrap">
                                    <textarea id="stx-shell-ai-input"
                                              class="stx-shell-ai-input"
                                              rows="1"
                                              placeholder="Ask anything"
                                              autocomplete="off"></textarea>
                                    <button id="stx-shell-ai-camera"
                                            class="stx-shell-ai-input-btn"
                                            title="Attach image">
                                        <i class="fas fa-camera"></i>
                                    </button>
                                    <button id="stx-shell-ai-sketch"
                                            class="stx-shell-ai-input-btn"
                                            title="Draw sketch">
                                        <i class="fas fa-pen"></i>
                                    </button>
                                    <input id="stx-shell-ai-file-input"
                                           type="file"
                                           accept="image/*"
                                           multiple
                                           hidden>
                                    <button id="stx-shell-ai-mic" class="stx-shell-ai-mic" title="Voice input">
                                        <i class="fas fa-microphone"></i>
                                    </button>
                                    <button id="stx-shell-ai-chat-gear"
                                            class="stx-shell-ai-input-btn stx-shell-ai-gear-btn"
                                            title="Chat settings">
                                        <i class="fas fa-cog"></i>
                                    </button>
                                </div>
                                <div class="stx-shell-ai-vol">
                                    <span class="stx-shell-ai-vol-bar" hidden></span>
                                    <span class="stx-shell-ai-vol-bar" hidden></span>
                                    <span class="stx-shell-ai-vol-bar" hidden></span>
                                    <span class="stx-shell-ai-vol-bar" hidden></span>
                                    <span class="stx-shell-ai-vol-bar" hidden></span>
                                </div>
                                <button id="stx-shell-ai-send" class="stx-shell-ai-send" hidden></button>
                                <!-- Chat config popover (inside input-area for positioning) -->
                                <div id="stx-shell-ai-chat-config"
                                     class="stx-shell-ai-config-popover stx-hidden">
                                    {% block chat_config %}{% endblock %}
                                </div>
                            </div>
                        </div>
                        <!-- Console/Terminal view -->
                        <div id="stx-shell-ai-console-view"
                             class="stx-shell-ai-view active"
                             data-view="console">
                            <div class="stx-shell-ai-console-tabs-bar">
                                <button class="stx-shell-ai-console-new-tab" title="New terminal">
                                    <i class="fas fa-plus"></i>
                                </button>
                                <div id="stx-shell-ai-console-tabs-list"
                                     class="stx-shell-ai-console-tabs-list">
                                    <div class="stx-shell-ai-console-tab-item active">
                                        <span class="stx-shell-ai-console-tab-title">T1</span>
                                    </div>
                                </div>
                            </div>
                            <div id="stx-shell-ai-console-terminal"
                                 class="stx-shell-ai-console-terminal"></div>
                            <div class="stx-shell-ai-console-toolbar stx-shell-toolbar-relative">
                                <span id="stx-shell-ai-console-status" class="stx-shell-ai-console-status"></span>
                                <div class="stx-shell-ai-console-toolbar-btns">
                                    <button class="stx-shell-ai-input-btn" title="Webcam">
                                        <i class="fas fa-camera"></i>
                                    </button>
                                    <button class="stx-shell-ai-input-btn" title="Sketch">
                                        <i class="fas fa-pen"></i>
                                    </button>
                                    <button class="stx-shell-ai-input-btn" title="Voice">
                                        <i class="fas fa-microphone"></i>
                                    </button>
                                    <button class="stx-shell-ai-input-btn stx-shell-ai-gear-btn" title="Settings">
                                        <i class="fas fa-cog"></i>
                                    </button>
                                </div>
                                <!-- Console config popover (inside toolbar for positioning) -->
                                <div id="stx-shell-ai-console-config"
                                     class="stx-shell-ai-config-popover stx-hidden">
                                    <div class="ai-settings-section" id="ai-auto-accept-config">
                                        <label class="scitex-ai-settings-label"
                                               title="When enabled, automatically accepts Claude Code permission prompts at the configured interval.">
                                            <i class="fas fa-robot"></i> Claude Code Auto-Accept Mode
                                        </label>
                                        <div class="ai-settings-row">
                                            <label class="scitex-ai-settings-label"
                                                   title="How often to check for and accept permission prompts">
                                                Interval
                                            </label>
                                            <select id="ai-auto-accept-interval"
                                                    class="ai-settings-select"
                                                    title="How often to check for and accept permission prompts">
                                                <option value="1000">1s (fast)</option>
                                                <option value="1500" selected>1.5s</option>
                                                <option value="2000">2s</option>
                                                <option value="3000">3s (slow)</option>
                                            </select>
                                        </div>
                                        <div class="ai-settings-row">
                                            <label class="scitex-ai-settings-label"
                                                   title="Controls which commands are auto-accepted">Safety</label>
                                            <select id="ai-auto-accept-safety"
                                                    class="ai-settings-select"
                                                    title="Controls which commands are auto-accepted">
                                                <option value="conservative" title="Only accept safe, read-only commands">Conservative (read-only)</option>
                                                <option value="normal"
                                                        selected
                                                        title="Accept most commands except destructive ones">
                                                    Normal (most commands)
                                                </option>
                                                <option value="aggressive" title="Accept all commands — use with caution">Aggressive (all commands)</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="ai-settings-section" id="ai-auto-response-config">
                                        <label class="scitex-ai-settings-label"
                                               title="Commands sent automatically for each Claude state">
                                            <i class="fas fa-reply"></i> Auto-Response Commands
                                        </label>
                                        <div class="ai-settings-row">
                                            <label class="scitex-ai-settings-label"
                                                   title="Command sent when Claude is thinking or idle">Waiting</label>
                                            <input id="ai-auto-response-waiting"
                                                   class="ai-settings-input"
                                                   type="text"
                                                   placeholder="/speak-signature"
                                                   title="Command sent when Claude is thinking or idle" />
                                        </div>
                                        <div class="ai-settings-row">
                                            <label class="scitex-ai-settings-label"
                                                   title="Response for Y/N permission prompts">Y/N</label>
                                            <select id="ai-auto-response-yn"
                                                    class="ai-settings-select"
                                                    title="Response for Y/N permission prompts">
                                                <option value="1">1 (Allow)</option>
                                                <option value="2">2 (Deny)</option>
                                            </select>
                                        </div>
                                        <div class="ai-settings-row">
                                            <label class="scitex-ai-settings-label"
                                                   title="Response for Y/Y/N permission prompts">Y/Y/N</label>
                                            <select id="ai-auto-response-yyn"
                                                    class="ai-settings-select"
                                                    title="Response for Y/Y/N permission prompts">
                                                <option value="1">1 (Allow once)</option>
                                                <option value="2" selected>2 (Allow always)</option>
                                                <option value="3">3 (Deny)</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="ai-settings-section" id="ai-agent-sources">
                                        <label class="scitex-ai-settings-label">
                                            <i class="fas fa-sitemap"></i> App Skills
                                        </label>
                                        <div id="ai-agent-sources-content" class="ai-agent-sources">
                                            {% block config_agent_sources %}<div class="ai-source-loading">Loading...</div>{% endblock %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Jobs section (collapsible, inside console view) -->
                            {% block console_jobs %}{% endblock %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- ── File Tree Pane ─────────────────────── -->
            <div class="ws-worktree-pane" id="ws-worktree-pane">
                <div class="stx-shell-sidebar" id="ws-worktree-sidebar">
                    <div id="ws-worktree-resizer"
                         class="panel-resizer stx-shell-resizer-right"
                         data-panel-resizer
                         data-target="#ws-worktree-sidebar"
                         data-direction="left"
                         data-min-width="48"
                         data-default-width="240"
                         data-storage-key="ws-worktree-width"
                         data-collapse-key="ws-worktree-collapsed"
                         data-toggle-btn="ws-worktree-toggle"></div>
                    <div class="stx-shell-sidebar__header">
                        <button class="panel-toggle-btn"
                                id="ws-worktree-toggle"
                                title="Toggle file tree">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        <span class="stx-shell-sidebar__title" title="Files"><i class="fas fa-folder"></i> Files</span>
                        <span class="stx-shell-sidebar__title-full">
                            <i class="fas fa-folder-open"></i>
                            {% block worktree_title_full %}Files{% endblock %}
                        </span>
                        <div class="stx-shell-sidebar__header-actions ws-worktree-actions">
                            {% block worktree_actions %}
                                <button class="stx-shell-ai-action-btn"
                                        title="Keyboard Shortcuts"
                                        onclick="window.showShortcutsModal && window.showShortcutsModal()">
                                    <i class="fas fa-keyboard"></i>
                                </button>
                            {% endblock %}
                        </div>
                    </div>
                    <div class="stx-shell-sidebar__content ws-worktree-split">
                        <div class="ws-worktree-tree-area">
                            {% block worktree_preseed %}{% endblock %}
                            <div id="ws-worktree-tree"
                                 data-workspace-tree
                                 {% block worktree_data_attrs %}{% endblock %}></div>
                        </div>
                        <!-- Vertical resizer: tree / repo monitor split -->
                        <div class="v-resizer"
                             id="repo-monitor-resizer"
                             data-v-resizer
                             data-in-app
                             data-top=".ws-worktree-tree-area"
                             data-bottom=".ws-repo-monitor-area"
                             data-most-bottom
                             data-threshold="48"
                             data-storage-key="ws-repo-monitor-split"></div>
                        <!-- Repository Monitor -->
                        <div class="ws-repo-monitor-area collapsed"
                             id="ws-repo-monitor"
                             {% block repo_monitor_data_attrs %}{% endblock %}>
                            <div class="repo-monitor-header" id="repo-monitor-header">
                                <i class="fas fa-clock-rotate-left"></i>
                                <span>Recent</span>
                                <span class="repo-monitor-status" id="repo-monitor-status"></span>
                                <span class="repo-monitor-toolbar">
                                    <button id="repo-monitor-config-toggle"
                                            class="rm-toolbar-btn"
                                            title="Filter settings">
                                        <i class="fas fa-gear"></i>
                                    </button>
                                    <button id="repo-monitor-pause-toggle"
                                            class="rm-toolbar-btn"
                                            title="Pause/resume monitor">
                                        <i class="fas fa-pause"></i>
                                    </button>
                                    <button id="repo-monitor-clear" class="rm-toolbar-btn" title="Clear feed">
                                        <i class="fas fa-trash-can"></i>
                                    </button>
                                </span>
                            </div>
                            <div class="repo-monitor-content" id="repo-monitor-feed"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ── Viewer Pane ────────────────────────── -->
            <div class="ws-viewer-pane" id="ws-viewer-pane">
                <div class="stx-shell-sidebar collapsed"
                     id="ws-viewer-sidebar"
                     data-ai-hint="General Editor Pane: shared file viewer across all modules (Writer, Scholar, Console, etc.). Supports text (.py .js .ts .html .css .json .md .yaml .sh .tex .bib .txt), images (.png .jpg .gif .webp .svg), PDF (.pdf), tables (.csv .tsv), diagrams (.mmd .mermaid), audio (.mp3 .wav .ogg .flac), video (.mp4 .webm .avi .mov). Open files via ui_action(steps=[{action:'open-file', path:'relative/path'}]). The currently open file path is tracked in data-ai-viewer-active on this element."
                     data-ai-viewer-active="">
                    <div id="ws-viewer-resizer"
                         class="panel-resizer"
                         data-panel-resizer
                         data-target="#ws-viewer-sidebar"
                         data-direction="left"
                         data-min-width="48"
                         data-default-width="480"
                         data-storage-key="ws-viewer-width"
                         data-collapse-key="ws-viewer-collapsed"
                         data-toggle-btn="ws-viewer-toggle"></div>
                    <div class="stx-shell-sidebar__header">
                        <button class="panel-toggle-btn" id="ws-viewer-toggle" title="Toggle viewer">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        <span id="ws-viewer-title-short"
                              class="stx-shell-sidebar__title"
                              title="Viewer"><i class="fas fa-eye"></i> Viewer</span>
                        <span id="ws-viewer-mode-toggle"
                              class="stx-shell-sidebar__title-full ws-viewer-mode-toggle-title"
                              title="Switch to Editor"><i class="fas fa-eye"></i> Viewer</span>
                        <div class="stx-shell-sidebar__header-actions ws-viewer-header-actions">
                            <div id="ws-viewer-tabs" class="ws-viewer-tabs"></div>
                            <button class="ws-viewer-formats-info-btn"
                                    data-tooltip="Supported formats:&#10;Text: .py .js .ts .html .css .json .md .yaml .sh .tex .bib .txt&#10;Image: .png .jpg .jpeg .gif .webp .svg .bmp .ico&#10;PDF: .pdf&#10;Table: .csv .tsv&#10;Diagram: .mmd .mermaid .dot .gv&#10;Audio: .mp3 .wav .ogg .flac .m4a .aac .wma&#10;Video: .mp4 .webm .avi .mov .mkv .ogv"
                                    title="">
                                <i class="fas fa-info-circle"></i>
                            </button>
                            <button id="ws-viewer-shortcuts-btn"
                                    class="ws-viewer-shortcuts-btn"
                                    title="Keyboard shortcuts (Alt+/)">
                                <i class="fas fa-keyboard"></i>
                            </button>
                        </div>
                    </div>
                    <div class="stx-shell-sidebar__content ws-viewer-body">
                        <div id="ws-viewer-content" class="ws-viewer-content">
                            <div id="ws-viewer-monaco" class="ws-viewer-monaco"></div>
                            <div id="ws-viewer-preview" class="ws-viewer-preview"></div>
                            <div id="ws-viewer-media" class="ws-viewer-media"></div>
                            <div id="ws-viewer-empty" class="ws-viewer-empty">
                                <i class="fas fa-file-alt"></i>
                                <span>Click a file to open</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ── App Content (React or other app mounts here) ── -->
            <main id="main-content" class="ws-module-pane">
                {% block app_content %}
                    <div id="root"
                         data-working-dir="{{ working_dir|default:'' }}"
                         data-app-name="{{ app_name|default:'app' }}"></div>
                {% endblock %}
            </main>
        </div>
        <!-- scitex-ui vanilla shell initialization -->
        <script src="{% static 'scitex_ui/js/shell/standalone-shell-init.js' %}"
                defer></script>
        {% block extra_js %}{% endblock %}
    </body>
</html>
