{% load static %}
<link rel="stylesheet" href="{% static 'grime/viewer.css' %}">

{% if image_url %}
<div id="dp-person-confirm-strip" style="display:none;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:4px;padding:8px 12px;margin-bottom:10px;font-size:0.9em;"></div>
<div style="margin-bottom:1.5em">

  <!-- tabs -->
  <div id="dp-tabs">
    <button class="dp-tab active" id="tab-ocr" onclick="dpShowTab('ocr')">OCR</button>
    <button class="dp-tab" id="tab-tagging" onclick="dpShowTab('tagging')">Tagging</button>
  </div>


  <!-- toolbar -->
  <div id="dp-toolbar" style="margin-top:6px">
    <button type="button" onclick="dpZoomOut()">−</button>
    <span id="dp-zoom-label">100%</span>
    <button type="button" onclick="dpZoomIn()">+</button>
    <button type="button" onclick="dpZoomReset()">Fit</button>

    {% if ocr_record_pk %}
    <div class="dp-toolbar-sep" id="dp-sep-ocr" style="display:none"></div>
    <div id="dp-ocr-actions">
      <span class="dp-split-btn">
        <button id="dp-rerun-ocr" type="button">Run OCR</button><button id="dp-rerun-ocr-caret" type="button" aria-label="Choose OCR engine">&#9662;</button>
        <div id="dp-rerun-ocr-menu" class="dp-menu">
          <a href="#" data-engine="textract" class="active">Textract</a>
          <a href="#" data-engine="tesseract">Tesseract</a>
        </div>
      </span>
      <button id="dp-boxes-toggle" type="button">Hide boxes</button>
      <button id="dp-draw-toggle" type="button">Add region (a)</button>
    </div>
    {% endif %}

    <div class="dp-toolbar-sep"></div>
    {% if prev_url %}<a class="dp-nav-btn" href="{{ prev_url }}" title="{{ nav_prev_label }}">&#8592;</a>
    {% else %}<a class="dp-nav-btn disabled" aria-disabled="true">&#8592;</a>{% endif %}
    {% if page_list_json %}
    <select id="dp-page-select" style="font-size:0.85em;padding:2px 4px;border-radius:3px;border:1px solid #ccc;cursor:pointer"></select>
    {% elif page_position and total_count %}
    <span id="dp-page-indicator">{{ nav_prefix }}{{ page_position }} / {{ total_count }}</span>
    {% endif %}
    {% if next_url %}<a class="dp-nav-btn" href="{{ next_url }}" title="{{ nav_next_label }}">&#8594;</a>
    {% else %}<a class="dp-nav-btn disabled" aria-disabled="true">&#8594;</a>{% endif %}

    {% if doc_tag_count is not None %}
    <div class="dp-toolbar-sep"></div>
    <span id="dp-doc-tag-count" title="Total tags across all pages in this document" style="font-size:0.82em;color:#555">doc: <strong id="dp-doc-tag-count-val">{{ doc_tag_count }}</strong> <span id="dp-doc-tag-count-suffix">tag{{ doc_tag_count|pluralize }}</span></span>
    {% endif %}
    {% if autogen_unreviewed_count %}
    <div class="dp-toolbar-sep"></div>
    <a class="dp-nav-btn" href="{{ review_tags_url }}" title="Review autogenerated tags" style="font-size:0.82em;background:#fff3cd;border:1px solid #ffc107;border-radius:3px;padding:2px 8px;color:#856404;text-decoration:none">Review {{ autogen_unreviewed_count }} tag{{ autogen_unreviewed_count|pluralize }}</a>
    {% endif %}

    <div class="dp-toolbar-sep"></div>
    <span id="dp-tab-badge" style="font-size:0.82em;color:#666"></span>
  </div>

  <!-- viewer + panels -->
  <div id="dp-outer">
    <div id="dp-viewer-wrap">
      <div id="dp-viewer">
        <img id="dp-img" src="{{ image_url }}" alt="{{ image_alt }}">
        <div id="dp-draw-rect"></div>
        <div id="dp-select-rect"></div>
        <div id="dp-tag-draw-rect"></div>
        <div id="dp-tag-active-rect">
          <div class="dp-tag-corner tl" data-corner="tl"></div>
          <div class="dp-tag-corner tr" data-corner="tr"></div>
          <div class="dp-tag-corner bl" data-corner="bl"></div>
          <div class="dp-tag-corner br" data-corner="br"></div>
        </div>
        <div id="dp-tag-sub-rect"></div>
        <div id="dp-veil-top"    class="dp-veil" style="display:none"></div>
        <div id="dp-veil-bottom" class="dp-veil" style="display:none"></div>
        <div id="dp-veil-left"   class="dp-veil" style="display:none"></div>
        <div id="dp-veil-right"  class="dp-veil" style="display:none"></div>
      </div>
    </div>

    <!-- tagging panel -->
    <div id="dp-tag-panel">
      <!-- idle: tag list -->
      <div id="dp-tag-list-view">
        <h3>Tags</h3>
        <div id="dp-tag-instructions">
          <span>Drag on image to create a tag.</span>
          <span>Click anywhere on a tag to edit it.</span>
          <div id="dp-tag-ner-legend">
            <span class="dp-ner-legend-title">NER highlights</span>
            <span><span class="dp-ner-swatch ner-PER"></span>Person — click to correct</span>
            <span><span class="dp-ner-swatch ner-LOC"></span>Location</span>
            <span><span class="dp-ner-swatch ner-ORG"></span>Org</span>
          </div>
          <div id="dp-tag-count">

          </div>
        </div>
        <div id="dp-tag-list"><div id="dp-tag-empty">No tags yet.</div></div>
      </div>
      <!-- labeling: label + subcomponents + actions -->
      <div id="dp-tag-label-view" style="display:none">
        <h3 id="dp-tag-label-heading">New tag</h3>
        <input id="dp-tag-label-input" type="text" placeholder="Tag label…" autocomplete="off">
        <div id="dp-tag-sub-input-row" style="display:none">
          <div style="display:flex;gap:4px;align-items:center">
            <input id="dp-tag-sub-input" type="text" list="dp-sub-label-list" placeholder="Label for selection…" autocomplete="off" style="flex:1;min-width:0">
            <button id="dp-tag-sub-clear-btn" type="button" title="Remove selected from pattern" style="padding:2px 7px;font-size:0.88em;cursor:pointer;border:1px solid #c00;border-radius:3px;background:#fff;color:#c00;flex-shrink:0">×</button>
          </div>
          <datalist id="dp-sub-label-list"></datalist>
          <div id="dp-tag-sub-hint">Enter to label · × to remove · Esc to deselect</div>
        </div>
        <div id="dp-tag-subcomp-list"></div>
        <div id="dp-tag-actions">
          <button id="dp-tag-save-btn" type="button">Save ↵</button>
          <button id="dp-tag-cancel-btn" type="button">Cancel ⎋</button>
          <button id="dp-tag-delete-btn" type="button" style="display:none">Delete</button>
        </div>
      </div>
    </div>

    <!-- OCR panel -->
    <div id="dp-text-panel">
      <h3>OCR Text</h3>
      <div id="dp-ocr-instructions">
        {% if ocr_record_pk %}
        <span>Click a word to edit.</span>
        <span>Drag to select · ↑↓ to reorder.</span>
        <span>Select 2+ to merge or join lines.</span>
        {% endif %}
        <div id="dp-ocr-conf-legend">
          <span class="dp-ocr-legend-title">Confidence</span>
          <span><span class="dp-conf-swatch conf-low"></span>Low (&lt;60)</span>
          <span><span class="dp-conf-swatch conf-mid"></span>Mid (60–80)</span>
          <span><span class="dp-conf-swatch conf-high"></span>High (&gt;80)</span>
          {% if ocr_record_pk %}<span><span class="dp-conf-swatch conf-corrected"></span>Corrected</span>{% endif %}
        </div>
      </div>
      <div id="dp-corrected-text"></div>
    </div>
  </div>
</div>
<div id="dp-coord"></div>
{% endif %}

<!-- NER repair popup -->
<div id="dp-ner-popup">
  <div class="dp-ner-word" id="dp-ner-word-text"></div>
  <select id="dp-ner-label-select">
    <option value="">— none —</option>
    <option value="B-PER">B-PER (person start)</option>
    <option value="I-PER">I-PER (person cont.)</option>
    <option value="B-LOC">B-LOC (location start)</option>
    <option value="I-LOC">I-LOC (location cont.)</option>
    <option value="B-ORG">B-ORG (org start)</option>
    <option value="I-ORG">I-ORG (org cont.)</option>
  </select>
  <div class="dp-ner-actions">
    <button id="dp-ner-save-btn">Save</button>
    <button id="dp-ner-cancel-btn">Cancel</button>
  </div>
</div>

<!-- OCR edit popup -->
<div id="ocr-popup">
  <div class="ocr-popup-original" id="ocr-popup-original"></div>
  <input type="text" id="ocr-popup-input" placeholder="Corrected text… (Enter to save)">
  <div class="ocr-popup-actions">
    <button id="ocr-popup-confirm" class="button default">Confirm</button>
    <button id="ocr-popup-ditto"   class="button">Ditto</button>
    <button id="ocr-popup-delete"  class="button" style="color:#a00">Delete</button>
    <button id="ocr-popup-cancel"  class="button">Cancel</button>
    <span class="ocr-popup-hint">Enter · Esc</span>
  </div>
</div>

<!-- OCR selection bar (multi-select actions) -->
<div id="ocr-merge-bar">
  <label id="ocr-merge-label">2 words selected</label>
  <button id="ocr-rerun-ocr"   class="button">Rerun OCR</button>
  <button id="ocr-bulk-ditto"  class="button">Ditto</button>
  <button id="ocr-bulk-delete" class="button" style="color:#a00">Delete</button>
  <button id="ocr-merge-cancel" class="button">Cancel</button>
  <span class="merge-bar-hint">Esc · ⌫</span>
</div>

{% if image_url %}
<script>
window.VIEWER_CONFIG = {
  citations:       {{ citations_json }},
  ocrWords:        {{ ocr_words_json }},
  hasRepair:       {{ ocr_record_pk|default:"null" }} !== null,
  prevUrl:         {{ prev_url_json }},
  nextUrl:         {{ next_url_json }},
  tags:            {{ tags_json }},
  pageList:        {{ page_list_json|default:"null" }},
  currentPagePk:   {{ tag_source_id }},
  tagCreateUrl:    "{{ tag_create_url }}",
  tagUpdateUrl:    "{{ tag_update_url }}",
  tagDeleteUrl:    "{{ tag_delete_url }}",
  nerCorrectUrl:   "{{ ner_correct_url }}",
  tagSourceTypeId: {{ tag_source_type_id }},
  tagSourceId:     {{ tag_source_id }},
  csrfToken:       "{{ csrf_token }}",
  usePreprocessedBbox: {% if use_preprocessed_bbox %}true{% else %}false{% endif %},
{% if ocr_record_pk %}
  correctUrl:        "{{ ocr_correct_url }}",
  deleteUrl:         "{{ ocr_delete_url }}",
  addWordUrl:        "{{ ocr_add_word_url }}",
  markAsDittoUrl:    "{{ ocr_mark_as_ditto_url }}",
  bulkDittoUrl:      "{{ ocr_bulk_ditto_url }}",
  bulkDeleteUrl:     "{{ ocr_bulk_delete_url }}",
  rerunSelectionUrl: "{{ ocr_rerun_selection_url }}",
{% endif %}
};
</script>
<script src="{% static 'grime/viewer.js' %}"></script>
{% endif %}