{{define "detail.html"}}
{{template "layout_head" .}}
{{/* Detail sidebar: image tags grouped by category + related tags */}}
<div id="sidebar-inner" class="detail-sidebar-inner">
  {{template "partials/detail_sidebar.html" .}}
</div>
{{template "layout_mid" .}}

<div id="detail-page"{{if .RefURL}} data-ref="{{.RefURL}}"{{end}}>
  {{/* Search bar: mirrors the gallery's #gallery-header so the input stays
       visually in place when switching between gallery and detail. Plain
       GET submit to / - no HTMX, since detail has no #gallery-grid target.
       The tag-suggest dropdown uses the same endpoint and ids gallery does
       so applySearchSuggest and initSuggestDismiss work unchanged. */}}
  <div id="gallery-header">
    <form id="search-form" action="/" method="GET">
      <div class="search-input-wrap">
        <input type="text" name="q" id="search-input" value="{{.BackQuery}}" placeholder="Search tags…" autocomplete="off"
               hx-get="/internal/search/suggest"
               hx-trigger="input changed delay:200ms"
               hx-target="#search-suggest"
               hx-swap="innerHTML"
               hx-push-url="false"
               hx-include="this"
               onkeydown="handleSuggestKey(event, 'search-suggest', 'search-input')">
        <div id="search-suggest" class="suggest-dropdown search-suggest-dropdown"></div>
      </div>
      <select name="sort" id="search-sort">
        <option value="newest"   {{if eq .BackSort "newest"}}selected{{end}}>Newest</option>
        <option value="filesize" {{if eq .BackSort "filesize"}}selected{{end}}>File size</option>
        <option value="order"    {{if eq .BackSort "order"}}selected{{end}}>Collection order</option>
      </select>
      <select name="order">
        <option value="desc" {{if ne .BackOrder "asc"}}selected{{end}}>↓</option>
        <option value="asc"  {{if eq .BackOrder "asc"}}selected{{end}}>↑</option>
      </select>
      <button type="submit">Search</button>
    </form>
  </div>

  {{/* Missing image banner */}}
  {{if .Image.IsMissing}}
  <div class="missing-banner">
    <span>⚠ This file is no longer present on disk.</span>
    <button class="btn-danger btn-sm"
            hx-delete="/images/{{.Image.ID}}"
            hx-swap="none"
            hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}'
            hx-confirm="Remove this missing image from the library?"
            data-confirm-ok="Remove">Remove from library</button>
  </div>
  {{end}}

  <div id="detail-flash"></div>
  {{/* Lookup / source-fetch outcomes and errors sit with the action flash so
       every job result reads from one spot; the tag-editor lookup's pending
       pill renders in #fetch-pending below the add-tag bar instead. */}}
  {{if .MonloaderPaired}}<div id="fetch-status" class="fetch-status"></div>{{end}}

  {{/* Top bar: back link | prev/next + download/fav (mirrors body column layout) */}}
  <div class="detail-topbar">
    <div class="detail-nav-group">
      {{if .RefURL}}
      <a href="{{.RefURL}}" class="back-link">‹ Previous image</a>
      {{else if or .BackQuery .BackSort}}
      <a href="/?q={{urlQ .BackQuery}}&sort={{.BackSort}}&order={{.BackOrder}}{{if .BackPage}}&page={{.BackPage}}{{end}}{{if .BackSeed}}&seed={{.BackSeed}}{{end}}#img-{{.Image.ID}}" class="back-link">‹ Search</a>
      {{else}}
      <a href="/#img-{{.Image.ID}}" class="back-link">‹ Search</a>
      {{end}}
      {{if .Filename}}
      <span class="detail-nav-sep">/</span>
      <span class="detail-filename mono-small" title="{{.Filename}}">{{.Filename}}</span>
      {{end}}
    </div>
    <div class="detail-topbar-right">
      <div class="detail-meta-nav">
        {{if .PrevID}}
        <a href="/images/{{deref64 .PrevID}}?back_q={{urlQ .BackQuery}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}"
           class="nav-arrow" title="Previous image (←)">← Prev</a>
        {{else}}
        <span class="nav-arrow nav-arrow-placeholder" aria-hidden="true">← Prev</span>
        {{end}}
        {{if .NextID}}
        <a href="/images/{{deref64 .NextID}}?back_q={{urlQ .BackQuery}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}"
           class="nav-arrow" title="Next image (→)">Next →</a>
        {{else}}
        <span class="nav-arrow nav-arrow-placeholder" aria-hidden="true">Next →</span>
        {{end}}
      </div>
      <div class="detail-actions">
        <form id="inbox-form" hx-post="/images/{{.Image.ID}}/inbox"
              hx-target="#inbox-btn" hx-swap="outerHTML"
              hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}' style="display:inline">
          <button type="submit" id="inbox-btn" class="btn-inbox{{if .Image.IsInbox}} active{{end}}"
                  title="{{if .Image.IsInbox}}Archive (i){{else}}Send to inbox (i){{end}}">
            {{if .Image.IsInbox}}In inbox{{else}}Archived{{end}}
          </button>
        </form>
        <form id="fav-form" hx-post="/images/{{.Image.ID}}/favorite"
              hx-target="#fav-btn" hx-swap="outerHTML"
              hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}' style="display:inline">
          <button type="submit" id="fav-btn" class="btn-fav{{if .Image.IsFavorited}} active{{end}}"
                  title="{{if .Image.IsFavorited}}Unfavorite (f){{else}}Favorite (f){{end}}">
            {{if .Image.IsFavorited}}♥{{else}}♡{{end}}
          </button>
        </form>
        {{if and (not (or (eq .Image.FileType "mp4") (eq .Image.FileType "webm"))) (not .IsManga) (not .Image.IsMissing)}}
        <button type="button" class="btn-sm btn-view" title="View image (v)"
                onclick="openLightbox(null, '/images/{{.Image.ID}}/file')">⛶</button>
        {{end}}
        <a href="/images/{{.Image.ID}}/file" download class="btn-sm" title="Download image">⤓</a>
      </div>
    </div>
  </div>

  <dialog id="source-dialog">
    <form id="source-form" hx-post="/images/{{.Image.ID}}/sources/set"
          hx-target="#source-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'source-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="source-prev-site" name="prev_site" value="">
      <input type="hidden" id="source-prev-post" name="prev_post" value="">
      <input type="hidden" id="source-post" name="post_id" value="">
      <p>Source: <strong id="source-dialog-title">add</strong></p>
      <div class="field">
        <label>Source label (max 200 chars)</label>
        {{template "suggest_input" dict "Name" "site" "InputID" "source-site-input" "Endpoint" "/internal/source/suggest" "SuggestID" "source-suggest"}}
      </div>
      <div class="field">
        <label>URL (must start with http:// or https://; max 2048 chars)</label>
        <input id="source-url-input" type="url" name="url" maxlength="2048" placeholder="https://...">
      </div>
      <div id="source-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('source-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="collection-dialog">
    <form id="collection-form" hx-post="/images/{{.Image.ID}}/collections/set"
          hx-target="#collection-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'collection-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="collection-prev" name="prev" value="">
      <p>Collection: <strong id="collection-dialog-title">add</strong></p>
      <div class="field">
        <label>Collection label (max 200 chars)</label>
        {{template "suggest_input" dict "Name" "collection" "InputID" "collection-name-input" "Endpoint" "/internal/collection/suggest" "SuggestID" "collection-suggest"}}
      </div>
      <div class="field">
        <label>Order within collection (optional, 1 or higher)</label>
        <input id="collection-order-input" type="number" name="collection_order" min="1">
      </div>
      <div id="collection-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('collection-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="commentary-dialog">
    <form id="commentary-form" hx-post="/images/{{.Image.ID}}/commentary/set"
          hx-target="#commentary-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'commentary-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="commentary-post" name="post_id" value="">
      <input type="hidden" id="commentary-site" name="site" value="">
      <p>Commentary: <strong id="commentary-dialog-site"></strong></p>
      <div class="field">
        <label>Commentary text</label>
        <textarea id="commentary-body" name="commentary" rows="6" maxlength="10000"></textarea>
      </div>
      <div id="commentary-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('commentary-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="original-dialog">
    <form id="original-form" hx-post="/images/{{.Image.ID}}/original/set"
          hx-target="#original-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'original-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="original-post" name="post_id" value="">
      <input type="hidden" id="original-site" name="site" value="">
      <p>Original source: <strong id="original-dialog-site"></strong></p>
      <div class="field">
        <label>Where the artist first posted it (one per line; max 2048 chars)</label>
        <textarea id="original-body" name="original" rows="2" maxlength="2048"></textarea>
      </div>
      <div id="original-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('original-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="annotation-dialog">
    <form id="annotation-form" hx-post="/images/{{.Image.ID}}/annotations/set"
          hx-target="#annotation-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'annotation-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="annotation-id" name="id" value="">
      <p><span id="annotation-dialog-title">Add</span> annotation</p>
      <p class="field-hint">Position and size in original-image pixels{{if .Image.Width}} (image is {{deref .Image.Width}} × {{deref .Image.Height}}){{end}}.</p>
      <div class="field">
        <label>x, y, width, height</label>
        <div class="annotation-coord-row">
          <input id="annotation-x" type="number" name="x" min="0" placeholder="x" autocomplete="off">
          <input id="annotation-y" type="number" name="y" min="0" placeholder="y" autocomplete="off">
          <input id="annotation-w" type="number" name="w" min="1" placeholder="width" autocomplete="off">
          <input id="annotation-h" type="number" name="h" min="1" placeholder="height" autocomplete="off">
        </div>
      </div>
      <div class="field">
        <label>Text</label>
        <textarea id="annotation-body" name="body" rows="3" maxlength="2000"></textarea>
      </div>
      <div id="annotation-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('annotation-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="note-dialog">
    <form id="note-form" hx-post="/images/{{.Image.ID}}/note"
          hx-target="#note-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'note-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <p>Note</p>
      <div class="field">
        <label>Your note (max 10000 chars)</label>
        <textarea id="note-body" name="note" rows="6" maxlength="10000"></textarea>
      </div>
      <div id="note-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('note-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="image-original-dialog">
    <form id="image-original-form" hx-post="/images/{{.Image.ID}}/original-source"
          hx-target="#image-original-error"
          hx-swap="innerHTML"
          hx-on::after-request="onExternalEditResponse(event, 'image-original-dialog')">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <p>Original source</p>
      <div class="field">
        <label>Where the artist first posted it (a URL; max 2048 chars)</label>
        <input id="image-original-body" type="url" name="original" maxlength="2048" placeholder="https://...">
      </div>
      <div id="image-original-error"></div>
      <div class="dialog-actions">
        <button type="submit">Save</button>
        <button type="button" onclick="document.getElementById('image-original-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>
  <script>
  document.addEventListener('click', function(e) {
    if (!e.target.closest) return;
    var ec = e.target.closest('.btn-edit-commentary');
    if (ec) {
      document.getElementById('commentary-site').value = ec.dataset.site || '';
      document.getElementById('commentary-dialog-site').textContent = ec.dataset.site || 'source';
      document.getElementById('commentary-post').value = ec.dataset.post || '';
      document.getElementById('commentary-body').value = ec.dataset.commentary || '';
      clearSlots('commentary-error');
      document.getElementById('commentary-dialog').showModal();
      return;
    }
    var eo = e.target.closest('.btn-edit-original');
    if (eo) {
      document.getElementById('original-site').value = eo.dataset.site || '';
      document.getElementById('original-dialog-site').textContent = eo.dataset.site || 'source';
      document.getElementById('original-post').value = eo.dataset.post || '';
      document.getElementById('original-body').value = eo.dataset.original || '';
      clearSlots('original-error');
      document.getElementById('original-dialog').showModal();
      return;
    }
    var en = e.target.closest('.btn-edit-note');
    if (en) {
      document.getElementById('note-body').value = en.dataset.note || '';
      clearSlots('note-error');
      document.getElementById('note-dialog').showModal();
      return;
    }
    var eio = e.target.closest('.btn-edit-image-original');
    if (eio) {
      document.getElementById('image-original-body').value = eio.dataset.original || '';
      clearSlots('image-original-error');
      document.getElementById('image-original-dialog').showModal();
    }
  });
  </script>

  {{if .EnabledTaggers}}
  <dialog id="autotag-dialog">
    <form hx-post="/images/{{.Image.ID}}/autotag"
          hx-swap="none"
          hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}'
          hx-on::after-request="if(event.detail.successful)document.getElementById('autotag-dialog').close()">
      <p>Auto-tag this image. Pick which tagger to run.</p>
      <div class="field">
        <label style="display:block"><input type="radio" name="tagger_name" value="" checked> All enabled taggers</label>
        {{range .EnabledTaggers}}<label style="display:block"><input type="radio" name="tagger_name" value="{{.Name}}"> {{.Name}}</label>{{end}}
      </div>
      <div class="dialog-actions">
        <button type="submit">Auto-tag</button>
        <button type="button" onclick="document.getElementById('autotag-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>
  {{end}}

  <dialog id="relation-edit-dialog">
    <form hx-post="/relations/add"
          hx-target="#relation-edit-error"
          hx-swap="innerHTML"
          hx-on::after-request="onRelationEditResponse(event)">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" name="direction" id="relation-edit-direction" value="ab">
      <p>Declare a <strong>relation</strong> between this image and another.</p>
      <div class="relation-edit-grid" id="relation-edit-grid">
        <div class="relation-edit-side" data-side="self">
          <h4>This image</h4>
          <div class="relation-edit-thumb-slot">
            <img class="relation-edit-thumb" id="relation-edit-thumb-self"
                 src="/thumbnails/{{.ActiveGallery}}/{{.Image.ID}}.jpg"
                 alt="image {{.Image.ID}}" loading="lazy">
          </div>
          <input type="number" name="a" id="relation-parent-id" value="{{.Image.ID}}" readonly required>
        </div>
        <div class="relation-edit-swap">
          <button type="button" class="btn-link-accent" id="relation-edit-swap-btn"
                  title="Swap which side is left" aria-label="Swap which side is left">⇄</button>
        </div>
        <div class="relation-edit-side" data-side="other">
          <h4>Other image</h4>
          <div class="relation-edit-thumb-slot">
            <img class="relation-edit-thumb" id="relation-edit-thumb-other"
                 alt="" loading="lazy" hidden>
          </div>
          <input type="text" name="b" id="relation-other-id" inputmode="numeric"
                 pattern="[0-9]+" required
                 placeholder="image id">
        </div>
      </div>
      <div class="field">
        <label>Relation type</label>
        <label><input type="radio" name="type" value="duplicate" checked> Same image (Duplicate)</label>
        <label><input type="radio" name="type" value="alternate"> Variant (Alternate)</label>
        <label><input type="radio" name="type" value="version"> Newer revision (Version)</label>
        <label><input type="radio" name="type" value="derivative"> Based on (Derivative)</label>
      </div>
      <p class="relation-edit-summary field-hint" id="relation-edit-summary"
         data-self-id="{{.Image.ID}}">Pick the other image and a relation type.</p>
      <div id="relation-edit-error"></div>
      <div class="dialog-actions">
        <button type="submit" name="force" value="true" id="relation-edit-overwrite-btn"
                class="btn-danger" hidden>Overwrite existing relation</button>
        <button type="submit">Add relation</button>
        <button type="button" onclick="document.getElementById('relation-edit-dialog').close()">Cancel</button>
      </div>
    </form>
    <script>
    (function() {
      var dlg = document.getElementById('relation-edit-dialog');
      if (!dlg) return;
      var grid = document.getElementById('relation-edit-grid');
      var parentInput = document.getElementById('relation-parent-id');
      var otherInput = document.getElementById('relation-other-id');
      var dirInput = document.getElementById('relation-edit-direction');
      var summary = document.getElementById('relation-edit-summary');
      var swap = document.getElementById('relation-edit-swap-btn');
      var otherThumb = document.getElementById('relation-edit-thumb-other');
      var gallery = {{.ActiveGallery}};
      var selfID = summary && summary.dataset.selfId ? summary.dataset.selfId : '';

      function sideLabel(input) {
        if (!input) return '';
        var v = (input.value || '').trim();
        if (v === '' || v === '0') return v === '' ? '(other image)' : '#' + v;
        if (v === selfID) return 'this image';
        return '#' + v;
      }
      function selectedType() {
        var r = dlg.querySelector('input[name="type"]:checked');
        return r ? r.value : 'duplicate';
      }
      function refreshSummary() {
        if (!summary) return;
        // "This image" stays anchored to the parentInput; the swap only
        // toggles which side counts as the operator's left so the
        // directional verbs read the way they will commit.
        var left = sideLabel(parentInput);
        var right = sideLabel(otherInput);
        if (dirInput && dirInput.value === 'ba') {
          var tmp = left; left = right; right = tmp;
        }
        var t = selectedType();
        var s;
        switch (t) {
          case 'alternate':
            s = left + ' and ' + right + ' are variants.';
            break;
          case 'version':
            s = right + ' is a newer revision of ' + left + '.';
            break;
          case 'derivative':
            s = right + ' is based on ' + left + '.';
            break;
          default:
            // Duplicate: the side passed first ("left") becomes the
            // original on a fresh group, so name it explicitly.
            s = right + ' is the same image as ' + left + ' (' + left + ' is the original).';
        }
        summary.textContent = s;
      }
      if (swap) swap.addEventListener('click', function() {
        if (!dirInput || !grid) return;
        dirInput.value = (dirInput.value === 'ba') ? 'ab' : 'ba';
        grid.classList.toggle('relation-edit-grid-swapped', dirInput.value === 'ba');
        refreshSummary();
      });
      // Pasted "http://host/images/12" or "/images/12" inputs collapse
      // to "12" so the field always submits a bare integer.
      function normaliseInput() {
        if (!otherInput) return;
        var raw = (otherInput.value || '').trim();
        var m = raw.match(/\/images\/(\d+)(?:[\/?#]|$)/);
        if (m && m[1] && m[1] !== raw) {
          otherInput.value = m[1];
        }
      }
      function refreshOtherThumb() {
        if (!otherThumb || !otherInput) return;
        var raw = (otherInput.value || '').trim();
        if (!/^\d+$/.test(raw) || raw === '0') {
          otherThumb.hidden = true;
          otherThumb.removeAttribute('src');
          otherThumb.alt = '';
          return;
        }
        otherThumb.alt = 'image ' + raw;
        otherThumb.hidden = false;
        otherThumb.src = '/thumbnails/' + encodeURIComponent(gallery) + '/' + raw + '.jpg';
      }
      if (otherInput) otherInput.addEventListener('input', function() {
        normaliseInput();
        refreshOtherThumb();
        refreshSummary();
      });
      if (otherThumb) otherThumb.addEventListener('error', function() {
        otherThumb.hidden = true;
      });
      dlg.querySelectorAll('input[name="type"]').forEach(function(r) {
        r.addEventListener('change', refreshSummary);
      });
      // Refresh after the dialog opens so the [Add a relation] click in
      // main.js (which resets values, then showModal()) lands a sentence
      // matching the post-reset state. Also reset the direction so a
      // previously-swapped session doesn't leak across re-opens.
      var open = dlg.showModal.bind(dlg);
      dlg.showModal = function() {
        if (dirInput) dirInput.value = 'ab';
        if (grid) grid.classList.remove('relation-edit-grid-swapped');
        open();
        refreshOtherThumb();
        refreshSummary();
      };
    })();
    </script>
  </dialog>

  <div class="detail-body">
    {{/* Left: media + nav */}}
    <div class="detail-main">
      {{/* Media */}}
      <div class="detail-media">
        {{if or (eq .Image.FileType "mp4") (eq .Image.FileType "webm")}}
        <video src="/images/{{.Image.ID}}/file" controls loop autoplay muted playsinline preload="auto" class="detail-video"
               onloadedmetadata="this.play().catch(function(){})">
          Your browser does not support video.
        </video>
        {{else if .IsManga}}
        <a href="/images/{{.Image.ID}}/read?page=1" title="Open in reader">
          <img src="/images/{{.Image.ID}}/page/1" alt="Cover of manga {{.Image.ID}}" class="detail-img"
               onerror="if(!this.dataset.fallback){this.dataset.fallback='1';this.src='/thumbnails/{{.ActiveGallery}}/{{.Image.ID}}.jpg';}else{this.onerror=null;}">
        </a>
        {{else}}
        <div class="detail-media-frame">
          <a href="/images/{{.Image.ID}}/file" target="_blank"{{if not .Image.IsMissing}} class="detail-img-link" onclick="return openLightbox(event, this.href)"{{end}}>
            <img src="/images/{{.Image.ID}}/file" alt="image {{.Image.ID}}" class="detail-img"
                 onerror="if(!this.dataset.fallback){this.dataset.fallback='1';this.src='/thumbnails/{{.ActiveGallery}}/{{.Image.ID}}.jpg';}else{this.onerror=null;}">
          </a>
          {{if .Annotations}}
          <div class="annotation-overlay">
            {{range .Annotations}}
            <div class="annotation-box" data-ann-id="{{.ID}}" style="{{.Style}}"><span class="annotation-body">{{.Body}}</span></div>
            {{end}}
          </div>
          {{end}}
        </div>
        {{if .Annotations}}
        <div class="annotation-controls"><button type="button" class="btn-link-accent annotation-toggle" onclick="toggleAnnotations(this)">[hide annotations]</button></div>
        {{end}}
        {{end}}
      </div>

      {{if .IsManga}}
      <div class="manga-actions">
        <a href="/images/{{.Image.ID}}/read?page=1{{.BackKVQS}}" class="btn-manga-action btn-read" title="Open in reader (R)">Open in reader <span class="btn-key-hint">(R)</span></a>
        {{if .Image.PageCount}}{{if gt (deref .Image.PageCount) 1}}
        <a href="/images/{{.Image.ID}}/pages{{.BackQS}}" class="btn-manga-action btn-pages" title="See all pages (P)">See all pages <span class="btn-key-hint">(P)</span></a>
        {{end}}{{end}}
      </div>
      {{end}}

      {{/* The operator's own note and hand-drawn annotations, under the image
           like a booru post page. Per-source commentary and pulled annotations
           live in the source panels beside the metadata. */}}
      <section class="detail-commentary">
        <div class="commentary-block detail-note">
          <div class="commentary-head">
            <span class="commentary-label">Personal note</span>
            {{if .Image.Note}}
            <button type="button" class="btn-link-accent btn-edit-note" data-note="{{.Image.Note}}" title="Edit note">[edit]</button>
            {{else}}
            <button type="button" class="btn-link-accent btn-edit-note" data-note="" title="Add note">[+ add note]</button>
            {{end}}
          </div>
          {{if .Image.Note}}<div class="commentary-body">{{.Image.Note}}</div>{{end}}
        </div>
        <div class="commentary-block detail-annotations">
          <div class="commentary-head">
            <span class="commentary-label">Annotations</span>
            <button type="button" class="btn-link-accent btn-add-annotation" title="Add an annotation">[+ add annotation]</button>
          </div>
          {{if .ManualAnnotations}}
          <ul class="collection-list operator-annotation-list">
            {{range .ManualAnnotations}}
            <li class="collection-item annotation-entry" data-ann-id="{{.ID}}">
              <span class="meta-annotation-body" title="{{.Body}}">{{if .Body}}{{.Body}}{{else}}(no text){{end}}</span>
              <button type="button" class="btn-link-accent btn-edit-annotation" data-id="{{.ID}}" data-x="{{.X}}" data-y="{{.Y}}" data-w="{{.W}}" data-h="{{.H}}" data-body="{{.Body}}" title="Edit">[edit]</button>
              <form method="POST" action="/images/{{$.Image.ID}}/annotations/remove"
                    hx-post="/images/{{$.Image.ID}}/annotations/remove" hx-swap="none"
                    hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                    hx-confirm="Remove this annotation?" data-confirm-ok="Remove"
                    style="display:inline">
                <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                <input type="hidden" name="id" value="{{.ID}}">
                <button type="submit" class="btn-link-accent" title="Remove annotation">[×]</button>
              </form>
            </li>
            {{end}}
          </ul>
          {{end}}
        </div>
      </section>

      {{/* Tag editor */}}
      <div class="tag-editor-section">
        <h3>Tags</h3>
        {{template "partials/tag_list.html" (dict "ImageID" .Image.ID "ImageTags" .ImageTags "Aliases" .Aliases "CSRFToken" .CSRFToken)}}
        <form id="add-tag-form" class="add-tag-form"
              hx-post="/images/{{.Image.ID}}/tags"
              hx-target="#image-tags"
              hx-swap="outerHTML">
          <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
          <div class="add-tag-input-wrap">
            <input type="text" name="tag" id="tag-input" placeholder="Add tag(s)..." autocomplete="off"
                   hx-get="/internal/tags/suggest"
                   hx-trigger="input changed delay:200ms"
                   hx-target="#tag-suggest-dropdown"
                   hx-swap="innerHTML"
                   hx-include="this"
                   onkeydown="handleSuggestKey(event, 'tag-suggest-dropdown', 'tag-input')">
            <div id="tag-suggest-dropdown" class="suggest-dropdown tag-suggest-dropdown"></div>
          </div>
          <button type="submit">Add</button>
          {{if .EnabledTaggers}}
          <button type="button" class="btn-autotag" title="Auto-tag this image (t)"
                  onclick="document.getElementById('autotag-dialog').showModal()">Auto-tag</button>
          {{end}}
          {{if .MonloaderPaired}}
          {{if .MonloaderPTR}}
          <button type="button" class="btn-hash-lookup monloader-accent"
                  title="Lookup this file via monloader"
                  onclick="document.getElementById('lookup-dialog').showModal()">Lookup</button>
          {{else}}
          <button type="button" class="btn-hash-lookup monloader-accent"
                  title="Lookup this file's tags and source on online boorus via monloader"
                  hx-post="/images/{{.Image.ID}}/lookup" hx-vals='{"backend":"all"}'
                  hx-target="#fetch-pending" hx-swap="innerHTML">Lookup</button>
          {{end}}
          {{end}}
        </form>
        {{if .MonloaderPaired}}<div id="fetch-pending" class="fetch-status"></div>{{end}}
        {{if and .MonloaderPaired .MonloaderPTR}}
        <dialog id="lookup-dialog">
          <form hx-post="/images/{{.Image.ID}}/lookup"
                hx-target="#fetch-pending" hx-swap="innerHTML"
                hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}'
                hx-on::after-request="document.getElementById('lookup-dialog').close()">
            <p>Look up this file's tags and source via monloader:</p>
            {{if .MonloaderPTRSyncing}}<p class="field-hint">The Public Tag Repository is still syncing, so its answers come from partial data.</p>{{end}}
            <div class="field">
              <label style="display:block"><input type="radio" name="backend" value="all" checked> Both (PTR and online boorus)</label>
              <label style="display:block"><input type="radio" name="backend" value="ptr"> Public Tag Repository only</label>
              <label style="display:block"><input type="radio" name="backend" value="booru"> Online boorus only</label>
            </div>
            <div class="dialog-actions">
              <button type="submit" autofocus>Lookup</button>
              <button type="button" onclick="document.getElementById('lookup-dialog').close()">Cancel</button>
            </div>
          </form>
        </dialog>
        {{end}}
      </div>

      {{/* Danger zone: delete + a remove-tags dialog. Rendered via a partial so
           HTMX tag-list updates can refresh it via OOB swap. */}}
      {{template "partials/detail_danger_zone.html" (dict "ImageID" .Image.ID "ImageTags" .ImageTags "HasUserTags" .HasUserTags "ImageTaggers" .ImageTaggers "ImageSources" .ImageSources "CanTransfer" (gt (len .Galleries) 1) "CSRFToken" .CSRFToken "BackQuery" .BackQuery "BackSort" .BackSort "BackOrder" .BackOrder "BackPage" .BackPage "BackSeed" .BackSeed "Ref" .Ref "CurrentFolder" .Image.FolderPath)}}
      {{if gt (len .Galleries) 1}}
      <dialog id="transfer-image-dialog">
        <p>Transfer this image to another gallery:</p>
        <p class="field-hint">The image and its tags, sources and notes are copied into the target gallery.</p>
        <p class="field-hint" style="color:var(--error)">Relations and collections are not carried over.</p>
        <form id="transfer-image-form"
              hx-post="/images/{{.Image.ID}}/transfer"
              hx-swap="none"
              hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}'>
          <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
          <div class="field">
            <label>Target gallery</label>
            <select name="target" id="transfer-image-target" class="upload-wide-input">
              {{range .Galleries}}{{if ne .Name $.ActiveGallery}}<option value="{{.Name}}">{{.Name}}</option>{{end}}{{end}}
            </select>
          </div>
          <div class="field">
            <label><input type="checkbox" name="remove_after" id="transfer-image-remove" value="1"> Remove from this gallery after transfer</label>
          </div>
          <div class="dialog-actions">
            <button type="submit">Transfer</button>
            <button type="button" onclick="document.getElementById('transfer-image-dialog').close()">Cancel</button>
          </div>
        </form>
      </dialog>
      {{end}}
      <script>
      function openTransferImageDialog() {
        var dlg = document.getElementById('transfer-image-dialog');
        if (!dlg) return;
        var rm = document.getElementById('transfer-image-remove');
        if (rm) rm.checked = false;
        dlg.showModal();
      }
      function openRemoveTagsDialog() {
        var dlg = document.getElementById('remove-tags-dialog');
        if (!dlg) return;
        // Default to the operator's own tags when present, else the first
        // scoped option - never the nuclear "All tags", and don't re-arm it
        // when the dialog is reopened.
        var pref = dlg.querySelector('input[name="mode"][value="user"]')
                || dlg.querySelector('input[name="mode"]');
        if (pref) pref.checked = true;
        dlg.showModal();
      }
      function confirmRemoveTags() {
        var dlg = document.getElementById('remove-tags-dialog');
        if (!dlg) return;
        var id = dlg.dataset.imageId;
        var checked = dlg.querySelector('input[name="mode"]:checked');
        var mode = checked ? checked.value : 'all';
        var url;
        switch (mode) {
          case 'user':   url = '/images/' + id + '/user-tags'; break;
          case 'source': url = '/images/' + id + '/source-tags?sources=' + encodeURIComponent(document.getElementById('remove-tags-source').value); break;
          case 'tagger': url = '/images/' + id + '/auto-tags?taggers=' + encodeURIComponent(document.getElementById('remove-tags-tagger').value); break;
          default:       url = '/images/' + id + '/tags';
        }
        htmx.ajax('DELETE', url, {target: '#image-tags', swap: 'outerHTML', headers: {'X-CSRF-Token': dlg.dataset.csrf}});
        dlg.close();
      }
      function openMoveImageDialog() {
        var dlg = document.getElementById('move-image-dialog');
        var input = document.getElementById('move-image-folder');
        if (!dlg || !input) return;
        input.value = dlg.dataset.currentFolder || '';
        clearSlots('move-image-suggest');
        dlg.showModal();
        input.focus();
        input.select();
      }
      function openSourceDialog(site, post, url) {
        var dlg = document.getElementById('source-dialog');
        if (!dlg) return;
        document.getElementById('source-prev-site').value = site || '';
        document.getElementById('source-prev-post').value = post || '';
        document.getElementById('source-post').value = post || '';
        document.getElementById('source-site-input').value = site || '';
        document.getElementById('source-url-input').value = url || '';
        document.getElementById('source-dialog-title').textContent = (site || url) ? 'edit' : 'add';
        clearSlots('source-suggest', 'source-error');
        dlg.showModal();
        var input = document.getElementById('source-site-input');
        input.focus();
        input.select();
      }
      document.addEventListener('click', function(e) {
        if (!e.target.closest) return;
        if (e.target.closest('.btn-add-source')) { openSourceDialog('', '', ''); return; }
        var ed = e.target.closest('.btn-edit-source');
        if (ed) openSourceDialog(ed.dataset.site, ed.dataset.post, ed.dataset.url);
      });
      function openCollectionDialog(name, order) {
        var dlg = document.getElementById('collection-dialog');
        if (!dlg) return;
        document.getElementById('collection-prev').value = name || '';
        document.getElementById('collection-name-input').value = name || '';
        document.getElementById('collection-order-input').value = order || '';
        document.getElementById('collection-dialog-title').textContent = name ? 'edit ' + name : 'add';
        clearSlots('collection-suggest', 'collection-error');
        dlg.showModal();
        var input = document.getElementById('collection-name-input');
        input.focus();
        input.select();
      }
      document.addEventListener('click', function(e) {
        if (!e.target.closest) return;
        if (e.target.closest('.btn-add-collection')) { openCollectionDialog('', ''); return; }
        var ed = e.target.closest('.btn-edit-collection');
        if (ed) openCollectionDialog(ed.dataset.name, ed.dataset.order);
      });
      function openAnnotationDialog(id, x, y, w, h, body) {
        var dlg = document.getElementById('annotation-dialog');
        if (!dlg) return;
        document.getElementById('annotation-id').value = id || '';
        document.getElementById('annotation-x').value = x || '';
        document.getElementById('annotation-y').value = y || '';
        document.getElementById('annotation-w').value = w || '';
        document.getElementById('annotation-h').value = h || '';
        document.getElementById('annotation-body').value = body || '';
        document.getElementById('annotation-dialog-title').textContent = id ? 'Edit' : 'Add';
        clearSlots('annotation-error');
        dlg.showModal();
        document.getElementById('annotation-x').focus();
      }
      document.addEventListener('click', function(e) {
        if (!e.target.closest) return;
        if (e.target.closest('.btn-add-annotation')) { openAnnotationDialog('', '', '', '', '', ''); return; }
        var ed = e.target.closest('.btn-edit-annotation');
        if (ed) openAnnotationDialog(ed.dataset.id, ed.dataset.x, ed.dataset.y, ed.dataset.w, ed.dataset.h, ed.dataset.body);
      });
      // Hovering an annotation entry (source panel or operator list) highlights
      // its box on the image.
      function setAnnHighlight(id, on) {
        var box = document.querySelector('.annotation-box[data-ann-id="' + id + '"]');
        if (box) box.classList.toggle('ann-highlight', on);
      }
      document.addEventListener('mouseover', function(e) {
        var li = e.target.closest && e.target.closest('.annotation-entry[data-ann-id]');
        if (li) setAnnHighlight(li.dataset.annId, true);
      });
      document.addEventListener('mouseout', function(e) {
        var li = e.target.closest && e.target.closest('.annotation-entry[data-ann-id]');
        if (li && (!e.relatedTarget || !li.contains(e.relatedTarget))) setAnnHighlight(li.dataset.annId, false);
      });
      </script>
    </div>

    {{/* Right: metadata panel */}}
    <div class="detail-meta-col">
    <details class="detail-meta-panel" open>
      <summary>Metadata</summary>
      <div class="detail-meta-content">

        {{/* Basic metadata table */}}
        <table class="meta-table">
          <tbody>
            <tr><th>Image ID</th><td>
              <button type="button" class="mono-small sha-copyable"
                      data-copy="{{.Image.ID}}" title="Click to copy">{{.Image.ID}}</button>
              <span class="copy-flash" hidden>copied</span>
            </td></tr>
            <tr><th>Path</th><td class="mono-small meta-path" title="{{.Image.CanonicalPath}}">{{.Image.CanonicalPath}}</td></tr>
            <tr><th>Type</th><td>{{.Image.FileType}}
              {{if and .Image.SourceType (ne .Image.SourceType "none")}}
                <span class="source-badge">AI</span>
                {{if eq .Image.SourceType "a1111,comfyui"}}
                  <span class="source-badge source-badge-sub">a1111</span>
                  <span class="source-badge source-badge-sub">comfyui</span>
                {{else}}
                  <span class="source-badge source-badge-sub">{{.Image.SourceType}}</span>
                {{end}}
              {{end}}
            </td></tr>
            {{if .Image.Width}}
            <tr><th>Resolution</th><td>{{deref .Image.Width}} × {{deref .Image.Height}}</td></tr>
            {{end}}
            {{if .Image.DurationSec}}
            <tr><th>Duration</th><td>{{printf "%.1f" (deref64f .Image.DurationSec)}} s</td></tr>
            {{end}}
            <tr><th>File size</th><td>{{humanBytes .Image.FileSize}}</td></tr>
            <tr><th>SHA-256</th><td>
              <button type="button" class="mono-small sha-truncated sha-copyable"
                      data-copy="{{.Image.SHA256}}" title="Click to copy">{{.Image.SHA256}}</button>
              <span class="copy-flash" hidden>copied</span>
            </td></tr>
            <tr><th>pHash</th><td>
              {{if .Image.Phash}}
                {{$hex := phashHex .Image.Phash}}
                <button type="button" class="mono-small sha-copyable" data-copy="{{$hex}}" title="Click to copy">{{$hex}}</button>
                <a href="/?q=phash:{{$hex}}~{{.PhashDistance}}" class="btn-link-accent" title="Search near-duplicates (Hamming distance {{.PhashDistance}})">[search near-duplicates]</a>
                <span class="copy-flash" hidden>copied</span>
              {{else}}
                <span class="field-hint">(not computed)</span>
                <form hx-post="/relations/phash/{{.Image.ID}}/recompute" hx-swap="none"
                      hx-on::after-request="if(event.detail.successful){window.location.reload()}" style="display:inline">
                  <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
                  <button type="submit" class="btn-link-accent">[backfill]</button>
                </form>
              {{end}}
            </td></tr>
            <tr><th>Ingested</th><td>{{localTime .Image.IngestedAt}}</td></tr>
            {{if .Image.Origin}}<tr><th>Added via</th><td>{{.Image.Origin}}</td></tr>{{end}}
            {{if and .IsManga .Image.PageCount}}
            <tr><th>Pages</th><td>{{deref .Image.PageCount}}</td></tr>
            {{end}}
            {{if .Image.AutoTaggedAt}}
            <tr><th>Auto-tagged</th><td>{{localTimePtr .Image.AutoTaggedAt}}</td></tr>
            {{end}}
            {{if .Image.IsMissing}}
            <tr><th>Status</th><td class="text-warning">⚠ File missing from disk</td></tr>
            {{end}}
          </tbody>
        </table>

        {{/* Editable fields sit below the read-only metadata so a click on
             [edit] is visually separated from the rest of the panel. */}}
        <hr class="meta-editable-separator">
        <table class="meta-table meta-editable">
          <tbody>
            <tr><th>Sources</th><td>
              {{if .Sources}}
              <ul class="collection-list source-list">
                {{range $i, $src := .Sources}}
                <li class="collection-item">
                  {{if .Site}}<a href="/?q={{urlQ (printf "source:\"%s\"" (qval .Site))}}" class="meta-source-value" title="Search this source">{{.Site}}</a>{{if gt .Similarity 0.0}} <span class="field-hint" title="Found by image similarity at {{printf "%.0f" .Similarity}}%">~{{printf "%.0f" .Similarity}}%</span>{{end}}{{if .URL}} <a href="{{.URL}}" target="_blank" rel="noopener noreferrer" class="btn-link-accent" title="{{.URL}}">[open]</a>{{end}}{{else}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer" class="meta-url-value">{{.URL}}</a>{{if gt .Similarity 0.0}} <span class="field-hint" title="Found by image similarity at {{printf "%.0f" .Similarity}}%">~{{printf "%.0f" .Similarity}}%</span>{{end}}{{end}}
                  {{if gt $i 0}}<form method="POST" action="/images/{{$.Image.ID}}/sources/primary"
                        hx-post="/images/{{$.Image.ID}}/sources/primary" hx-swap="none"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                        style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="site" value="{{.Site}}">
                    <input type="hidden" name="post_id" value="{{.PostID}}">
                    <button type="submit" class="btn-link-accent" title="Make this the primary source">[set primary]</button>
                  </form>{{end}}
                  {{if not (isPTRSite .Site)}}<button type="button" class="btn-link-accent btn-edit-source" data-site="{{.Site}}" data-post="{{.PostID}}" data-url="{{.URL}}" title="Edit">[edit]</button>{{end}}
                  {{if and .URL $.MonloaderPaired}}<form hx-post="/images/{{$.Image.ID}}/sources/fetch"
                        hx-target="#fetch-status" hx-swap="innerHTML"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}' style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="url" value="{{.URL}}">
                    <button type="submit" class="btn-link-accent monloader-accent" title="Refresh tags from this source via monloader">[refresh]</button>
                  </form>{{else if and $.MonloaderPaired (isPTRSite .Site)}}<form hx-post="/images/{{$.Image.ID}}/lookup"
                        hx-target="#fetch-status" hx-swap="innerHTML"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}' style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="backend" value="ptr">
                    <button type="submit" class="btn-link-accent monloader-accent" title="Refresh tags from the Public Tag Repository via monloader">[refresh]</button>
                  </form>{{end}}
                  <form method="POST" action="/images/{{$.Image.ID}}/sources/remove"
                        hx-post="/images/{{$.Image.ID}}/sources/remove" hx-swap="none"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                        hx-confirm="Remove this source?" data-confirm-ok="Remove"
                        style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="site" value="{{.Site}}">
                    <input type="hidden" name="post_id" value="{{.PostID}}">
                    <button type="submit" class="btn-link-accent" title="Remove this source">[×]</button>
                  </form>
                </li>
                {{end}}
              </ul>
              {{else}}<span class="field-hint">(none)</span>{{end}}
              <button type="button" class="btn-link-accent btn-add-source" title="Add a source">[+ add]</button>
            </td></tr>
            <tr><th>Original</th><td>
              {{if .Image.OriginalSource}}<a href="{{.Image.OriginalSource}}" target="_blank" rel="noopener noreferrer" class="meta-url-value" title="{{.Image.OriginalSource}}">{{urlDomain .Image.OriginalSource}}</a>{{else}}<span class="field-hint">(none)</span>{{end}}
              <button type="button" class="btn-link-accent btn-edit-image-original" data-original="{{.Image.OriginalSource}}" title="{{if .Image.OriginalSource}}Edit original source{{else}}Add original source{{end}}">{{if .Image.OriginalSource}}[edit]{{else}}[+ add]{{end}}</button>
              {{if .Image.OriginalSource}}<form method="POST" action="/images/{{.Image.ID}}/original-source"
                    hx-post="/images/{{.Image.ID}}/original-source" hx-swap="none"
                    hx-headers='{"X-CSRF-Token":"{{.CSRFToken}}"}'
                    hx-confirm="Remove the original source?" data-confirm-ok="Remove"
                    style="display:inline">
                <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
                <input type="hidden" name="original" value="">
                <button type="submit" class="btn-link-accent" title="Remove original source">[×]</button>
              </form>{{end}}
            </td></tr>
            <tr><th>Collections</th><td>
              {{if .Collections}}
              <ul class="collection-list">
                {{range .Collections}}
                <li class="collection-item">
                  <a href="/?q={{urlQ (printf "collection:\"%s\"" (qval .Name))}}" class="meta-source-value" title="Search this collection">{{.Name}}</a>{{if .Order}} <span class="series-pill-order">#{{deref .Order}}</span>{{end}}
                  <button type="button" class="btn-link-accent btn-edit-collection" data-name="{{.Name}}" data-order="{{if .Order}}{{deref .Order}}{{end}}" title="Edit">[edit]</button>
                  <form method="POST" action="/images/{{$.Image.ID}}/collections/remove"
                        hx-post="/images/{{$.Image.ID}}/collections/remove" hx-swap="none"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                        hx-confirm="Remove this image from {{.Name}}?" data-confirm-ok="Remove"
                        style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="collection" value="{{.Name}}">
                    <button type="submit" class="btn-link-accent" title="Remove from collection">[×]</button>
                  </form>
                </li>
                {{end}}
              </ul>
              {{else}}<span class="field-hint">(none)</span>{{end}}
              <button type="button" class="btn-link-accent btn-add-collection" title="Add to a collection">[+ add]</button>
            </td></tr>
          </tbody>
        </table>

        {{/* SD Generation metadata */}}
        {{if .SDMeta}}
        <details class="gen-details" open>
          <summary>► Generation data (SD / Forge)</summary>
          <div class="node-list">
            {{if .SDMeta.GenerationHash}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Generation hash</span>
                <a class="gen-hash-link" href="/?q=generated:{{.SDMeta.GenerationHash}}" title="Find images with the same recipe">{{.SDMeta.GenerationHash}}</a>
              </div>
            </div>
            {{end}}
            {{if .SDMeta.Prompt}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Prompt</span></div>
              <pre class="gen-text">{{.SDMeta.Prompt}}</pre>
            </div>
            {{end}}
            {{if .SDMeta.NegativePrompt}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Negative prompt</span></div>
              <pre class="gen-text">{{.SDMeta.NegativePrompt}}</pre>
            </div>
            {{end}}
            {{if .SDMeta.ParsedParams}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Parameters</span></div>
              <table class="node-params">
                {{range .SDMeta.ParsedParams}}
                <tr><td class="node-param-name">{{.Key}}</td><td class="node-param-value">
                  {{if isLongValue .Val}}<details class="long-value"><summary>{{truncate .Val 140}}…</summary><pre class="long-value-full">{{.Val}}</pre></details>{{else}}{{.Val}}{{end}}
                </td></tr>
                {{end}}
              </table>
            </div>
            {{else if or .SDMeta.Model .SDMeta.Seed .SDMeta.Sampler .SDMeta.Steps .SDMeta.CFGScale}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Parameters</span></div>
              <table class="node-params">
                {{if .SDMeta.Model}}<tr><td class="node-param-name">Model</td><td class="node-param-value">
                  {{if isLongValue .SDMeta.Model}}<details class="long-value"><summary>{{truncate .SDMeta.Model 140}}…</summary><pre class="long-value-full">{{.SDMeta.Model}}</pre></details>{{else}}{{.SDMeta.Model}}{{end}}
                </td></tr>{{end}}
                {{if .SDMeta.Seed}}<tr><td class="node-param-name">Seed</td><td class="node-param-value">{{deref64 .SDMeta.Seed}}</td></tr>{{end}}
                {{if .SDMeta.Sampler}}<tr><td class="node-param-name">Sampler</td><td class="node-param-value">{{.SDMeta.Sampler}}</td></tr>{{end}}
                {{if .SDMeta.Steps}}<tr><td class="node-param-name">Steps</td><td class="node-param-value">{{deref .SDMeta.Steps}}</td></tr>{{end}}
                {{if .SDMeta.CFGScale}}<tr><td class="node-param-name">CFG Scale</td><td class="node-param-value">{{printf "%.1f" (deref64f .SDMeta.CFGScale)}}</td></tr>{{end}}
              </table>
            </div>
            {{end}}
          </div>
        </details>
        {{end}}

        {{if .GenericMeta}}
        <details class="gen-details">
          <summary>► Other metadata</summary>
          <div class="node-list">
            <div class="node-entry">
              <table class="node-params">
                {{range .GenericMeta}}
                <tr><td class="node-param-name">{{.Key}}</td><td class="node-param-value">
                  {{if isLongValue .Val}}<details class="long-value"><summary>{{truncate .Val 140}}…</summary><pre class="long-value-full">{{.Val}}</pre></details>{{else}}{{.Val}}{{end}}
                </td></tr>
                {{end}}
              </table>
            </div>
          </div>
        </details>
        {{end}}

        {{if .ComfyMeta}}
        <details class="gen-details" open>
          <summary>► Generation data (ComfyUI)</summary>
          {{if .ComfyMeta.GenerationHash}}
          <div class="node-list">
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Generation hash</span>
                <a class="gen-hash-link" href="/?q=generated:{{.ComfyMeta.GenerationHash}}" title="Find images with the same recipe">{{.ComfyMeta.GenerationHash}}</a>
              </div>
            </div>
          </div>
          {{end}}
          {{if .ComfyNodes}}
          <div class="node-list">
            {{range .ComfyNodes}}
            <div class="node-entry" id="comfy-node-{{.Key}}">
              <div class="node-header"><span class="node-key">[{{.Key}}]</span> <span class="node-title">{{.Title}}</span>{{if ne .Title .ClassType}} <span class="node-class">{{.ClassType}}</span>{{end}}</div>
              {{if .Params}}
              <table class="node-params">
                {{range .Params}}
                <tr><td class="node-param-name">{{.Name}}</td><td class="node-param-value{{if .IsRef}} node-ref{{end}}">
                  {{if .IsRef}}<a href="#comfy-node-{{comfyRefTarget .Value}}" class="node-ref-link">{{.Value}}</a>{{else if isLongValue .Value}}<details class="long-value"><summary>{{truncate .Value 140}}…</summary><pre class="long-value-full">{{.Value}}</pre></details>{{else}}{{.Value}}{{end}}
                </td></tr>
                {{end}}
              </table>
              {{end}}
            </div>
            {{end}}
          </div>
          {{else}}
          <p class="field-hint">No workflow nodes extracted.</p>
          {{end}}
        </details>
        {{end}}

        {{if .MangaMeta}}
        <details class="gen-details" open>
          <summary>► Comic / manga metadata</summary>
          <div class="node-list">
            <div class="node-entry">
              <table class="node-params">
                {{if .MangaMeta.Title}}<tr><td class="node-param-name">Title</td><td class="node-param-value">{{.MangaMeta.Title}}</td></tr>{{end}}
                {{if .MangaMeta.Series}}<tr><td class="node-param-name">Series</td><td class="node-param-value">{{.MangaMeta.Series}}</td></tr>{{end}}
                {{if .MangaMeta.Number}}<tr><td class="node-param-name">Number</td><td class="node-param-value">{{.MangaMeta.Number}}</td></tr>{{end}}
                {{if .MangaMeta.Volume}}<tr><td class="node-param-name">Volume</td><td class="node-param-value">{{.MangaMeta.Volume}}</td></tr>{{end}}
                {{if .MangaMeta.Count}}<tr><td class="node-param-name">Issue count</td><td class="node-param-value">{{deref .MangaMeta.Count}}</td></tr>{{end}}
                {{if .MangaMeta.Year}}<tr><td class="node-param-name">Date</td><td class="node-param-value">{{deref .MangaMeta.Year}}{{if .MangaMeta.Month}}-{{deref .MangaMeta.Month}}{{end}}{{if .MangaMeta.Day}}-{{deref .MangaMeta.Day}}{{end}}</td></tr>{{end}}
                {{if .MangaMeta.Writer}}<tr><td class="node-param-name">Writer</td><td class="node-param-value">{{.MangaMeta.Writer}}</td></tr>{{end}}
                {{if .MangaMeta.Penciller}}<tr><td class="node-param-name">Penciller</td><td class="node-param-value">{{.MangaMeta.Penciller}}</td></tr>{{end}}
                {{if .MangaMeta.Inker}}<tr><td class="node-param-name">Inker</td><td class="node-param-value">{{.MangaMeta.Inker}}</td></tr>{{end}}
                {{if .MangaMeta.Colorist}}<tr><td class="node-param-name">Colorist</td><td class="node-param-value">{{.MangaMeta.Colorist}}</td></tr>{{end}}
                {{if .MangaMeta.Letterer}}<tr><td class="node-param-name">Letterer</td><td class="node-param-value">{{.MangaMeta.Letterer}}</td></tr>{{end}}
                {{if .MangaMeta.CoverArtist}}<tr><td class="node-param-name">Cover artist</td><td class="node-param-value">{{.MangaMeta.CoverArtist}}</td></tr>{{end}}
                {{if .MangaMeta.Editor}}<tr><td class="node-param-name">Editor</td><td class="node-param-value">{{.MangaMeta.Editor}}</td></tr>{{end}}
                {{if .MangaMeta.Publisher}}<tr><td class="node-param-name">Publisher</td><td class="node-param-value">{{.MangaMeta.Publisher}}</td></tr>{{end}}
                {{if .MangaMeta.Imprint}}<tr><td class="node-param-name">Imprint</td><td class="node-param-value">{{.MangaMeta.Imprint}}</td></tr>{{end}}
                {{if .MangaMeta.Genre}}<tr><td class="node-param-name">Genre</td><td class="node-param-value">{{.MangaMeta.Genre}}</td></tr>{{end}}
                {{if .MangaMeta.Web}}<tr><td class="node-param-name">Web</td><td class="node-param-value">{{if or (hasPrefix .MangaMeta.Web "http://") (hasPrefix .MangaMeta.Web "https://")}}<a href="{{.MangaMeta.Web}}" target="_blank" rel="noopener noreferrer">{{.MangaMeta.Web}}</a>{{else}}{{.MangaMeta.Web}}{{end}}</td></tr>{{end}}
                {{if .MangaMeta.LanguageISO}}<tr><td class="node-param-name">Language</td><td class="node-param-value">{{.MangaMeta.LanguageISO}}</td></tr>{{end}}
                {{if .MangaMeta.Format}}<tr><td class="node-param-name">Format</td><td class="node-param-value">{{.MangaMeta.Format}}</td></tr>{{end}}
                {{if .MangaMeta.Manga}}<tr><td class="node-param-name">Manga</td><td class="node-param-value">{{.MangaMeta.Manga}}</td></tr>{{end}}
                {{if .MangaMeta.AgeRating}}<tr><td class="node-param-name">Age rating</td><td class="node-param-value">{{.MangaMeta.AgeRating}}</td></tr>{{end}}
                {{if .MangaMeta.CommunityRating}}<tr><td class="node-param-name">Community rating</td><td class="node-param-value">{{printf "%.2f" (deref64f .MangaMeta.CommunityRating)}}</td></tr>{{end}}
                {{if .MangaMeta.XMLPageCount}}<tr><td class="node-param-name">XML page count</td><td class="node-param-value">{{deref .MangaMeta.XMLPageCount}}</td></tr>{{end}}
              </table>
            </div>
            {{if .MangaMeta.Summary}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Summary</span></div>
              <pre class="gen-text comic-info-summary">{{.MangaMeta.Summary}}</pre>
            </div>
            {{end}}
            {{if .MangaMeta.Notes}}
            <div class="node-entry">
              <div class="node-header"><span class="node-title">Notes</span></div>
              <pre class="gen-text comic-info-summary">{{.MangaMeta.Notes}}</pre>
            </div>
            {{end}}
            {{if .MangaMeta.RawXML}}
            <details class="long-value">
              <summary>Raw ComicInfo.xml</summary>
              <pre class="long-value-full">{{.MangaMeta.RawXML}}</pre>
            </details>
            {{end}}
          </div>
        </details>
        {{end}}

      </div>
    </details>

    {{/* One collapsible panel per source, carrying that origin's commentary and
         pulled annotations. The origin itself is edited from the metadata
         Sources row; here only the commentary body and the boxes are. */}}
    {{range .SourcePanels}}
    <details class="detail-meta-panel detail-source-panel" open>
      <summary>{{if .Site}}{{.Site}}{{else}}source{{end}}</summary>
      <div class="detail-meta-content">
        <table class="meta-table meta-editable">
          <tbody>
            <tr><th>Original</th><td>
              {{if .OriginalLines}}<ul class="collection-list">
                {{range .OriginalLines}}
                <li class="collection-item">{{if .IsURL}}<a href="{{.Text}}" target="_blank" rel="noopener noreferrer" class="meta-url-value" title="{{.Text}}">{{urlDomain .Text}}</a>{{else}}<span class="meta-source-value" title="{{.Text}}">{{.Text}}</span>{{end}}</li>
                {{end}}
              </ul>{{end}}
              <button type="button" class="btn-link-accent btn-edit-original" data-site="{{.Site}}" data-post="{{.PostID}}" data-original="{{.Original}}" title="{{if .Original}}Edit original source{{else}}Add original source{{end}}">{{if .Original}}[edit]{{else}}[+ add]{{end}}</button>
              {{if .Original}}<form method="POST" action="/images/{{$.Image.ID}}/original/remove"
                    hx-post="/images/{{$.Image.ID}}/original/remove" hx-swap="none"
                    hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                    hx-confirm="Remove this original source?" data-confirm-ok="Remove"
                    style="display:inline">
                <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                <input type="hidden" name="site" value="{{.Site}}">
                <input type="hidden" name="post_id" value="{{.PostID}}">
                <button type="submit" class="btn-link-accent" title="Remove original source">[×]</button>
              </form>{{end}}
            </td></tr>
            <tr><th>Commentary</th><td>
              {{if .Commentary}}<div class="commentary-body">{{.Commentary}}</div>{{end}}
              <button type="button" class="btn-link-accent btn-edit-commentary" data-site="{{.Site}}" data-post="{{.PostID}}" data-commentary="{{.Commentary}}" title="{{if .Commentary}}Edit commentary{{else}}Add commentary{{end}}">{{if .Commentary}}[edit]{{else}}[+ add]{{end}}</button>
              {{if .Commentary}}<form method="POST" action="/images/{{$.Image.ID}}/commentary/remove"
                    hx-post="/images/{{$.Image.ID}}/commentary/remove" hx-swap="none"
                    hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                    hx-confirm="Remove this commentary?" data-confirm-ok="Remove"
                    style="display:inline">
                <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                <input type="hidden" name="site" value="{{.Site}}">
                <input type="hidden" name="post_id" value="{{.PostID}}">
                <button type="submit" class="btn-link-accent" title="Remove commentary">[×]</button>
              </form>{{end}}
            </td></tr>
            {{if .Annotations}}
            <tr><th>Annotations</th><td>
              <ul class="collection-list">
                {{range .Annotations}}
                <li class="collection-item annotation-entry" data-ann-id="{{.ID}}">
                  <span class="meta-annotation-body" title="{{.Body}}">{{if .Body}}{{.Body}}{{else}}(no text){{end}}</span>
                  <button type="button" class="btn-link-accent btn-edit-annotation" data-id="{{.ID}}" data-x="{{.X}}" data-y="{{.Y}}" data-w="{{.W}}" data-h="{{.H}}" data-body="{{.Body}}" title="Edit">[edit]</button>
                  <form method="POST" action="/images/{{$.Image.ID}}/annotations/remove"
                        hx-post="/images/{{$.Image.ID}}/annotations/remove" hx-swap="none"
                        hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                        hx-confirm="Remove this annotation?" data-confirm-ok="Remove"
                        style="display:inline">
                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                    <input type="hidden" name="id" value="{{.ID}}">
                    <button type="submit" class="btn-link-accent" title="Remove annotation">[×]</button>
                  </form>
                </li>
                {{end}}
              </ul>
            </td></tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </details>
    {{end}}
    <div id="related-entries-panel"
         hx-get="/internal/images/{{.Image.ID}}/related-entries?back_q={{urlQ .BackQuery}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}"
         hx-trigger="load, relations-changed"
         hx-swap="innerHTML"></div>
    <div hx-get="/images/{{.Image.ID}}/related?back_q={{urlQ .BackQuery}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}" hx-trigger="load" hx-swap="outerHTML"></div>
    </div>{{/* end detail-meta-col */}}
  </div>
</div>

{{template "layout_end" .}}
{{end}}