{% extends "scitex_ui/standalone_shell.html" %}
{% load static %}
{% block extra_css %}
    <link rel="icon"
          type="image/svg+xml"
          href="{% static 'writer/favicon.svg' %}">
    <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"
         data-api-base="{{ api_base|default:'/' }}"
         data-project-dir="{{ project_dir|default:'' }}">
        <header class="writer-toolbar">
            <div class="writer-toolbar-left">
                <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 id="section-tabs" class="writer-section-tabs"></div>
            </div>
            <div class="writer-toolbar-center">
                <span id="word-count" class="word-count">0 words</span>
                <select id="font-size-select"
                        class="writer-select writer-select-sm"
                        title="Font size">
                    <option value="12">12px</option>
                    <option value="13">13px</option>
                    <option value="14" selected>14px</option>
                    <option value="15">15px</option>
                    <option value="16">16px</option>
                    <option value="18">18px</option>
                    <option value="20">20px</option>
                </select>
                <button id="btn-toggle-theme"
                        class="btn btn-icon"
                        title="Toggle dark/light mode">
                    <i class="fas fa-moon"></i>
                </button>
                <button id="btn-show-shortcuts"
                        class="btn btn-icon"
                        title="Keyboard shortcuts">
                    <i class="fas fa-keyboard"></i>
                </button>
                <span id="current-file" class="current-file"></span>
                <span id="save-status" class="save-status"></span>
            </div>
            <div class="writer-toolbar-right">
                <span id="compile-lamp" class="writer-lamp lamp-idle" title="Idle"></span>
                <button id="btn-compile-mode"
                        class="btn btn-secondary"
                        title="Compile mode: Preview (draft) or Full">Preview</button>
                <button id="btn-compile"
                        class="btn btn-primary"
                        title="Compile (Ctrl+Shift+B)">
                    <i class="fas fa-hammer"></i> Compile
                </button>
                <button id="btn-toggle-log"
                        class="btn btn-secondary"
                        title="Toggle compilation log">
                    <i class="fas fa-terminal"></i> Log
                </button>
            </div>
        </header>
        <div class="writer-split">
            <div class="writer-editor-pane" id="editor-panel">
                <div class="editor-container" id="editor-container">
                    <div class="welcome-message" id="welcome-message">
                        <h2>SciTeX Writer</h2>
                        <p>Loading editor…</p>
                    </div>
                </div>
            </div>
            <div class="writer-split-resizer" id="writer-split-resizer"></div>
            <nav class="insert-bar" id="insert-bar" aria-label="Insert panel">
                <button class="insert-bar-btn" data-pane="cite" title="Citations">
                    <i class="fas fa-quote-left"></i><span>Cite</span>
                </button>
                <button class="insert-bar-btn" data-pane="fig" title="Figures">
                    <i class="fas fa-image"></i><span>Fig</span>
                </button>
                <button class="insert-bar-btn" data-pane="table" title="Tables">
                    <i class="fas fa-table"></i><span>Table</span>
                </button>
                <button class="insert-bar-btn" data-pane="collab" title="Collaboration">
                    <i class="fas fa-users"></i><span>Collab</span>
                </button>
                <button class="insert-bar-btn" data-pane="history" title="Version history">
                    <i class="fas fa-history"></i><span>History</span>
                </button>
            </nav>
            <aside class="insert-panel u-hidden" id="insert-panel">
            </aside>
            <div class="writer-preview-pane" id="preview-panel">
                <div class="preview-header">
                    <div class="preview-tabs">
                        <button class="preview-tab active" data-view="pdf">PDF</button>
                        <button class="preview-tab" data-view="bib">Bibliography</button>
                        <button class="preview-tab" data-view="claims">Claims</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>
                        <button id="btn-refresh-pdf" class="btn btn-icon btn-sm" title="Refresh PDF">
                            <i class="fas fa-sync"></i>
                        </button>
                        <button id="btn-pdf-theme"
                                class="btn btn-icon btn-sm"
                                title="PDF theme (auto / light / dark)">
                            <i class="fas fa-circle-half-stroke"></i>
                        </button>
                        <button id="btn-pdf-download"
                                class="btn btn-icon btn-sm"
                                title="Download PDF">
                            <i class="fas fa-download"></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 class="pdf-placeholder" id="pdf-placeholder">
                                <p>No PDF available.</p>
                                <p class="hint">Click Compile to generate.</p>
                            </div>
                        </div>
                    </div>
                    <div class="preview-view" id="bib-view">
                        <div class="bib-list" id="bib-list">
                            <div class="loading">Loading bibliography…</div>
                        </div>
                    </div>
                    <div class="preview-view" id="claims-view">
                        <div class="claims-list" id="claims-list">
                            <div class="loading">Loading claims…</div>
                        </div>
                    </div>
                </div>
            </div>
            <aside class="details-pane" id="details-panel" aria-label="Details">
            </aside>
        </div>
        <div class="log-panel u-hidden" id="log-panel">
            <div class="log-header">
                <span>Compilation Log</span>
                <button id="btn-close-log" class="btn btn-icon btn-sm">&times;</button>
            </div>
            <pre class="log-content" id="log-content"></pre>
        </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/index.js' %}"></script>
{% endblock %}