{% extends "base.html" %}
{% block title %}{{ document['title'] }} · MarkAI{% endblock %}
{% block body_class %}viewer-page{% endblock %}

{% block body %}
<div class="viewer-toolbar">
  <div class="toolbar-doc">
    <a class="icon-btn" href="{{ url_for('documents.library') }}" title="Back to library" aria-label="Back to library">
      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>
    <strong>{{ document['title'] }}</strong>
    <span class="doc-type-badge">{{ document['doc_type'] }}</span>
  </div>
  <div class="hint" id="sync-hint">
    {% if document['source_folder'] %}
      Synced with <code>{{ document['source_folder'] }}</code>
      <button class="btn secondary small" id="refresh-btn" type="button">Refresh</button>
    {% else %}
      No source folder set — notes are only stored in MarkAI.
      <a href="{{ url_for('documents.library') }}">Set one from the library</a>
    {% endif %}
  </div>
  <div class="hint">Click or select text to add a note · hold <kbd>Ctrl</kbd> to click links normally</div>
  <div class="toolbar-actions">
    <button class="icon-btn" id="search-toggle" type="button" title="Find in document (Ctrl+F)" aria-label="Find in document">
      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M21 21l-4.3-4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
    </button>
    <button class="btn secondary small" id="export-btn" type="button">Export notes…</button>
    <div class="zoom-control" id="page-jump-control" hidden>
      <button class="btn secondary small zoom-value" id="page-jump-label" type="button"
              aria-haspopup="dialog" aria-expanded="false" title="Go to page">Page 1/1</button>
      <div class="zoom-popover" id="page-jump-popover" role="dialog" aria-label="Go to page" hidden>
        <div class="zoom-popover-row">
          <input type="number" id="page-jump-input" min="1" step="1" aria-label="Page number">
          <button class="btn small" id="page-jump-go" type="button">Go</button>
        </div>
      </div>
    </div>
    <div class="zoom-control" id="pdf-controls" hidden>
      <button class="btn secondary small" id="zoom-out" type="button" title="Zoom out">&minus;</button>
      <button class="btn secondary small zoom-value" id="zoom-level" type="button"
              aria-haspopup="dialog" aria-expanded="false" title="Set zoom level">100%</button>
      <button class="btn secondary small" id="zoom-in" type="button" title="Zoom in">+</button>
      <div class="zoom-popover" id="zoom-popover" role="dialog" aria-label="Zoom" hidden>
        <div class="zoom-popover-row">
          <input type="range" id="zoom-slider" min="40" max="400" step="5" value="100"
                 aria-label="Zoom level">
          <span class="zoom-popover-value" id="zoom-slider-value">100%</span>
        </div>
        <div class="zoom-presets">
          <button class="btn secondary small" type="button" data-zoom="fit">Fit width</button>
          <button class="btn secondary small" type="button" data-zoom="50">50%</button>
          <button class="btn secondary small" type="button" data-zoom="100">100%</button>
          <button class="btn secondary small" type="button" data-zoom="150">150%</button>
          <button class="btn secondary small" type="button" data-zoom="200">200%</button>
        </div>
      </div>
    </div>
    <div class="reading-mode-control" id="reading-mode-control">
      <label class="theme-switch" id="theme-switch" title="Toggle day/night reading theme">
        <svg class="theme-icon theme-icon-sun" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
          <path d="M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8L6 18M18 6l1.8-1.8"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <input type="checkbox" id="theme-switch-input">
        <span class="theme-switch-track"><span class="theme-switch-thumb"></span></span>
        <svg class="theme-icon theme-icon-moon" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true">
          <path d="M20 14.5A8.5 8.5 0 119.5 4a7 7 0 0010.5 10.5z" fill="currentColor"/>
        </svg>
      </label>
      <select id="reading-filter" title="Document reading filter" aria-label="Document reading filter">
        <option value="none">Simple</option>
        <option value="sepia">Sepia</option>
      </select>
    </div>
  </div>
</div>

<div class="viewer-shell">
  <div class="sidebar-panel left" id="outline-panel">
    <button class="sidebar-toggle" type="button" data-toggle="outline-panel" title="Collapse chapters">Chapters «</button>
    <div class="sidebar-inner">
      <div class="outline-tools">
        <label class="review-mode-toggle" id="review-mode-toggle" aria-label="Review mode">
          <input type="checkbox" id="review-mode-input">
          <span class="theme-switch-track">
            <span class="theme-switch-thumb">
              <svg class="review-mode-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 20h9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
              </svg>
            </span>
          </span>
        </label>
        <button class="btn secondary small" id="outline-locate" type="button"
                title="Locate current position in the chapter list">Locate</button>
        <button class="btn secondary small" id="outline-collapse-all" type="button"
                title="Collapse every open chapter">Collapse all</button>
      </div>
      <ul class="outline-list" id="outline-list"><li class="hint">Loading…</li></ul>
    </div>
  </div>
  <div class="viewer-main" id="viewer-main">
    <div class="doc-pane" id="doc-pane" data-doc-type="{{ document['doc_type'] }}">
      <div class="empty-state">Loading document…</div>
    </div>
  </div>
  <div class="chapter-rail" id="chapter-rail"></div>
  <div class="sidebar-panel right" id="notes-panel">
    <button class="sidebar-toggle" type="button" data-toggle="notes-panel" title="Collapse notes">» Notes</button>
    <div class="sidebar-inner">
      <div class="notes-search"><input type="text" id="notes-search-input" placeholder="Search notes…" autocomplete="off"></div>
      <div id="note-list"><div class="hint"><span class="spinner"></span>Loading notes…</div></div>
    </div>
  </div>
</div>

<div class="search-bar" id="search-bar" role="search" hidden>
  <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M21 21l-4.3-4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
  <input type="text" id="search-input" placeholder="Find in document…" autocomplete="off" aria-label="Find in document">
  <span class="search-count" id="search-count"></span>
  <button class="icon-btn small" id="search-prev" type="button" title="Previous match (Shift+Enter)" aria-label="Previous match">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M18 15l-6-6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <button class="icon-btn small" id="search-next" type="button" title="Next match (Enter)" aria-label="Next match">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <button class="icon-btn small" id="search-close" type="button" title="Close (Esc)" aria-label="Close search">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
  </button>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.MARKAI = {
    documentId: {{ document['id'] }},
    docType: {{ document['doc_type']|tojson }},
    hasSourceFolder: {{ (document['source_folder'] is not none)|tojson }},
    contentUrl: {{ url_for('documents.content', document_id=document['id'])|tojson }},
    notesUrl: {{ url_for('notes.list_notes', document_id=document['id'])|tojson }},
    syncStatusUrl: {{ url_for('notes.sync_status', document_id=document['id'])|tojson }},
    exportUrl: {{ url_for('notes.export_notes_download', document_id=document['id'])|tojson }},
    sectionsUrl: {{ url_for('documents.list_section_statuses', document_id=document['id'])|tojson }},
    hasSourceFolderPath: {{ (document['source_folder'] or '')|tojson }},
    pdfWorkerUrl: {{ url_for('static', filename='vendor/pdfjs/pdf.worker.min.js')|tojson }},
    quoteCharLimit: {{ (g.user['quote_char_limit'] or 0)|tojson }},
  };
</script>
{% if document['doc_type'] == 'pdf' %}
<script src="{{ url_for('static', filename='vendor/pdfjs/pdf.min.js') }}"></script>
{% endif %}
<script src="{{ url_for('static', filename='js/sync_poll.js') }}"></script>
<script src="{{ url_for('static', filename='js/viewer.js') }}"></script>
{% endblock %}