{% extends "scitex_ui/standalone_shell.html" %}
{% load static %}
{% block extra_css %}
    {# The bare SVG icon link is NOT here: the scitex-ui shell emits it from
       `favicon_href`, which views.py sets to writer/favicon.svg. Declaring it
       here too would produce two identical rel="icon" links (scitex-ui 0.7.0
       made the shell's link unconditional). Only the variants the shell cannot
       express -- sizes= and apple-touch-icon -- belong in this block. #}
    <link rel="icon"
          type="image/png"
          sizes="16x16"
          href="{% static 'writer/favicon-16x16.png' %}">
    <link rel="icon"
          type="image/png"
          sizes="32x32"
          href="{% static 'writer/favicon-32x32.png' %}">
    <link rel="icon"
          type="image/png"
          sizes="192x192"
          href="{% static 'writer/favicon-192x192.png' %}">
    <link rel="apple-touch-icon"
          sizes="180x180"
          href="{% static 'writer/favicon-180x180.png' %}">
    <link rel="stylesheet" href="{% 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-api-base="{{ api_base|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">
                        <button id="btn-pdf-zoom-out" class="btn btn-icon btn-sm" title="Zoom out">
                            <i class="fas fa-search-minus"></i>
                        </button>
                        <button id="btn-pdf-fit" class="btn btn-icon btn-sm" title="Fit width">
                            <i class="fas fa-arrows-alt-h"></i>
                        </button>
                        <button id="btn-pdf-zoom-in" class="btn btn-icon btn-sm" title="Zoom in">
                            <i class="fas fa-search-plus"></i>
                        </button>
                    </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="{% static 'writer/assets/viewer.js' %}"></script>
{% endblock %}