{% extends "base.html" %}
{% block title %}{{ document['title'] }} · MarkAI{% 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="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>
</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">
        <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="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 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 }},
    hasSourceFolderPath: {{ (document['source_folder'] or '')|tojson }},
    pdfWorkerUrl: {{ url_for('static', filename='vendor/pdfjs/pdf.worker.min.js')|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 %}