{% extends "scitex_sdk/ui/standalone_shell.html" %}
{% load static scitex_static %}
{% block extra_css %}
    <meta name="stx-app-scope" content="{{ app_scope }}">
    <meta name="writer-csrf-token" content="{{ csrf_token }}">
    {% comment %}Tab icon: the scitex-sdk shell emits the official mark
    via _branding_head.html (operator 2026-10-23 — no leaf-local icons,
    no per-environment variant).{% endcomment %}
    <link rel="stylesheet" href="{% app_static 'writer/assets/index.css' %}">
    <link rel="stylesheet" href="{% static 'writer/css/editor.css' %}">
{% endblock %}
{% block worktree_title_full %}Project files{% endblock %}
{% block worktree_data_attrs %}data-working-dir="{{ project_dir|default:'' }}"{% endblock %}
{% block app_content %}
    <div class="writer-app writer-app--viewer"
         data-app-mode="{{ writer_app_mode }}"
         data-api-base="{{ api_base|default:'/' }}"
         data-project-id="{{ project_id|default:'' }}"
         data-project-dir="{{ project_dir|default:'' }}"
         data-mode="viewer">
        <header class="writer-toolbar">
            <div class="writer-toolbar-left">
                <span class="writer-logo"><i class="fas fa-file-alt"></i> Writer — Viewer</span>
                <select id="doc-type-select" class="writer-select" title="Document type">
                    <option value="manuscript">Manuscript</option>
                    <option value="supplementary">Supplementary</option>
                    <option value="revision">Revision</option>
                </select>
            </div>
            <div class="writer-toolbar-center">
                <span id="claims-count-badge" class="claims-count-badge"></span>
            </div>
            <div class="writer-toolbar-right">
                <a href="./" class="btn btn-secondary" title="Back to editor">
                    <i class="fas fa-edit"></i> Edit
                </a>
            </div>
        </header>
        <div class="writer-split writer-split--viewer">
            <aside class="viewer-claims-pane" id="viewer-claims-pane">
                <div class="viewer-pane-header">Verified claims</div>
                <div class="viewer-claims-list" id="viewer-claims-list">
                    <div class="loading">Loading claims…</div>
                </div>
            </aside>
            <div class="viewer-pdf-pane" id="viewer-pdf-pane">
                <div class="preview-header">
                    <div class="preview-tabs">
                        <button class="preview-tab active" data-view="pdf">PDF</button>
                        <button class="preview-tab" data-view="dag">DAG</button>
                    </div>
                    <div class="preview-actions">
                        <div class="pdf-menu">
                            <button id="btn-pdf-menu" class="btn btn-icon btn-sm" title="PDF options" aria-haspopup="menu" aria-expanded="false" aria-controls="pdf-menu-list">
                                <i class="fas fa-bars"></i>
                            </button>
                            <div class="pdf-menu-list u-hidden" id="pdf-menu-list" role="menu">
                                <button id="btn-pdf-zoom-out" class="btn btn-sm pdf-menu-item" role="menuitem" title="Zoom out (Ctrl+-)">
                                    <i class="fas fa-search-minus"></i><span>Zoom out</span><kbd>Ctrl+-</kbd>
                                </button>
                                <button id="btn-pdf-fit" class="btn btn-sm pdf-menu-item" role="menuitem" title="Fit width (Ctrl+0)">
                                    <i class="fas fa-arrows-alt-h"></i><span>Fit width</span><kbd>Ctrl+0</kbd>
                                </button>
                                <button id="btn-pdf-zoom-in" class="btn btn-sm pdf-menu-item" role="menuitem" title="Zoom in (Ctrl+=)">
                                    <i class="fas fa-search-plus"></i><span>Zoom in</span><kbd>Ctrl+=</kbd>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="preview-content" id="preview-content">
                    <div class="preview-view active" id="pdf-view">
                        <div class="pdf-container" id="pdf-container"></div>
                    </div>
                    <div class="preview-view" id="dag-view">
                        <div class="dag-container" id="dag-container">
                            <p class="insert-panel-empty">Click a claim to load its verification DAG.</p>
                        </div>
                    </div>
                </div>
            </div>
            <aside class="viewer-popup u-hidden" id="viewer-popup">
                <div class="viewer-popup-header">
                    <span id="viewer-popup-title">Claim</span>
                    <button id="viewer-popup-close" class="btn btn-icon btn-sm">&times;</button>
                </div>
                <div class="viewer-popup-body" id="viewer-popup-body"></div>
            </aside>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
    <script type="module" src="{% app_static 'writer/assets/viewer.js' %}"></script>
{% endblock %}