{% extends "hub/base.html" %}
{% load static %}
{% block title %}{{ workspace.name }} - SciTeX Orochi{% endblock %}
{% block extra_css %}
    <meta name="theme-color" content="#4ecdc4">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"
          content="black-translucent">
    <link rel="manifest" href="{% static 'hub/manifest.json' %}">
    <link rel="apple-touch-icon" href="{% static 'hub/orochi-icon.png' %}">
    <link rel="stylesheet" href="{% static 'hub/style.css' %}?v=130">
    <link rel="stylesheet" href="{% static 'hub/components.css' %}?v=104">
    <link rel="stylesheet" href="{% static 'hub/todo-tab.css' %}?v=106">
    <link rel="stylesheet" href="{% static 'hub/attachments.css' %}?v=100">
    <link rel="stylesheet" href="{% static 'hub/responsive.css' %}?v=99">
    <link rel="stylesheet" href="{% static 'hub/push.css' %}?v=99">
    <link rel="stylesheet" href="{% static 'hub/resources.css' %}?v=100">
    <link rel="stylesheet" href="{% static 'hub/icons.css' %}?v=99">
    <link rel="stylesheet" href="{% static 'hub/settings.css' %}?v=104">
    <link rel="stylesheet" href="{% static 'hub/connectivity-map.css' %}?v=100">
    <link rel="stylesheet" href="{% static 'hub/activity-tab.css' %}?v=156">
    <link rel="stylesheet" href="{% static 'hub/files-tab.css' %}?v=104">
    <link rel="stylesheet" href="{% static 'hub/releases-tab.css' %}?v=100">
    <link rel="stylesheet" href="{% static 'hub/reactions.css' %}?v=115">
    <link rel="stylesheet" href="{% static 'hub/threads.css' %}?v=121">
    <link rel="stylesheet" href="{% static 'hub/element-inspector.css' %}?v=1">
    <link rel="stylesheet" href="{% static 'hub/search-palette.css' %}?v=1">
    <link rel="stylesheet" href="{% static 'hub/effects.css' %}?v=1">
    <!-- highlight.js — syntax highlighting for code blocks -->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
{% endblock %}
{% block body_class %}page-app{% endblock %}
<!-- hook-bypass: inline-style -->
{% block body %}
    <div class="container">
        <button id="sidebar-toggle"
                class="sidebar-toggle"
                aria-label="Toggle sidebar">&#9776;</button>
        <div class="sidebar" id="sidebar">
            <div class="sidebar-brand">
                <div class="brand-logo" id="brand-logo"></div>
                <div class="brand-info">
                    <h2 class="workspace-title brand-product-name">
                        SciTeX Orochi <span class="brand-version" id="orochi-version"></span>
                    </h2>
                    <div class="workspace-selector" id="workspace-selector">
                        <span class="ws-icon" id="ws-icon-slot"></span>
                        <span class="ws-name">{{ workspace.name }}</span>
                        <span class="ws-caret">&#9662;</span>
                    </div>
                </div>
                <span id="conn-status" class="status conn-down" title="connecting"></span>
            </div>
            <div id="wall-clock" class="wall-clock"></div>
            <div class="filter-bar" style="position:relative">
                <input type="text"
                       id="filter-input"
                       placeholder="Ctrl+K — fuzzy search (space = AND)"
                       autocomplete="off">
                <div id="filter-suggest" class="filter-suggest"></div>
                <div id="filter-tags" class="filter-tags"></div>
            </div>
            <div class="sidebar-sections">
                <h2 class="collapsible-heading channels-heading blockers-heading"
                    data-section="blockers">
                    <span class="blocker-flag">⚠</span> Blockers
                    <span class="sidebar-count blockers-count" id="sidebar-count-blockers"></span>
                </h2>
                <div id="blockers" class="sidebar-section blockers-section">
                    <p class="blockers-empty">No blockers</p>
                </div>
                <h2 class="collapsible-heading channels-heading" data-section="agents">
                    Agents <span class="sidebar-count" id="sidebar-count-agents"></span>
                </h2>
                <div id="agents" class="sidebar-section">
                    <p id="no-agents">No agents connected</p>
                </div>
                <h2 class="collapsible-heading channels-heading" data-section="channels">
                    Channels <span class="sidebar-count" id="sidebar-count-channels"></span>
                </h2>
                <div id="channels" class="sidebar-section"></div>
                <h2 class="collapsible-heading channels-heading dm-heading"
                    data-section="dms">
                    Direct messages <span class="sidebar-count" id="sidebar-count-dms"></span>
                    <button type="button"
                            id="new-dm-btn"
                            class="new-dm-btn"
                            title="Start a new DM">+</button>
                </h2>
                <div id="dms" class="sidebar-section"></div>
                <h2 class="collapsible-heading channels-heading" data-section="machines">
                    Machines <span class="sidebar-count" id="sidebar-count-machines"></span>
                </h2>
                <div id="resources" class="sidebar-section"></div>
            </div>
            <div class="sidebar-signout">
                <button type="button"
                        id="my-avatar-btn"
                        class="my-avatar-btn"
                        title="Click: upload avatar image — Shift+click: set emoji/colour"
                        onclick="if(event.shiftKey){openHumanAvatarTextEditor();}else{openHumanAvatarPicker();}">
                </button>
                <a href="/signout/" class="signout-link">Sign out</a>
            </div>
        </div>
        <div class="main">
            <div class="tab-bar">
                <button class="tab-btn active" data-tab="chat">Chat</button>
                <button class="tab-btn" data-tab="todo">TODO</button>
                <button class="tab-btn" data-tab="activity">Agents</button>
                <button class="tab-btn" data-tab="resources">Machines</button>
                <button class="tab-btn" data-tab="files">Files</button>
                <button class="tab-btn" data-tab="releases">Releases</button>
                {% if is_admin %}<button class="tab-btn" data-tab="settings">Settings</button>{% endif %}
            </div>
            <div id="channel-topic-banner"
                 class="channel-topic-banner"
                 style="display:none">
                <!-- hook-bypass: inline-style -->
                <button type="button"
                        class="channel-topic-edit-btn"
                        title="Edit channel topic"
                        onclick="openChannelTopicEdit()">&#9998;</button>
                <span id="channel-topic-text"></span>
                <div id="channel-members" class="channel-members" style="display:none"></div>
                <button type="button"
                        class="channel-members-btn"
                        id="channel-members-btn"
                        title="Show channel members"
                        onclick="toggleMembersPanel()"
                        style="display:none">
                    &#128100; <span id="channel-members-count">0</span>
                </button>
                <button type="button"
                        class="channel-export-btn"
                        title="Export channel"
                        onclick="openChannelExport()">&#10515;</button>
            </div>
            <!-- Channel members panel (todo#407) -->
            <div id="channel-members-panel"
                 class="ch-members-panel"
                 style="display:none">
                <div class="ch-members-panel-header">
                    <span id="ch-members-panel-title">Members</span>
                    <button type="button"
                            class="ch-members-close-btn"
                            onclick="closeMembersPanel()">&#10005;</button>
                </div>
                <div id="ch-members-list" class="ch-members-list"></div>
            </div>
            <input id="chat-filter-input"
                   class="chat-filter-input"
                   placeholder="filter messages in this channel&hellip;"
                   autocomplete="off"
                   oninput="chatFilterApply(this.value)">
            <div id="messages" class="messages"></div>
            <!-- hook-bypass: inline-style -->
            <div id="todo-view" class="todo-view" style="display:none">
                <div id="todo-stats" class="todo-stats"></div>
                <div class="todo-state-filter">
                    <div class="todo-view-switch" role="tablist" aria-label="todo view mode">
                        <button type="button"
                                class="todo-view-switch-btn"
                                data-view="viz"
                                title="velocity / dependency visualization">Viz</button>
                        <button type="button"
                                class="todo-view-switch-btn active"
                                data-view="list"
                                title="grouped list">List</button>
                    </div>
                    <button type="button" class="todo-state-btn active" data-group="all">All</button>
                    <button type="button" class="todo-state-btn" data-group="high-priority">High</button>
                    <button type="button" class="todo-state-btn" data-group="medium-priority">Medium</button>
                    <button type="button" class="todo-state-btn" data-group="low-priority">Low</button>
                    <button type="button" class="todo-state-btn" data-group="future">Future</button>
                    <button type="button" class="todo-state-btn" data-group="blocker">Blocker</button>
                    <button type="button" class="todo-state-btn" data-group="closed">Closed</button>
                    <span id="todo-last-updated"
                          class="todo-last-updated"
                          title="Last fetched from GitHub"></span>
                </div>
                <div id="todo-grid" class="todo-grid"></div>
                <div id="viz-content" class="viz-content todo-viz-hidden"></div>
            </div>
            <div id="agents-tab-view" class="todo-view" style="display:none">
                <div id="agents-grid" class="todo-grid"></div>
            </div>
            <div id="resources-view" class="todo-view" style="display:none">
                <!-- hook-bypass: inline-style -->
                <div id="machines-subtabs" class="machines-subtabs">
                    <div class="machines-view-switch"
                         role="tablist"
                         aria-label="machines view mode">
                        <button type="button"
                                class="machines-view-switch-btn"
                                data-view="viz"
                                title="connectivity map (SSH mesh)">Viz</button>
                        <button type="button"
                                class="machines-view-switch-btn active"
                                data-view="cards"
                                title="resource cards grid">Cards</button>
                    </div>
                </div>
                <div id="connectivity-map"
                     class="connectivity-section"
                     style="display:none"></div>
                <div id="resources-grid" class="todo-grid"></div>
            </div>
            <div id="workspaces-view" class="todo-view" style="display:none">
                <div id="workspaces-grid" class="todo-grid"></div>
            </div>
            <div id="activity-view" class="todo-view" style="display:none">
                <!-- hook-bypass: inline-style -->
                <div id="activity-subtabs" class="activity-subtabs">
                    <div class="activity-view-switch"
                         role="tablist"
                         aria-label="overview view mode">
                        <button type="button"
                                class="activity-view-switch-btn"
                                data-view="topology"
                                title="topology (agents ↔ channels map)">Viz</button>
                        <button type="button"
                                class="activity-view-switch-btn active"
                                data-view="list"
                                title="one-line rows">List</button>
                    </div>
                    <select id="activity-sort-select"
                            class="activity-sort-select"
                            title="sort order">
                        <option value="name">sort: name</option>
                        <option value="machine">sort: machine</option>
                    </select>
                    <select id="activity-color-select"
                            class="activity-sort-select"
                            title="name color keyed by">
                        <option value="name">color: name</option>
                        <option value="host">color: host</option>
                        <option value="account">color: account</option>
                    </select>
                    <span class="activity-summary activity-summary-inline"
                          id="activity-summary"></span>
                </div>
                <div id="activity-grid" class="activity-grid"></div>
            </div>
            <div id="releases-view" class="todo-view" style="display:none">
                <!-- hook-bypass: inline-style -->
                <div class="releases-subtabs" id="releases-subtabs"></div>
                <div id="releases-content" class="releases-content"></div>
            </div>
            <!-- hook-bypass: inline-style -->
            <div id="files-view" class="todo-view files-view" style="display:none">
                <!-- File-type category tabs (All / Images / Videos / ...)
                     removed per ywatanabe msg 2026-04-18 17:12 — the
                     sidebar Ctrl+K fuzzy filter covers the same use case
                     without the extra UI row. Controls are left-aligned. -->
                <div class="files-toolbar files-toolbar-left-aligned">
                    <div class="files-view-group" role="tablist" aria-label="View mode">
                        <button class="files-view-btn active"
                                id="files-view-grid"
                                title="Icons"
                                onclick="filesSetView('grid')">&#9641;</button>
                        <button class="files-view-btn"
                                id="files-view-tiles"
                                title="Tiles"
                                onclick="filesSetView('tiles')">&#9783;</button>
                        <button class="files-view-btn"
                                id="files-view-list"
                                title="List"
                                onclick="filesSetView('list')">&#9776;</button>
                        <button class="files-view-btn"
                                id="files-view-details"
                                title="Details"
                                onclick="filesSetView('details')">&#8801;</button>
                    </div>
                    <div class="files-search-wrap">
                        <span class="files-search-icon">&#128269;</span>
                        <input type="search"
                               id="files-search"
                               class="files-search-input"
                               placeholder="Fuzzy filter (space = AND)"
                               oninput="filesSetQuery(this.value)"
                               autocomplete="off">
                    </div>
                    <button class="files-view-btn"
                            id="files-view-preview"
                            title="Preview pane"
                            onclick="filesTogglePreview()">&#9635;</button>
                </div>
                <div id="files-body" class="files-body">
                    <div id="files-grid" class="files-grid"></div>
                    <aside id="files-preview-pane"
                           class="files-preview-pane files-preview-hidden">
                        <!-- hook-bypass: inline-style -->
                        <div class="files-preview-empty">No file selected</div>
                    </aside>
                </div>
            </div>
            <!-- Image lightbox viewer -->
            <div id="img-viewer-overlay"
                 class="img-viewer-overlay"
                 style="display:none"
                 onclick="closeImgViewer()">
                <button class="img-viewer-close"
                        onclick="closeImgViewer()"
                        aria-label="Close">&#x2715;</button>
                <button class="img-viewer-prev"
                        id="img-viewer-prev"
                        onclick="event.stopPropagation();imgViewerNav(-1)"
                        aria-label="Previous">&#10094;</button>
                <img id="img-viewer-img"
                     class="img-viewer-img"
                     src=""
                     alt=""
                     onclick="event.stopPropagation()">
                <button class="img-viewer-next"
                        id="img-viewer-next"
                        onclick="event.stopPropagation();imgViewerNav(1)"
                        aria-label="Next">&#10095;</button>
                <div id="img-viewer-caption" class="img-viewer-caption"></div>
            </div>
            {% if is_admin %}
                <div id="settings-view" class="todo-view" style="display:none">
                    <div id="settings-content" class="settings-tab-content">
                        <p class="empty-notice">Loading settings...</p>
                    </div>
                </div>
            {% endif %}
            <button id="feed-scroll-top"
                    class="feed-scroll-btn"
                    title="Jump to top"
                    aria-label="Scroll to top">&#8679;</button>
            <button id="feed-scroll-bottom"
                    class="feed-scroll-btn"
                    title="Jump to bottom"
                    aria-label="Scroll to bottom">&#8681;</button>
            <div class="input-bar">
                <div id="composer-target" class="composer-target">
                    &#8594; <span id="composer-target-name">#general</span>
                </div>
                <div id="mention-dropdown" class="mention-dropdown"></div>
                <div class="input-bar-row">
                    <textarea id="msg-input"
                              placeholder="Type a message..."
                              autocomplete="off"
                              rows="3"></textarea>
                    <input type="file" id="file-input" style="display:none">
                    <input type="file"
                           id="webcam-capture-input"
                           accept="image/*"
                           capture="environment"
                           style="display:none">
                    <div class="input-bar-actions">
                        <button id="msg-attach"
                                type="button"
                                title="Attach file"
                                aria-label="Attach file">📎</button>
                        <button id="msg-webcam"
                                type="button"
                                title="Take photo"
                                aria-label="Take photo">📷</button>
                        <button id="msg-sketch"
                                type="button"
                                title="Draw sketch"
                                aria-label="Draw sketch">✏️</button>
                        <span class="voice-split">
                            <button id="msg-voice"
                                    class="voice-btn-hidden voice-split-mic"
                                    type="button"
                                    tabindex="-1"
                                    title="Voice input"
                                    aria-label="Voice input">🎤</button>
                            <button id="msg-voice-lang"
                                    class="voice-btn-hidden voice-split-lang"
                                    type="button"
                                    tabindex="-1"
                                    title="Voice language"
                                    aria-label="Voice language">EN</button>
                        </span>
                        <button id="msg-send" type="button" title="Send message">Send</button>
                    </div>
                </div>
            </div>
            <div class="stats-bar"></div>
        </div>
    </div>
    <div id="new-dm-modal"
         class="dm-modal"
         hidden
         role="dialog"
         aria-modal="true"
         aria-label="New direct message">
        <div class="dm-modal-backdrop"></div>
        <div class="dm-modal-card">
            <div class="dm-modal-header">
                <span>New direct message</span>
                <button type="button"
                        id="new-dm-close"
                        class="dm-modal-close"
                        aria-label="Close">&times;</button>
            </div>
            <input type="text"
                   id="new-dm-search"
                   placeholder="Search agents and people…"
                   autocomplete="off">
            <div id="new-dm-results" class="dm-modal-results"></div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <!-- hook-bypass: inline-script — Django template vars must be injected server-side -->
    <script>
      window.__orochiWorkspace = "{{ workspace.name|escapejs }}";
      window.__orochiDashboardToken = "{{ dashboard_token|escapejs }}";
      window.__orochiWsUrl = "wss://{{ request.get_host }}/ws/dashboard/"
        + (window.__orochiDashboardToken ? "?token=" + window.__orochiDashboardToken : "");
      window.__orochiCsrfToken = "{{ csrf_token }}";
      /* Django auth -- user is already authenticated, use username as display name */
      window.__orochiUserName = "{{ request.user.username|escapejs }}";
      window.__orochiWorkspaceName = "{{ workspace.name|escapejs }}";
      window.__orochiWorkspaceIcon = "{{ workspace.icon|escapejs }}";
    </script>
    <script src="{% static 'hub/config.js' %}?v=117"></script>
    <script src="{% static 'hub/agent-icons.js' %}?v=100"></script>
    <script src="{% static 'hub/app.js' %}?v=144"></script>
    <script src="{% static 'hub/dms.js' %}?v=4"></script>
    <script src="{% static 'hub/workspace-dropdown.js' %}?v=99"></script>
    <script src="{% static 'hub/resources-tab.js' %}?v=102"></script>
    <script src="{% static 'hub/todo-tab.js' %}?v=108"></script>
    <script src="{% static 'hub/workspaces-tab.js' %}?v=99"></script>
    <script src="{% static 'hub/chat.js' %}?v=122"></script>
    <script src="{% static 'hub/mention.js' %}?v=101"></script>
    <script src="{% static 'hub/settings-tab.js' %}?v=104"></script>
    <script src="{% static 'hub/emoji-picker.js' %}?v=99"></script>
    <script src="{% static 'hub/filter.js' %}?v=101"></script>
    <script src="{% static 'hub/blockers.js' %}?v=1"></script>
    <script src="{% static 'hub/agents-tab.js' %}?v=110"></script>
    <script src="{% static 'hub/connectivity-map.js' %}?v=100"></script>
    <script src="{% static 'hub/activity-tab.js' %}?v=178"></script>
    <script src="{% static 'hub/viz-tab.js' %}?v=5"></script>
    <script src="{% static 'hub/upload.js' %}?v=112"></script>
    <script src="{% static 'hub/files-tab.js' %}?v=104"></script>
    <script src="{% static 'hub/releases-tab.js' %}?v=100"></script>
    <script src="{% static 'hub/reactions.js' %}?v=107"></script>
    <script src="{% static 'hub/threads.js' %}?v=122"></script>
    <script src="{% static 'hub/sketch.js' %}?v=99"></script>
    <script src="{% static 'hub/webcam.js' %}?v=1"></script>
    <script src="{% static 'hub/voice-input.js' %}?v=126"></script>
    <script src="{% static 'hub/tabs.js' %}?v=108"></script>
    <script src="{% static 'hub/init.js' %}?v=100"></script>
    <script src="{% static 'hub/sw-register.js' %}?v=99"></script>
    <script src="{% static 'hub/push.js' %}?v=99"></script>
    <!-- mermaid.js — diagram rendering for ```mermaid code blocks -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad: false, theme: 'dark'});</script>
    <!-- highlight.js — load after DOM scripts so it can highlight existing blocks -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>
    /* Auto-highlight all code blocks (including dynamically added ones via MutationObserver) */
    if (typeof hljs !== 'undefined') {
      document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('pre.code-block code').forEach(function (el) { hljs.highlightElement(el); });
        /* Watch for new code blocks added dynamically */
        var obs = new MutationObserver(function (mutations) {
          mutations.forEach(function (m) {
            m.addedNodes.forEach(function (n) {
              if (n.nodeType !== 1) return;
              (n.querySelectorAll ? n.querySelectorAll('pre.code-block code') : []).forEach(function (el) {
                if (!el.dataset.highlighted) hljs.highlightElement(el);
              });
            });
          });
        });
        obs.observe(document.body, { childList: true, subtree: true });
      });
    }
    </script>
    <script src="{% static 'hub/element-inspector.js' %}?v=1"></script>
    <script src="{% static 'hub/search-palette.js' %}?v=1"></script>
    <script src="{% static 'hub/feed-scroll-btns.js' %}?v=1"></script>
    <script src="{% static 'hub/feed-nav.js' %}?v=3"></script>
    <!-- Channel export modal -->
    <div id="channel-export-modal"
         class="ch-export-modal"
         style="display:none"
         role="dialog"
         aria-modal="true"
         aria-label="Export channel">
        <div class="ch-export-backdrop" onclick="closeChannelExport()"></div>
        <div class="ch-export-card">
            <div class="ch-export-header">
                <span id="ch-export-title">Export channel</span>
                <button type="button" class="ch-export-close" onclick="closeChannelExport()">&times;</button>
            </div>
            <div class="ch-export-body">
                <label class="ch-export-label">
                    From
                    <input type="datetime-local" id="ch-export-from" class="ch-export-input">
                </label>
                <label class="ch-export-label">
                    To
                    <input type="datetime-local" id="ch-export-to" class="ch-export-input">
                </label>
                <label class="ch-export-label">
                    Format
                    <select id="ch-export-format" class="ch-export-input">
                        <option value="json">JSON</option>
                        <option value="md">Markdown</option>
                        <option value="txt">Plain text</option>
                    </select>
                </label>
            </div>
            <div class="ch-export-footer">
                <button type="button" class="ch-export-download" onclick="doChannelExport()">&#10515; Download</button>
                <button type="button" class="ch-export-cancel" onclick="closeChannelExport()">Cancel</button>
            </div>
        </div>
        <div class="ch-export-body">
            <label class="ch-export-label">
                From
                <input type="datetime-local" id="ch-export-from" class="ch-export-input">
            </label>
            <label class="ch-export-label">
                To
                <input type="datetime-local" id="ch-export-to" class="ch-export-input">
            </label>
            <label class="ch-export-label">
                Format
                <select id="ch-export-format" class="ch-export-input">
                    <option value="json">JSON</option>
                    <option value="md">Markdown</option>
                    <option value="txt">Plain text</option>
                </select>
            </label>
        </div>
        <div class="ch-export-footer">
            <button type="button" class="ch-export-download" onclick="doChannelExport()">&#8681; Download</button>
            <button type="button" class="ch-export-cancel" onclick="closeChannelExport()">Cancel</button>
        </div>
    </div>
</div>
<!-- Channel topic edit modal (todo#402) -->
<div id="channel-topic-modal"
     class="ch-topic-modal"
     style="display:none"
     role="dialog"
     aria-modal="true"
     aria-label="Edit channel topic">
    <div class="ch-topic-backdrop" onclick="closeChannelTopicEdit()"></div>
    <div class="ch-topic-card">
        <div class="ch-topic-header">
            <span>Edit channel topic</span>
            <button type="button"
                    class="ch-topic-close"
                    onclick="closeChannelTopicEdit()">&times;</button>
        </div>
        <textarea id="channel-topic-input"
                  class="ch-topic-input"
                  rows="3"
                  placeholder="Describe this channel's purpose..."></textarea>
        <div class="ch-topic-footer">
            <button type="button" class="ch-topic-save" onclick="saveChannelTopic()">Save</button>
            <button type="button"
                    class="ch-topic-cancel"
                    onclick="closeChannelTopicEdit()">Cancel</button>
        </div>
    </div>
</div>
{% endblock %}