{% extends "hub/base.html" %}
{% load static %}
{% load vite %}
{% 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/style-base.css' %}?v=137">
    <link rel="stylesheet" href="{% static 'hub/style/style-main.css' %}?v=134">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-messages.css' %}?v=136">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-composer.css' %}?v=134">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-agents.css' %}?v=136">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-channels.css' %}?v=139">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-menus.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/style/style-modals.css' %}?v=135">
    <link rel="stylesheet"
          href="{% static 'hub/components/components-badges-filter.css' %}?v=105">
    <link rel="stylesheet"
          href="{% static 'hub/components/components-agent-cards.css' %}?v=106">
    <link rel="stylesheet"
          href="{% static 'hub/components/components-messages.css' %}?v=105">
    <link rel="stylesheet"
          href="{% static 'hub/components/components-agent-detail.css' %}?v=106">
    <link rel="stylesheet"
          href="{% static 'hub/components/components-mcp-viewer.css' %}?v=105">
    <link rel="stylesheet"
          href="{% static 'hub/todo-tab/todo-tab-list.css' %}?v=108">
    <link rel="stylesheet"
          href="{% static 'hub/todo-tab/todo-tab-stats.css' %}?v=110">
    <link rel="stylesheet"
          href="{% static 'hub/attachments/attachments-media.css' %}?v=101">
    <link rel="stylesheet"
          href="{% static 'hub/attachments/attachments-cards.css' %}?v=101">
    <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=102">
    <!-- Orochi unified cron Phase 2 (msg#16406 / msg#16408) — Machines
         tab cron-jobs panel. Loaded after resources.css so cron-panel
         rules sit under each .res-card via the shared 11px meta font. -->
    <link rel="stylesheet"
          href="{% static 'hub/style/style-cron-panel.css' %}?v=1">
    <link rel="stylesheet" href="{% static 'hub/icons.css' %}?v=99">
    <link rel="stylesheet" href="{% static 'hub/app/sidebar-memory.css' %}?v=5">
    <link rel="stylesheet" href="{% static 'hub/settings.css' %}?v=104">
    <link rel="stylesheet" href="{% static 'hub/connectivity-map.css' %}?v=101">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-core.css' %}?v=165">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-list.css' %}?v=166">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-topology.css' %}?v=167">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-topology-nodes.css' %}?v=166">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-compose-edges.css' %}?v=166">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-detail-pane.css' %}?v=165">
    <link rel="stylesheet"
          href="{% static 'hub/activity-tab/activity-tab-hooks-seekbar.css' %}?v=165">
    <link rel="stylesheet"
          href="{% static 'hub/files-tab/files-tab-grid.css' %}?v=106">
    <link rel="stylesheet"
          href="{% static 'hub/files-tab/files-tab-modals.css' %}?v=106">
    <link rel="stylesheet" href="{% static 'hub/releases-tab.css' %}?v=103">
    <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/terminal-tab.css' %}?v=1">
    <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">
    <link rel="stylesheet" href="{% static 'hub/sidebar-fold.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 sidebar-brand-compact">
                <div class="brand-logo brand-logo-sm" id="brand-logo"></div>
                <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>
                <span class="brand-product-inline" title="SciTeX Orochi">Orochi</span>
                <span class="brand-version" id="orochi-version"></span>
                <span id="conn-status" class="status conn-down" title="connecting"></span>
            </div>
            <div id="wall-clock" class="wall-clock"></div>
            <!-- hook-bypass: inline-style -->
            <div class="sidebar-sections">
                <h2 class="collapsible-heading channels-heading"
                    data-section="sidebar-memory">
                    Filtering
                    <span class="sidebar-mem-help"
                          tabindex="0"
                          aria-label="Filtering help"
                          title="Memory slots span agents, channels, and machines.  Click M1–M5 to recall a saved snapshot (the pill lights up). Click Save to M-n to overwrite the active slot with the current selection. Shift-click a slot = save directly to that slot. Right-click a slot = rename or clear it. ● on a slot = unsaved changes vs its snapshot. Click Clear (🚫) to unset the active slot and show everything.">?</span>
                </h2>
                <div id="sidebar-memory" class="sidebar-section">
                    <div class="sidebar-memory-picker">
                        <select id="sidebar-mem-select"
                                class="sidebar-mem-select"
                                title="Switch active memory slot. + Create new takes the next free slot.">
                            <!-- options rendered by sidebar-memory.js -->
                        </select>
                    </div>
                    <div class="sidebar-memory-actions">
                        <button class="sidebar-mem-btn sidebar-mem-save"
                                data-action="save"
                                title="Save current selection to the active memory slot">Save</button>
                    </div>
                </div>
                <h2 class="collapsible-heading channels-heading" data-section="agents">
                    Agents <span class="sidebar-count" id="sidebar-count-agents"></span>
                </h2>
                <!-- Wrapper exists so the collapsible-heading's
                     nextElementSibling toggle folds BOTH the controls
                     and the agents list as one unit. Sort/color controls
                     live OUTSIDE #agents because sidebar-agents.js
                     rewrites #agents.innerHTML on every heartbeat and
                     would otherwise wipe them. -->
                <div class="sidebar-agents-wrap sidebar-section">
                    <div class="sidebar-agent-controls">
                        <select id="activity-sort-select"
                                class="sidebar-agent-select"
                                title="sort order">
                            <option value="name">sort: name</option>
                            <option value="machine">sort: machine</option>
                        </select>
                        <select id="activity-color-select"
                                class="sidebar-agent-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>
                    </div>
                    <div id="agents">
                        <p id="no-agents">No agents connected</p>
                    </div>
                </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">
                    DM <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>
        <button id="sidebar-fold"
                class="sidebar-fold-toggle"
                aria-label="Collapse sidebar"
                title="Collapse sidebar (Ctrl+B)">&lsaquo;</button>
        <div class="main">
            <div class="tab-bar">
                <button class="tab-btn active" data-tab="activity">Overview</button>
                <button class="tab-btn" data-tab="agents-tab">Agents</button>
                <button class="tab-btn" data-tab="chat">Chat</button>
                <button class="tab-btn" data-tab="todo">TODO</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 class="todo-view-switch-wrap">
                    <div class="machines-view-switch"
                         role="tablist"
                         aria-label="TODO view mode">
                        <button type="button"
                                class="machines-view-switch-btn"
                                data-todo-view="viz"
                                title="progress chart + KPIs">Viz</button>
                        <button type="button"
                                class="machines-view-switch-btn active"
                                data-todo-view="list"
                                title="issue list grouped by priority">List</button>
                    </div>
                </div>
                <div class="todo-state-filter">
                    <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="viz-content" class="viz-content"></div>
                <div id="todo-stats" class="todo-stats"></div>
                <div id="todo-grid" class="todo-grid"></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 -->
                <!-- Overview (internal id "activity") is Viz-only per
                     msg#16337 — the Agents list lives in the dedicated
                     #agents-tab-view. The Viz/List switch that used to
                     sit here is gone; only the topology size dropdown
                     and the summary pill row remain. -->
                <div id="activity-subtabs" class="activity-subtabs">
                    <!-- sort + color dropdowns moved to the sidebar (ywatanabe 2026-04-21) -->
                    <select id="activity-size-select"
                            class="activity-sort-select"
                            title="topology channel node size">
                        <option value="equal">size: equal</option>
                        <option value="subscribers">size: subscribers</option>
                        <option value="posts">size: posts</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>
            <!-- Web terminal tab (todo#47) -->
            <!-- hook-bypass: inline-style -->
            <div id="terminal-view" class="todo-view" style="display:none">
                <div class="terminal-toolbar">
                    <span class="terminal-label">Open shell on</span>
                    <div id="terminal-host-picker" class="terminal-host-picker"></div>
                    <button type="button"
                            id="terminal-close-btn"
                            class="terminal-close-btn"
                            title="Close terminal session">Close</button>
                </div>
                <div id="terminal-status" class="terminal-status">idle - pick a host to open a shell</div>
                <div id="terminal-xterm-container"></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"
                              data-voice-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 }}";
      window.__orochiWorkspaceIconImage = "{{ workspace.icon_image|escapejs }}";
    </script>
    <!-- Single source of truth for the agent badge (icon, star, 4 LEDs,
         name, host). Loaded BEFORE app.js / activity-tab.js / agents-tab.js
         so renderAgentBadge() is in scope at first render. NEVER inline a
         badge in any of those files — call renderAgentBadge() instead.
         See dashboard-development-discipline.md rule 1. -->
    <!-- SVG variant of the agent badge — renderAgentBadgeSvg for the
         topology canvas (both agent and human nodes). Parallel to
         renderChannelBadgeSvg. Split out of agent-badge.js to stay
         under the 512-line .js hook cap. Must load AFTER agent-badge.js
         (shares agentIdentity/getAgentColor helpers) but BEFORE
         activity-tab/topology-nodes.js. -->
    <!-- Single source of truth for the channel badge (icon, star, eye,
         mute, name, unread). Parallel to agent-badge.js. Loaded BEFORE
         app/* and activity-tab/* so renderChannelBadgeHtml / Svg are in
         scope at first render. Star/eye/mute/icon-change click handlers
         are wired via document.body delegation from this file — no
         site-local wiring required. -->
    <!-- Activity tab (canonical Agents UI renderer) — split into focused
         sub-files. ALL share the same cache-bust version. Load order:
         state → utils → data → per-view renderers → topology helpers →
         topology → grid handlers → controls → init. -->
    {# Single Vite ES-module bundle replacing ~100 per-file classic-script tags. #}
    {# Load order + imports live in hub/frontend/src/index.ts. #}
    {% vite_bundle "src/index.ts" as orochi_bundle %}
    {% if orochi_bundle %}<script type="module" src="{{ orochi_bundle }}"></script>{% endif %}
    <!-- 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>
    <!-- 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 %}