{% load i18n scitex_project_picker %}
        <!-- Scholar leaf header: SDK SSoT row (writer shape). The ROW is the
            shared `.stx-app-header` sheet (linked in workspace_assets head);
            the leaf owns only identity (title + live leaf version, never a
            subtitle) and the project-selector slot. -->
        <header class="stx-app-header scholar-app-header">
            <div class="stx-app-header__identity">
                <span class="stx-app-header__title">{% trans "SciTeX Scholar" %}</span>
                <span class="stx-app-header__version"
                      title="scitex-scholar package serving this page">v{{ scholar_version }}</span>
            </div>
            <div class="stx-app-header__slot--project-selector">
                {% scitex_project_picker scope=app_scope current=current_project %}
            </div>
        </header>
        <div class="app-container" data-scholar-root>
            <!-- No left sidebar: even graph interaction hints live in the
                right-edge Details strip (operator 2026-10-17), so no tab
                ever renders an empty column. -->
            <!-- Main Content -->
            <main class="app-main">
                <!-- Tab Navigation: Search is the primary, default action. -->
                <nav class="tab-nav">
                    <button class="tab-btn active" data-tab="search">{% trans "Search databases" %}</button>
                    <button class="tab-btn" data-tab="library">{% trans "Library" %}</button>
                    <button class="tab-btn" data-tab="graph">{% trans "Citation Graph" %}</button>
                </nav>
                <!-- Search Tab (default) -->
                <div id="tab-search" class="tab-panel active">
                    <div class="citation-graph-container">
                        <!-- Input Form -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Search Papers" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% blocktrans %}Search academic databases (OpenAlex, Crossref, PubMed,
                                    Semantic Scholar, &#8230;) by keyword. This searches
                                    <strong>external databases</strong>, not your Library
                                    (a separate tab).{% endblocktrans %}
                                </p>
                                <form id="searchForm" class="graph-form">
                                    <div class="form-row">
                                        <div class="form-group--doi">
                                            <label class="form-label" for="searchInput">{% trans "Query" %}</label>
                                            <div class="input-wrapper">
                                                <input type="text"
                                                       id="searchInput"
                                                       class="form-input"
                                                       placeholder="e.g. graph neural networks for molecular property prediction">
                                                <button type="submit" class="btn-primary">{% trans "Search databases" %}</button>
                                            </div>
                                        </div>
                                        <div class="form-group--options">
                                            <label class="form-label" for="searchMaxResults">{% trans "Results" %}</label>
                                            <select id="searchMaxResults" class="form-select">
                                                <option value="10">10</option>
                                                <option value="20" selected>20</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                                <!--
                                    Advanced: collapsed by default. Houses the
                                    query-syntax help, the search source (mode),
                                    the "Ignore cache" control, and the CrossRef
                                    API status -- things a researcher does not
                                    need on the first screen (compass L653).
                                -->
                                <details class="search-advanced">
                                    <summary class="search-advanced__summary">{% trans "Advanced" %}</summary>
                                    <div class="search-advanced__body">
                                        <p class="search-advanced__syntax">
                                            {% blocktrans %}Query syntax:
                                            <code>-word</code> excludes a term,
                                            <code>year:2020-2024</code> bounds the
                                            publication year,
                                            <code>if:&gt;5</code> filters by impact factor.{% endblocktrans %}
                                        </p>
                                        <div class="search-advanced__row">
                                            <label class="form-label" for="searchMode">{% trans "Search source" %}</label>
                                            <select id="searchMode" class="form-select">
                                                <option value="parallel" selected>{% trans "All sources (parallel)" %}</option>
                                                <option value="single">{% trans "Single source" %}</option>
                                            </select>
                                        </div>
                                        <div class="search-advanced__row">
                                            <label class="search-advanced__check">
                                                <input type="checkbox" id="searchNoCache">
                                                {% trans "Ignore cache" %}
                                            </label>
                                        </div>
                                        <div class="search-advanced__row search-advanced__api">
                                            <span class="form-label">{% trans "CrossRef API" %}</span>
                                            {% if api_available %}
                                                <span style="color: var(--accent);">&#9679;</span> {% trans "Configured" %}
                                            {% else %}
                                                <span style="color: var(--status-error);">&#9679;</span> {% trans "Not configured" %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </details>
                            </div>
                        </div>
                        <!-- Loading -->
                        <div id="searchLoading" class="graph-loading hidden">
                            <div class="loading-spinner">
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                            </div>
                            <div class="loading-text">{% trans "Searching databases... This may take a moment." %}</div>
                        </div>
                        <!-- Error -->
                        <div id="searchError" class="graph-error hidden">
                            <p id="searchErrorMessage">{% trans "An error occurred" %}</p>
                            <button class="btn-build"
                                    onclick="document.getElementById('searchError').classList.add('hidden')">
                                {% trans "Dismiss" %}
                            </button>
                        </div>
                        <!-- Results -->
                        <div id="searchResults" class="hidden related-papers-section">
                            <div class="graph-card">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">
                                        {% trans "Results" %}
                                        <small id="searchStats" class="card-subtitle"></small>
                                    </span>
                                </div>
                                <!-- Slice 2 (old-direct parity): sorter + source filter +
                                    bulk/pipeline pills over the results. Sort/filter
                                    re-render locally; pills POST to the existing
                                    library save/save-bulk/enrich endpoints. -->
                                <div class="search-results-toolbar">
                                    <label class="form-label" for="searchSort">{% trans "Sort by" %}</label>
                                    <select id="searchSort" class="form-select">
                                        <option value="relevance" selected>{% trans "Relevance" %}</option>
                                        <option value="year-desc">{% trans "Year (newest)" %}</option>
                                        <option value="year-asc">{% trans "Year (oldest)" %}</option>
                                        <option value="title">{% trans "Title (A-Z)" %}</option>
                                    </select>
                                    <label class="form-label" for="searchSourceFilter">{% trans "Source" %}</label>
                                    <select id="searchSourceFilter" class="form-select">
                                        <option value="" selected>{% trans "All sources" %}</option>
                                    </select>
                                </div>
                                <div class="search-bulk-bar" id="searchBulkBar">
                                    <label class="search-bulk-bar__select-all">
                                        <input type="checkbox" id="searchSelectAll">
                                        {% trans "Select all" %}
                                    </label>
                                    <button type="button" id="searchSaveSelected" class="btn-control-library">{% trans "Save selected" %}</button>
                                    <button type="button" id="searchEnrichSelected" class="btn-control-library">{% trans "Save & enrich" %}</button>
                                    <span id="searchBulkStatus" class="search-bulk-status" role="status"></span>
                                </div>
                                <div class="graph-card__body" id="searchResultsContent"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Library Tab: the user's local library, listed here with a
                     contextual (per-paper) Enrichment action. Enrichment is an
                     operation ON a library item (#106), not a top-level tab
                     (#105 kept it off the nav). -->
                <div id="tab-library" class="tab-panel">
                    <div class="citation-graph-container">
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Library" %}</span>
                                <small id="libraryStats" class="card-subtitle"></small>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% blocktrans %}Your papers, stored locally. Use <strong>Enrich</strong>
                                    to fill in metadata (abstract, citations, impact
                                    factor) from the databases, or
                                    <strong>Import</strong> BibTeX and
                                    <strong>Export</strong> your library.{% endblocktrans %}
                                </p>
                                <!-- Import / Export (#106 / L327): library-level
                                     operations, thin wrappers over the package's
                                     BibTeX handler + formatter. -->
                                <div class="library-io">
                                    <label class="library-io__label" for="libraryExportFormat">{% trans "Export" %}</label>
                                    <select id="libraryExportFormat" class="form-select library-io__select">
                                        <option value="bibtex" selected">{% trans "BibTeX (.bib)" %}</option>
                                        <option value="ris">{% trans "RIS (.ris)" %}</option>
                                        <option value="endnote">{% trans "EndNote (.enw)" %}</option>
                                    </select>
                                    <button type="button" id="libraryExportBtn" class="btn-control-library">{% trans "Export" %}</button>
                                    <span class="library-io__sep"></span>
                                    <input type="file" id="libraryImportFile" class="library-io__file"
                                           accept=".bib,.bibtex,.txt" hidden>
                                    <button type="button" id="libraryImportBtn" class="btn-control-library">{% trans "Import BibTeX" %}</button>
                                </div>
                                <div id="libraryIoStatus" class="library-io__status"></div>
                                <!-- Project sync (parity slice 3c): the header
                                     picker selects the project (?project=
                                     navigation); the Library view shows the
                                     sync target and filters to filed papers.
                                     Chips are rendered by library.js from
                                     the existing /api/projects endpoint. -->
                                <div class="library-project">
                                    <span id="libraryProjectCurrent" class="library-project__current">{% trans "Project" %}</span>
                                    <span class="library-io__sep"></span>
                                    <div id="libraryProjectChips" class="library-project__chips"></div>
                                </div>
                                <!-- External imports (parity slice 3b): Zotero
                                     local-DB and Connected Papers reflection
                                     over the existing package backends (same
                                     thin-view class as the BibTeX
                                     import/export above). -->
                                <div class="library-ext">
                                    <h4 class="library-ext__title">{% trans "Zotero" %}</h4>
                                    <p class="library-ext__hint">
                                        {% trans "Import from your local Zotero database, or download the library as BibTeX for Zotero." %}
                                    </p>
                                    <div class="library-ext__row">
                                        <span id="zoteroStatus" class="library-ext__status">{% trans "Checking..." %}</span>
                                    </div>
                                    <div class="library-ext__controls">
                                        <label class="library-io__label" for="zoteroMode">{% trans "Import source" %}</label>
                                        <select id="zoteroMode" class="form-select library-io__select">
                                            <option value="all">{% trans "All papers" %}</option>
                                            <option value="collection">{% trans "By collection" %}</option>
                                            <option value="tags">{% trans "By tags" %}</option>
                                        </select>
                                        <select id="zoteroCollection" class="form-select library-io__select" hidden></select>
                                        <input type="text" id="zoteroTags" class="form-input library-ext__input"
                                               placeholder="{% trans "Tags, comma-separated" %}" hidden>
                                        <button type="button" id="zoteroImportBtn" class="btn-control-library">{% trans "Import from Zotero" %}</button>
                                        <button type="button" id="zoteroExportBtn" class="btn-control-library">{% trans "Download BibTeX for Zotero" %}</button>
                                    </div>
                                    <div id="zoteroIoStatus" class="library-io__status"></div>
                                </div>
                                <div class="library-ext">
                                    <h4 class="library-ext__title">{% trans "Connected Papers" %}</h4>
                                    <p class="library-ext__hint">
                                        {% trans "Import a Connected Papers graph by seed paper." %}
                                        {% trans "Find paper IDs at semanticscholar.org" %}
                                    </p>
                                    <div class="library-ext__row">
                                        <span id="cpStatus" class="library-ext__status">{% trans "Checking..." %}</span>
                                    </div>
                                    <div class="library-ext__controls">
                                        <label class="library-io__label" for="cpPaperId">{% trans "Semantic Scholar paper ID" %}</label>
                                        <input type="text" id="cpPaperId" class="form-input library-ext__input"
                                               placeholder="{% trans "40-char SHA or DOI" %}">
                                        <button type="button" id="cpImportBtn" class="btn-control-library">{% trans "Import Graph" %}</button>
                                    </div>
                                    <div id="cpIoStatus" class="library-io__status"></div>
                                </div>
                                <!-- Filter: the Library list's empty state has a
                                     FILTERED variant ("no papers match"), which
                                     is unreachable without a real filter control
                                     (review blocker 2). Filtering happens in
                                     /api/library?q= (server-side, over the same
                                     MASTER metadata the list shows). -->
                                <div class="library-filter">
                                    <label class="form-label" for="libraryFilter">{% trans "Filter your library" %}</label>
                                    <input type="search"
                                           id="libraryFilter"
                                           class="form-input library-filter__input"
                                           placeholder="{% trans "Title, author, or DOI" %}"
                                           autocomplete="off">
                                    <button type="button"
                                            id="libraryFilterClear"
                                            class="btn-control-library hidden">{% trans "Clear filters" %}</button>
                                </div>
                                <!-- CSRF: emitted by the standard {% csrf_token %}
                                     tag. Inert standalone (no CsrfViewMiddleware,
                                     value empty); when the mounted hub enables
                                     CSRF, it carries the real token that the
                                     Library Import POST sends as X-CSRFToken. We
                                     deliberately do NOT @csrf_exempt the view. -->
                                {% csrf_token %}
                                <div id="libraryLoading" class="graph-loading hidden">
                                    <div class="loading-spinner">
                                        <div class="spinner-ring"></div>
                                        <div class="spinner-ring"></div>
                                        <div class="spinner-ring"></div>
                                    </div>
                                    <div class="loading-text">{% trans "Loading your library..." %}</div>
                                </div>
                                <div id="libraryError" class="graph-error hidden">
                                    <p id="libraryErrorMessage">{% trans "An error occurred" %}</p>
                                    <button class="btn-build"
                                            onclick="document.getElementById('libraryError').classList.add('hidden')">
                                        {% trans "Dismiss" %}
                                    </button>
                                </div>
                                <div id="libraryList" class="library-list"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Citation Graph Tab (demoted: no longer the default) -->
                <div id="tab-graph" class="tab-panel">
                    <div class="citation-graph-container">
                        <!-- Input Form -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Build Citation Network" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% trans "Start with a DOI. Find one by title, topic, or keywords in Search or your Library, then build an interactive citation graph of related papers." %}
                                </p>
                                <form id="graphForm" class="graph-form">
                                    <div class="form-row">
                                        <div class="form-group--doi">
                                            <label class="form-label" for="doiInput">{% trans "DOI" %}</label>
                                            <div class="input-wrapper">
                                                <input type="text"
                                                       id="doiInput"
                                                       class="form-input"
                                                       required
                                                       aria-describedby="graphSeedHelp"
                                                       placeholder="e.g. 10.1038/s41586-020-2008-3">
                                                <button type="submit" class="btn-build">{% trans "Build Graph" %}</button>
                                            </div>
                                            <small id="graphSeedHelp">{% trans "Paste the DOI for one seed paper; titles and keywords belong in Search." %}</small>
                                        </div>
                                        <div class="form-group--options">
                                            <label class="form-label" for="topN">{% trans "Max papers in graph" %}</label>
                                            <select id="topN" class="form-select" aria-label="Maximum papers in citation graph">
                                                <option value="10">10</option>
                                                <option value="20" selected>20</option>
                                                <option value="30">30</option>
                                                <option value="50">50</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Seed from your Library (old-direct parity, slice
                             3a): the graph builds from a typed DOI above OR
                             a library paper here. The picker lists library
                             papers carrying a DOI; clicking one seeds the
                             build directly (hub _GraphInputHandler).
                             Populated lazily by citation-graph.js from the
                             EXISTING /api/library endpoint -- no new
                             backend. -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Seed from your Library" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <div id="graphLibrarySeed" class="graph-library-seed">
                                    <p class="empty-message">{% trans "Loading your library…" %}</p>
                                </div>
                            </div>
                        </div>
                        <!-- How It Works (old-direct parity, slice 3a): the
                             three relatedness signals the graph renders.
                             Static explainer, translated like every other
                             label (JA rule). -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "How It Works" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <div class="info-list">
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Bibliographic Coupling" %}</strong>
                                            <p>{% trans "Papers sharing common references" %}</p>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Co-citation" %}</strong>
                                            <p>{% trans "Papers frequently cited together" %}</p>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Direct Citations" %}</strong>
                                            <p>{% trans "Papers citing or cited by the seed" %}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Loading -->
                        <div id="graphLoading" class="graph-loading hidden">
                            <div class="loading-spinner">
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                            </div>
                            <div class="loading-text">{% trans "Building citation network... This may take a moment." %}</div>
                        </div>
                        <!-- Error -->
                        <div id="graphError" class="graph-error hidden">
                            <p id="graphErrorMessage">{% trans "An error occurred" %}</p>
                            <button class="btn-build"
                                    onclick="document.getElementById('graphError').classList.add('hidden')">
                                {% trans "Dismiss" %}
                            </button>
                        </div>
                        <!-- Visualization -->
                        <div id="graphVisualization" class="hidden">
                            <div class="graph-card graph-card--full">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">
                                        <span id="graphTitle">{% trans "Citation Network" %}</span>
                                        <small id="graphStats"
                                               style="font-weight: 400;
                                                      color: var(--text-muted);
                                                      margin-left: 12px"></small>
                                    </span>
                                    <div class="graph-controls">
                                        <button id="fitViewBtn" class="btn-control" title="{% trans "Fit to view" %}">&#8689;</button>
                                        <button id="resetZoomBtn" class="btn-control" title="{% trans "Reset zoom" %}">&#8634;</button>
                                        <button id="downloadSvgBtn" class="btn-control" title="{% trans "Download SVG" %}">&#8681;</button>
                                    </div>
                                </div>
                                <div class="graph-card__body" style="padding: 0; position: relative;">
                                    <div id="graphCanvas" class="graph-canvas-wrapper"></div>
                                    <div id="nodeDetailsPanel" class="node-details-panel hidden"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Related Papers -->
                        <div id="relatedPapersList" class="hidden related-papers-section">
                            <div class="graph-card">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">{% trans "Related Papers" %}</span>
                                </div>
                                <div class="graph-card__body" id="relatedPapersContent"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <!-- Status strip (right edge): LED dots + expandable detail.
                Old Sources style (hub scholar_base.html health LEDs synced
                with an expandable panel): one dot per backend, the translated
                detail/fix paragraph inside <details>. Collapsible per the
                operator layout rule (rightmost column, minimizable). -->
            <aside class="app-status-strip" data-status-strip>
                <button type="button" class="status-strip-toggle" data-status-strip-toggle
                        aria-expanded="true"
                        aria-label="{% trans "Collapse status panel" %}"
                        data-label-collapse="{% trans "Collapse status panel" %}"
                        data-label-expand="{% trans "Expand status panel" %}">&raquo;</button>
                <div class="status-strip__body">
                    <div class="status-strip__title">{% trans "Details" %}</div>
                    <!-- Graph interaction hints: shown only while the Graph
                        tab is active (operator 2026-10-17: no left sidebar
                        on any tab, Details集約). Visibility is driven by
                        syncGraphHint in app.js via [data-graph-hint]. -->
                    <div class="sidebar-section graph-controls-hint" data-graph-hint>
                        <div class="sidebar-section__header">
                            <span class="sidebar-section__title">{% trans "Graph Controls" %}</span>
                        </div>
                        <div class="sidebar-section__content"
                             style="font-size: 11px;
                                    color: var(--text-muted)">
                            <div style="margin-bottom: 6px;">
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Scroll" %}</kbd> {% trans "Zoom" %}
                            </div>
                            <div style="margin-bottom: 6px;">
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Drag" %}</kbd> {% trans "Pan" %}
                            </div>
                            <div>
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Click" %}</kbd> {% trans "Select node" %}
                            </div>
                        </div>
                    </div>
                    <details class="status-expand" open>
                        <summary class="status-expand__summary" aria-label="{% trans "Service Status" %}">
                            <span class="status-leds">
                                <span class="status-led" data-source="crossref"
                                      data-status="{% if api_available %}ready{% else %}unavailable{% endif %}"
                                      title="CrossRef API — {% if api_available %}{% trans "Configured" %}{% else %}{% trans "Not configured" %}{% endif %}"></span>
                                <span class="status-led" data-source="graph" data-status="checking"
                                      title="{% trans "Citation Graph" %} — {% trans "Checking..." %}"></span>
                            </span>
                        </summary>
                        <div class="status-expand__body">
                            <div class="status-row">
                                <span class="status-row__label">{% trans "CrossRef API" %}</span>
                                {% if api_available %}
                                    <span class="status-indicator status-healthy">&#9679; {% trans "Configured" %}</span>
                                {% else %}
                                    <span class="status-indicator status-warning">&#9679; {% trans "Not configured" %}</span>
                                {% endif %}
                            </div>
                            <div class="status-row">
                                <span class="status-row__label">{% trans "Citation Graph" %}</span>
                                <div id="serviceStatus">
                                    <span class="status-indicator status-checking">&#9679; {% trans "Checking..." %}</span>
                                </div>
                            </div>
                        </div>
                    </details>
                </div>
            </aside>
        </div>
        <!-- Scripts (order matters: ForceSimulation < GraphRenderer < citation-graph) -->