{{define "gallery.html"}}
{{template "layout_head" .}}
{{template "partials/tag_sidebar.html" .}}
{{template "layout_mid" .}}

<div id="gallery-header">
  <form id="search-form" hx-get="/" hx-target="#gallery-grid" hx-push-url="true" hx-swap="innerHTML">
    <div class="search-input-wrap">
      <input type="text" name="q" id="search-input" value="{{.Query}}" 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 .Sort "newest"}}selected{{end}}>Newest</option>
      <option value="filesize" {{if eq .Sort "filesize"}}selected{{end}}>File size</option>
      <option value="order"    {{if eq .Sort "order"}}selected{{end}}>Collection order</option>
      {{if eq .Sort "random"}}<option value="random" selected>Random</option>{{end}}
    </select>
    <select name="order">
      <option value="desc" {{if eq .Order "desc"}}selected{{end}}>↓</option>
      <option value="asc"  {{if eq .Order "asc"}}selected{{end}}>↑</option>
    </select>
    {{if .RandomSeed}}<input type="hidden" name="seed" value="{{.RandomSeed}}">{{end}}
    <button type="submit">Search</button>
    <button type="button" id="fav-filter-btn" class="{{if hasFavFilter .Query}}active{{end}}"
            onclick="toggleFavFilter()" title="Show favorites (F)">♥</button>
    <button type="button" id="random-sort-btn" class="{{if eq .Sort "random"}}active{{end}}"
            onclick="applyRandomSort()" title="{{if eq .Sort "random"}}Re-shuffle{{else}}Random order{{end}} (R)">⇄</button>
  </form>
  <div id="save-search-area">{{template "partials/save_search_area.html" .}}</div>
</div>

<div id="gallery-flash"></div>
<div id="search-warning">{{if .SearchWarning}}<span class="field-hint">{{.SearchWarning}}</span>{{end}}</div>

<div id="gallery-status" class="status-bar"><span id="result-count" class="result-count">{{.Result.Total}}</span> {{plural .Result.Total "match" "matches"}}</div>

<div id="batch-bar" class="batch-bar hidden">
  <button onclick="selectAll()">Select all</button>
  <button onclick="clearSelection()">Cancel</button>
  <span id="batch-count">0 selected</span>
  <form id="batch-delete-form">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <button type="button" class="batch-bar-right" onclick="openTagSelectedDialog()">Add tags manually</button>
    <button type="button" onclick="openStripSelectedDialog()">Remove tags</button>
    {{if .EnabledTaggers}}<button type="button" class="btn-autotag" onclick="openBatchAutotagDialog('selection')">Auto-tag</button>{{end}}
    {{if .MonloaderPaired}}<button type="button" class="monloader-accent" onclick="openBatchLookupDialog('selection')">Lookup</button>{{end}}
    <span class="batch-bar-sep" aria-hidden="true"></span>
    <button type="button" onclick="openBatchInboxDialog('selection')">Toggle inbox</button>
    <button type="button" onclick="openBatchFavoriteDialog('selection')">Toggle favorite</button>
    <button type="button" onclick="openBatchCollectionDialog('selection')">Set collection</button>
    <button type="button" onclick="openBatchSourceDialog('selection')">Set source</button>
    <span class="batch-bar-sep" aria-hidden="true"></span>
    {{if gt (len .Galleries) 1}}<button type="button" onclick="openBatchTransferDialog('selection')">Transfer</button>{{end}}
    <button type="button" onclick="openBatchMoveDialog('selection')">Move</button>
    <button type="button" class="btn-danger" onclick="batchDeleteSelected()">Delete</button>
  </form>
</div>

<div id="gallery-grid">
{{template "partials/thumbnail_grid.html" .}}
</div>

<!-- Save search dialog -->
<dialog id="save-search-dialog">
  <form hx-post="/search/saved"
        hx-target="#save-search-result"
        hx-swap="innerHTML">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" name="query" id="save-search-query" value="{{.Query}}">
    <input type="hidden" name="sort" id="save-search-sort" value="{{.Sort}}">
    <input type="hidden" name="order" id="save-search-order" value="{{.Order}}">
    <input type="hidden" name="seed" id="save-search-seed" value="{{if .RandomSeed}}{{.RandomSeed}}{{end}}">
    <p>Save search:<br><code id="save-search-preview" class="save-search-terms">{{.Query}}</code></p>
    <div class="field">
      <label>Name</label>
      <input type="text" name="name" id="save-search-name" placeholder="Search name" required
             onkeydown="if(event.key==='Enter'){event.preventDefault();this.closest('form').requestSubmit();}">
    </div>
    <div id="save-search-result"></div>
    <div class="dialog-actions">
      <button type="submit">Save</button>
      <button type="button" onclick="closeDialogAndRestoreParent('save-search-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Delete dialog (scope flip via hidden #batch-delete-scope; the
     dataset.returnTo marker on the chooser path pops Escape back to the
     chooser, the batch-bar path leaves it cleared). -->
<dialog id="batch-delete-dialog">
  <input type="hidden" id="batch-delete-scope">
  <p>Delete {{template "batch_count" "batch-delete"}}?</p>
  <p style="color:var(--error);font-size:12px">Files are permanently deleted from disk. This cannot be undone.</p>
  <div id="batch-delete-flash"></div>
  <div class="dialog-actions">
    <button type="button" class="btn-danger" onclick="confirmBatchDelete()">Delete</button>
    <button type="button" onclick="closeDialogAndRestoreParent('batch-delete-dialog')">Cancel</button>
  </div>
</dialog>

<!-- Actions chooser. Density-relief surface: every search-scoped operation
     hangs off this one button. Picking an entry closes the chooser and opens
     the matching action dialog (close-then-open, not innerHTML swap). The
     scope is announced once by the dialog header; each entry's label is
     just the action verb. Number keys 1-9 pick the corresponding visible
     entry (assigned dynamically at open time). The `a` shortcut in main.js
     opens this chooser.
     Each <button> carries data-action so openBatchActionsDialog can wire
     onclick once and update visibility on every open without rebinding. -->
<dialog id="batch-actions-dialog">
  {{/* Body wrapped in #batch-actions-body so HTMX search responses can OOB-swap
       the entries when .Query / .Result.Total change without disturbing the
       <dialog> wrapper or its open state. */}}
  <div id="batch-actions-body">{{template "partials/batch_actions_body.html" .}}</div>
  <div class="dialog-actions">
    <button type="button" onclick="document.getElementById('batch-actions-dialog').close()">Cancel</button>
  </div>
</dialog>

<!-- Add-tags dialog (shared by chooser's "Add tags" and the batch-bar's
     Add-tags button). op is hardcoded to "add" - bulk-strip lives in
     #batch-strip-dialog instead. -->
<dialog id="batch-tag-dialog">
  <p>
    Add tags to <strong id="batch-tag-count-display"></strong>
    <span id="batch-tag-noun"></span>:
  </p>
  <form id="batch-tag-form" onsubmit="event.preventDefault(); confirmBatchTag();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" name="scope" id="batch-tag-scope">
    <input type="hidden" name="op" value="add">
    <div class="field" style="position:relative">
      <label>Tags (space-separated, <code>category:name</code> for non-general)</label>
      <input type="text" name="tags" id="batch-tag-input" class="upload-wide-input" data-multi-tags="1"
             placeholder="Add tag(s)..." autocomplete="off"
             hx-get="/internal/tags/suggest"
             hx-trigger="input changed delay:200ms"
             hx-target="#batch-tag-suggest"
             hx-swap="innerHTML"
             hx-vals='js:{tag: document.getElementById("batch-tag-input").value.split(/\s+/).pop()}'
             onkeydown="handleSuggestKey(event, 'batch-tag-suggest', 'batch-tag-input')">
      <div id="batch-tag-suggest" class="suggest-dropdown tag-suggest-dropdown"></div>
    </div>
    <div id="batch-tag-flash"></div>
    <div class="dialog-actions">
      <button type="submit">Apply</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-tag-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

{{if .EnabledTaggers}}
<!-- Auto-tag dialog (scope flip via hidden #batch-autotag-scope). Posts
     /internal/autotag with q/sort/order for search scope; ids[] for
     selection scope. -->
<dialog id="batch-autotag-dialog">
  <p>
    Auto-tag {{template "batch_count" "batch-autotag"}}. Pick which tagger to run.
  </p>
  <form id="batch-autotag-form" onsubmit="event.preventDefault(); confirmBatchAutotag();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="batch-autotag-scope">
    <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 id="batch-autotag-flash"></div>
    <div class="dialog-actions">
      <button type="submit" class="btn-autotag">Auto-tag</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-autotag-dialog')">Cancel</button>
    </div>
  </form>
</dialog>
{{end}}

<!-- Remove tags dialog (shared by chooser's "Remove tags" and the batch-bar's
     Remove-tags button). Five radio modes:
       specific            → POST /internal/batch-tag with op=remove + tags=...
       user / auto / all   → POST /internal/batch-strip with the matching predicate
                             (is_auto=0 / is_auto=1 / no extra clause).
       auto + tagger_name  → mode=auto plus a single tagger filter (the
                             "Specific auto-tagger" entry sets the same form
                             field and adds tagger_name to the body). -->
<dialog id="batch-strip-dialog">
  <p>
    Remove tags from <strong id="batch-strip-count-display"></strong>
    <span id="batch-strip-noun"></span>:
  </p>
  <form id="batch-strip-form" onsubmit="event.preventDefault(); confirmBatchStrip();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" name="scope" id="batch-strip-scope">
    <div class="field">
      <label style="display:block"><input type="radio" name="mode" value="specific" checked> Specific tags by name</label>
      <div class="field" style="position:relative; margin: 4px 0 8px 22px" id="batch-strip-specific-row">
        <input type="text" name="tags" id="batch-strip-input" class="upload-wide-input" data-multi-tags="1"
               placeholder="Tags to remove (space-separated, category:name)" autocomplete="off"
               hx-get="/internal/tags/suggest"
               hx-trigger="input changed delay:200ms"
               hx-target="#batch-strip-suggest"
               hx-swap="innerHTML"
               hx-vals='js:{tag: document.getElementById("batch-strip-input").value.split(/\s+/).pop()}'
               onkeydown="handleSuggestKey(event, 'batch-strip-suggest', 'batch-strip-input')">
        <div id="batch-strip-suggest" class="suggest-dropdown tag-suggest-dropdown"></div>
      </div>
      {{if .SourceLabelCounts}}
      <label style="display:block"><input type="radio" name="mode" value="source-specific"> Specific source</label>
      <div class="field" style="margin: 4px 0 8px 22px" id="batch-strip-source-row">
        <select name="source" id="batch-strip-source" class="upload-wide-input">
          {{range .SourceLabelCounts}}<option value="{{.Source}}">{{.Source}} ({{.Count}})</option>{{end}}
        </select>
      </div>
      {{end}}
      {{if .EnabledTaggers}}
      <label style="display:block"><input type="radio" name="mode" value="auto-specific"> Specific auto-tagger</label>
      <div class="field" style="margin: 4px 0 8px 22px" id="batch-strip-tagger-row">
        <select name="tagger_name" id="batch-strip-tagger" class="upload-wide-input">
          {{range .EnabledTaggers}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
      </div>
      {{end}}
      <label style="display:block"><input type="radio" name="mode" value="user"> All user tags</label>
      {{if .SourceLabelCounts}}<label style="display:block"><input type="radio" name="mode" value="source-all"> All external sources</label>{{end}}
      <label style="display:block"><input type="radio" name="mode" value="auto"> All auto-tagger tags</label>
      <label style="display:block"><input type="radio" name="mode" value="all"> All tags</label>
    </div>
    <div id="batch-strip-flash"></div>
    <div class="dialog-actions">
      <button type="submit" class="btn-warning">Remove</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-strip-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Move dialog (scope flip via hidden #batch-move-scope). -->
<dialog id="batch-move-dialog">
  <p>Move {{template "batch_count" "batch-move"}} to folder:</p>
  <p class="field-hint">Path (leave blank for gallery root)</p>
  <form id="batch-move-form" onsubmit="event.preventDefault(); confirmBatchMove();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="batch-move-scope">
    <div class="field" style="position:relative">
      <input type="text" name="folder" id="batch-move-folder" class="upload-wide-input"
             placeholder="Destination path..." autocomplete="off"
             hx-get="/internal/folders/suggest"
             hx-trigger="input changed delay:200ms"
             hx-target="#batch-move-suggest"
             hx-swap="innerHTML"
             hx-vals='js:{prefix: document.getElementById("batch-move-folder").value}'
             onkeydown="handleSuggestKey(event, 'batch-move-suggest', 'batch-move-folder')">
      <div id="batch-move-suggest" class="suggest-dropdown folder-suggest-dropdown"></div>
    </div>
    <div id="batch-move-flash"></div>
    <div class="dialog-actions">
      <button type="submit">Move</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-move-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Transfer dialog: copy the scope into another gallery (scope flip via hidden
     #batch-transfer-scope). -->
<dialog id="batch-transfer-dialog">
  <p>Transfer {{template "batch_count" "batch-transfer"}} 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="batch-transfer-form" onsubmit="event.preventDefault(); confirmBatchTransfer();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="batch-transfer-scope">
    <div class="field">
      <label>Target gallery</label>
      <select name="target" id="batch-transfer-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="batch-transfer-remove" value="1"> Remove from this gallery after transfer</label>
    </div>
    <div id="batch-transfer-flash"></div>
    <div class="dialog-actions">
      <button type="submit">Transfer</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-transfer-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Batch inbox dialog. Per-row toggle: each image flips between inbox
     and archived, regardless of starting state. -->
<dialog id="batch-inbox-dialog">
  <input type="hidden" id="batch-inbox-scope">
  <p>
    Toggle inbox state for
    {{template "batch_count" "batch-inbox"}}?
  </p>
  <p style="color:var(--fg-dim);font-size:12px">Inbox images become archived; archived become inbox.</p>
  <div id="batch-inbox-flash"></div>
  <div class="dialog-actions">
    <button type="button" onclick="confirmBatchInbox()">Apply</button>
    <button type="button" onclick="closeDialogAndRestoreParent('batch-inbox-dialog')">Cancel</button>
  </div>
</dialog>

<dialog id="batch-fav-dialog">
  <input type="hidden" id="batch-fav-scope">
  <p>
    Toggle favorite state for
    {{template "batch_count" "batch-fav"}}?
  </p>
  <p style="color:var(--fg-dim);font-size:12px">Favorited images become unfavorited; unfavorited become favorited.</p>
  <div id="batch-fav-flash"></div>
  <div class="dialog-actions">
    <button type="button" onclick="confirmBatchFavorite()">Apply</button>
    <button type="button" onclick="closeDialogAndRestoreParent('batch-fav-dialog')">Cancel</button>
  </div>
</dialog>

<!-- Set-collection dialog (scope flip via hidden #batch-collection-scope).
     The input drives /internal/collection/suggest autocomplete. -->
<dialog id="batch-collection-dialog">
  <p>Set collection for {{template "batch_count" "batch-collection"}}:</p>
  <form id="batch-collection-form" onsubmit="event.preventDefault(); confirmBatchCollection();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="batch-collection-scope">
    <div class="field">
      <div class="radio-row">
        <label><input type="radio" name="mode" value="add" checked> Add to collection</label>
        <label><input type="radio" name="mode" value="remove"> Remove from collection</label>
      </div>
    </div>
    <div class="field">
      <label>Collection label</label>
{{template "suggest_input" dict "Name" "collection" "InputID" "batch-collection-input" "Endpoint" "/internal/collection/suggest" "SuggestID" "batch-collection-suggest"}}
    </div>
    <div id="batch-collection-flash"></div>
    <div class="dialog-actions">
      <button type="submit">Apply</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-collection-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Set-source dialog (scope flip via hidden #batch-source-scope).
     The input drives /internal/source/suggest autocomplete. -->
<dialog id="batch-source-dialog">
  <p>Set source for {{template "batch_count" "batch-source"}}:</p>
  <form id="batch-source-form" onsubmit="event.preventDefault(); confirmBatchSource();">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="batch-source-scope">
    <div class="field">
      <div class="radio-row">
        <label><input type="radio" name="mode" value="add" checked> Add source</label>
        <label><input type="radio" name="mode" value="remove"> Remove source</label>
      </div>
    </div>
    <div class="field">
      <label>Source label</label>
{{template "suggest_input" dict "Name" "site" "InputID" "batch-source-input" "Endpoint" "/internal/source/suggest" "SuggestID" "batch-source-suggest"}}
    </div>
    <div id="batch-source-flash"></div>
    <div class="dialog-actions">
      <button type="submit">Apply</button>
      <button type="button" onclick="closeDialogAndRestoreParent('batch-source-dialog')">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Batch lookup dialog. One monloader job per image, so a large scope means
     a long politeness-paced crawl that can't be drained from monbooru once
     queued - hence the count confirm. -->
<dialog id="batch-lookup-dialog">
  <input type="hidden" id="batch-lookup-scope">
  <p>
    Look up tags for
    {{template "batch_count" "batch-lookup"}}:
  </p>
  <div class="field">
    <label style="display:block"><input type="radio" name="batch-lookup-mode" value="source" checked> Refresh tags from the declared source</label>
    <label style="display:block"><input type="radio" name="batch-lookup-mode" value="all"> Look up new sources by file hash and fetch{{if .MonloaderPTR}} (PTR and online boorus){{end}}</label>
    {{if .MonloaderPTR}}
    <label style="display:block"><input type="radio" name="batch-lookup-mode" value="ptr"> Look up in the Public Tag Repository only</label>
    <label style="display:block"><input type="radio" name="batch-lookup-mode" value="booru"> Look up on online boorus only</label>
    {{end}}
  </div>
  <p style="color:var(--fg-dim);font-size:12px">The source refresh uses each image's primary source URL, or a PTR hash lookup when the primary is a url-less PTR source, and skips images with neither; the hash lookup finds posts for files with no known source. Queued jobs run on monloader and cannot be cancelled from here.</p>
  <div id="batch-lookup-flash"></div>
  <div class="dialog-actions">
    <button type="button" onclick="confirmBatchLookup()">Lookup</button>
    <button type="button" onclick="closeDialogAndRestoreParent('batch-lookup-dialog')">Cancel</button>
  </div>
</dialog>


<script>
// The batch plumbing this page leans on - scopeCount, searchScopeParts,
// selectionScopeIds, runBatchOp, plus the shared openBatchDialog /
// confirmBatchSimple skeletons - lives in main.js so other pages can
// share it. Each dialog below only names its id prefix, endpoint, and
// per-dialog extras.
function openBatchLookupDialog(scope) {
  openBatchDialog('batch-lookup', scope, {
    radio: '#batch-lookup-dialog input[name="batch-lookup-mode"][value="source"]'
  });
}

// confirmBatchLookup queues the picked lookup mode across the scope: a
// monloader metadata refetch or a hash lookup per image.
function confirmBatchLookup() {
  var checked = document.querySelector('#batch-lookup-dialog input[name="batch-lookup-mode"]:checked');
  confirmBatchSimple('batch-lookup', '/internal/batch-lookup',
    ['mode=' + encodeURIComponent(checked ? checked.value : 'source')], 'Lookup failed.');
}

function openBatchDeleteDialog(scope) {
  // requireMatches: don't open the delete confirm over an empty search.
  openBatchDialog('batch-delete', scope, {requireMatches: true});
}

function confirmBatchDelete() {
  var scope = document.getElementById('batch-delete-scope').value;
  if (scope === 'search') {
    runBatchOp({endpoint: '/internal/delete-search', scope: 'search', params: searchScopeParts(),
                dialogId: 'batch-delete-dialog', flashId: 'batch-delete-flash', failMsg: 'Delete failed.', clearOnOk: false});
    return;
  }
  var ids = selectionScopeIds();
  if (!ids) {
    document.getElementById('batch-delete-flash').innerHTML = '<div class="flash flash-err">No images selected.</div>';
    return;
  }
  runBatchOp({endpoint: '/internal/batch-delete', scope: 'selection', params: ids,
              dialogId: 'batch-delete-dialog', flashId: 'batch-delete-flash', failMsg: 'Delete failed.'});
}

function openBatchMoveDialog(scope) {
  openBatchDialog('batch-move', scope, {
    clearIds: ['batch-move-folder', 'batch-move-suggest'],
    focusId: 'batch-move-folder'
  });
}

function confirmBatchMove() {
  var folder = document.getElementById('batch-move-folder').value;
  confirmBatchSimple('batch-move', '/internal/batch-move',
    ['folder=' + encodeURIComponent(folder)], 'Move failed.');
}

function openBatchTransferDialog(scope) {
  openBatchDialog('batch-transfer', scope, {
    beforeShow: function() {
      var rm = document.getElementById('batch-transfer-remove');
      if (rm) rm.checked = false;
    }
  });
}

function confirmBatchTransfer() {
  var target = document.getElementById('batch-transfer-target');
  var flash = document.getElementById('batch-transfer-flash');
  if (!target || !target.value) {
    if (flash) flash.innerHTML = '<div class="flash flash-err">Pick a target gallery.</div>';
    return;
  }
  var params = ['target=' + encodeURIComponent(target.value)];
  if (document.getElementById('batch-transfer-remove').checked) params.push('remove_after=1');
  confirmBatchSimple('batch-transfer', '/internal/batch-transfer', params, 'Transfer failed.');
}

// Open the Actions chooser. The header announces the scope once (count +
// noun); each entry's label is just the verb. Each visible entry gets a
// leading "[N] " prefix so the 1-9 number keys are discoverable without a
// tooltip. Auto-focuses the first visible entry.
function openBatchActionsDialog() {
  var dlg = document.getElementById('batch-actions-dialog');
  if (!dlg) return;
  var rcEl = document.querySelector('.result-count');
  var n = 0;
  if (rcEl) {
    var m = rcEl.textContent.match(/(\d+)/);
    if (m) n = parseInt(m[1], 10);
  }
  document.getElementById('batch-actions-count').textContent = n;
  document.getElementById('batch-actions-noun').textContent = n === 1 ? 'image' : 'images';

  var items = dlg.querySelectorAll('li.actions-menu-item');
  items.forEach(function(li, idx) {
    var btn = li.querySelector('button');
    if (!btn) return;
    var pos = idx + 1;
    btn.dataset.shortcut = pos <= 9 ? String(pos) : '';
    if (!btn.dataset.label) btn.dataset.label = btn.textContent;
    if (pos <= 9) {
      btn.textContent = '[' + pos + '] ' + btn.dataset.label;
    } else {
      btn.textContent = btn.dataset.label;
    }
    btn.onclick = function() { pickBatchAction(btn.dataset.action); };
  });
  dlg.showModal();
  var first = items[0] && items[0].querySelector('button');
  if (first) first.focus();
}

// Wire number keys 1-9 plus ArrowUp/ArrowDown inside the chooser. Bound on
// the dialog so it only fires while the chooser is open; closes don't leave
// the listener around. Arrow keys cycle focus across the entry buttons with
// clamp-at-ends, matching the suggest-dropdown shape in handleSuggestKey.
(function () {
  var dlg = document.getElementById('batch-actions-dialog');
  if (!dlg) return;
  dlg.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      var items = Array.prototype.slice.call(dlg.querySelectorAll('li.actions-menu-item button'));
      if (items.length === 0) return;
      var idx = items.indexOf(document.activeElement);
      if (idx < 0) idx = 0;
      else if (e.key === 'ArrowDown') idx = Math.min(idx + 1, items.length - 1);
      else idx = Math.max(idx - 1, 0);
      e.preventDefault();
      items[idx].focus();
      return;
    }
    if (e.key < '1' || e.key > '9') return;
    var btn = dlg.querySelector('button[data-shortcut="' + e.key + '"]');
    if (!btn) return;
    e.preventDefault();
    btn.click();
  });
})();

function pickBatchAction(action) {
  var dlg = document.getElementById('batch-actions-dialog');
  if (dlg) dlg.close();
  var subId = '';
  switch (action) {
    case 'save':
      openSaveSearchDialog();
      subId = 'save-search-dialog';
      break;
    case 'add':
      openTagSearchDialog('add');
      subId = 'batch-tag-dialog';
      break;
    case 'strip':
      openStripSearchDialog();
      subId = 'batch-strip-dialog';
      break;
    case 'autotag':
      openBatchAutotagDialog('search');
      subId = 'batch-autotag-dialog';
      break;
    case 'transfer':
      openBatchTransferDialog('search');
      subId = 'batch-transfer-dialog';
      break;
    case 'move':
      openBatchMoveDialog('search');
      subId = 'batch-move-dialog';
      break;
    case 'inbox-toggle':
      openBatchInboxDialog('search');
      subId = 'batch-inbox-dialog';
      break;
    case 'fav-toggle':
      openBatchFavoriteDialog('search');
      subId = 'batch-fav-dialog';
      break;
    case 'collection':
      openBatchCollectionDialog('search');
      subId = 'batch-collection-dialog';
      break;
    case 'source':
      openBatchSourceDialog('search');
      subId = 'batch-source-dialog';
      break;
    case 'lookup':
      openBatchLookupDialog('search');
      subId = 'batch-lookup-dialog';
      break;
    case 'delete':
      openBatchDeleteDialog('search');
      subId = 'batch-delete-dialog';
      break;
  }
  // Mark the sub-dialog so Escape / Cancel pop one level back to the chooser
  // instead of dropping out to the gallery. Cleared by the batch-bar open
  // paths on shared dialogs (#batch-tag-dialog, #batch-strip-dialog) so the
  // marker doesn't linger across non-chooser opens.
  if (subId) {
    var sub = document.getElementById(subId);
    if (sub) sub.dataset.returnTo = 'batch-actions-dialog';
  }
}

// Open the Remove-tags dialog. On a search-scope submit the body carries
// scope=search plus q/sort/order so the handler streams matching ids
// through search.ExecuteForDeleteStream. beforeShow re-syncs the mode
// rows before the dialog opens so showModal's initial focus doesn't land
// on a field left disabled by the previous open's mode.
function openStripSearchDialog() { openStripDialog('search'); }
function openStripSelectedDialog() { openStripDialog('selection'); }
function openStripDialog(scope) {
  openBatchDialog('batch-strip', scope, {
    countId: 'batch-strip-count-display',
    radio: '#batch-strip-form input[name="mode"][value="specific"]',
    clearIds: ['batch-strip-input', 'batch-strip-suggest'],
    clearReturnTo: true,
    beforeShow: updateBatchStripRow
  });
}

// Show only the input row that matches the currently-selected mode. The
// "specific" radio reveals the tag-name input; "auto-specific" reveals the
// tagger picker. The bulk modes (user / auto / all) reveal nothing.
//
// Inactive rows stay in flow with .row-inactive (visibility:hidden) so the
// dialog dimensions and the radio positions don't shift when the user flips
// modes. Inputs/selects inside an inactive row are disabled so tab focus
// skips them while invisible.
function updateBatchStripRow() {
  var picked = (document.querySelector('#batch-strip-form input[name="mode"]:checked') || {}).value;
  toggleStripModeRow('batch-strip-specific-row', picked !== 'specific');
  toggleStripModeRow('batch-strip-source-row', picked !== 'source-specific');
  toggleStripModeRow('batch-strip-tagger-row', picked !== 'auto-specific');
}

function toggleStripModeRow(id, inactive) {
  var el = document.getElementById(id);
  if (!el) return;
  el.classList.toggle('row-inactive', inactive);
  el.querySelectorAll('input, select').forEach(function(field) {
    field.disabled = inactive;
  });
}

(function () {
  var form = document.getElementById('batch-strip-form');
  if (!form) return;
  form.querySelectorAll('input[name="mode"]').forEach(function(r) {
    r.addEventListener('change', updateBatchStripRow);
  });
})();

function confirmBatchStrip() {
  var form = document.getElementById('batch-strip-form');
  if (!form) return;
  var scope = document.getElementById('batch-strip-scope').value;
  var mode = (form.querySelector('input[name="mode"]:checked') || {}).value || 'specific';
  var flash = document.getElementById('batch-strip-flash');
  if (flash) flash.innerHTML = '';

  // mode=specific dispatches through the existing batch-tag handler with
  // op=remove; the bulk modes go through batch-strip with the matching
  // predicate. mode=auto-specific / source-specific are UI shorthands for
  // mode=auto / mode=source plus a name filter; the server only knows the
  // bare mode, so unwrap before sending.
  var url, params;
  if (mode === 'specific') {
    var tags = (document.getElementById('batch-strip-input').value || '').trim();
    if (!tags) {
      if (flash) flash.innerHTML = '<div class="flash flash-err">No tags provided.</div>';
      return;
    }
    url = '/internal/batch-tag';
    params = ['op=remove', 'tags=' + encodeURIComponent(tags)];
  } else {
    url = '/internal/batch-strip';
    var serverMode = mode;
    if (mode === 'auto-specific') serverMode = 'auto';
    else if (mode === 'source-specific') serverMode = 'source';
    params = ['mode=' + encodeURIComponent(serverMode)];
    if (mode === 'auto-specific') {
      var taggerEl = document.getElementById('batch-strip-tagger');
      var taggerName = taggerEl ? taggerEl.value : '';
      if (!taggerName) {
        if (flash) flash.innerHTML = '<div class="flash flash-err">Pick an auto-tagger.</div>';
        return;
      }
      params.push('tagger_name=' + encodeURIComponent(taggerName));
    } else if (mode === 'source-specific') {
      var srcEl = document.getElementById('batch-strip-source');
      var src = srcEl ? srcEl.value : '';
      if (!src) {
        if (flash) flash.innerHTML = '<div class="flash flash-err">Pick a source.</div>';
        return;
      }
      params.push('source=' + encodeURIComponent(src));
    }
  }
  if (scope === 'search') {
    params = params.concat(searchScopeParts());
  } else {
    var ids = selectionScopeIds();
    if (!ids) {
      if (flash) flash.innerHTML = '<div class="flash flash-err">No images selected.</div>';
      return;
    }
    params = params.concat(ids);
  }
  runBatchOp({endpoint: url, scope: scope, params: params,
              dialogId: 'batch-strip-dialog', flashId: 'batch-strip-flash', failMsg: 'Remove failed.'});
}

function openBatchAutotagDialog(scope) {
  openBatchDialog('batch-autotag', scope, {
    radio: '#batch-autotag-form input[name="tagger_name"][value=""]'
  });
}

function confirmBatchAutotag() {
  var form = document.getElementById('batch-autotag-form');
  if (!form) return;
  var tagger = (form.querySelector('input[name="tagger_name"]:checked') || {}).value || '';
  // Auto-tag does not need _pendingGalleryReload (the job updates tags
  // out-of-band and the user often wants to keep watching the grid).
  // runBatchOp clears selection on selection scope by default.
  confirmBatchSimple('batch-autotag', '/internal/autotag',
    ['tagger_name=' + encodeURIComponent(tagger)], 'Auto-tag failed.');
}

// Open the Add-tags dialog scoped to the current search or the checked
// thumbnails; the selection variant reads ids from .thumb-checkbox:checked
// at submit.
function openTagSearchDialog() { openTagDialog('search'); }
function openTagSelectedDialog() { openTagDialog('selection'); }
function openTagDialog(scope) {
  openBatchDialog('batch-tag', scope, {
    countId: 'batch-tag-count-display',
    clearIds: ['batch-tag-input', 'batch-tag-suggest'],
    clearReturnTo: true,
    focusId: 'batch-tag-input'
  });
}

function confirmBatchTag() {
  var form = document.getElementById('batch-tag-form');
  if (!form) return;
  var scope = document.getElementById('batch-tag-scope').value;
  var tags = (document.getElementById('batch-tag-input').value || '').trim();
  var flash = document.getElementById('batch-tag-flash');
  if (flash) flash.innerHTML = '';
  if (!tags) {
    if (flash) flash.innerHTML = '<div class="flash flash-err">No tags provided.</div>';
    return;
  }
  var params = ['op=add', 'tags=' + encodeURIComponent(tags)];
  if (scope === 'search') {
    params = params.concat(searchScopeParts());
  } else {
    var ids = selectionScopeIds();
    if (!ids) {
      if (flash) flash.innerHTML = '<div class="flash flash-err">No images selected.</div>';
      return;
    }
    params = params.concat(ids);
  }
  runBatchOp({endpoint: '/internal/batch-tag', scope: scope, params: params,
              dialogId: 'batch-tag-dialog', flashId: 'batch-tag-flash', failMsg: 'Tag operation failed.'});
}

function toggleFavFilter() {
  var si = document.getElementById('search-input');
  if (!si) return;
  // Strip any existing fav:true token from the query, then re-add at the
  // front when toggling on. Lets the toggle compose with arbitrary other
  // tags ('fav:true 1girl' / '1girl fav:true' / 'fav:true').
  var tokens = si.value.split(/\s+/).filter(function(t) { return t && t.toLowerCase() !== 'fav:true'; });
  var hadFav = tokens.length !== si.value.split(/\s+/).filter(Boolean).length;
  if (hadFav) {
    si.value = tokens.join(' ');
  } else {
    tokens.unshift('fav:true');
    si.value = tokens.join(' ');
  }
  document.getElementById('search-form').dispatchEvent(new Event('submit', {bubbles:true}));
}

function openBatchInboxDialog(scope) {
  openBatchDialog('batch-inbox', scope);
}

function confirmBatchInbox() {
  confirmBatchSimple('batch-inbox', '/internal/batch-inbox', null, 'Inbox update failed.');
}

function openBatchFavoriteDialog(scope) {
  openBatchDialog('batch-fav', scope);
}

function confirmBatchFavorite() {
  confirmBatchSimple('batch-fav', '/internal/batch-favorite', null, 'Favorite update failed.');
}

function openBatchLabeledDialog(prefix, scope) {
  openBatchDialog(prefix, scope, {
    radio: '#' + prefix + '-dialog input[name="mode"][value="add"]',
    clearIds: [prefix + '-input', prefix + '-suggest'],
    focusId: prefix + '-input'
  });
}

function confirmBatchLabeled(prefix, endpoint, field) {
  var labelEl = document.getElementById(prefix + '-input');
  var modeEl = document.querySelector('#' + prefix + '-dialog input[name="mode"]:checked');
  confirmBatchSimple(prefix, endpoint,
    [field + '=' + encodeURIComponent(labelEl ? labelEl.value : ''),
     'mode=' + (modeEl ? modeEl.value : 'add')],
    'Apply failed.');
}

function openBatchCollectionDialog(scope) {
  openBatchLabeledDialog('batch-collection', scope);
}

function confirmBatchCollection() {
  confirmBatchLabeled('batch-collection', '/internal/batch-collection', 'collection');
}

function openBatchSourceDialog(scope) {
  openBatchLabeledDialog('batch-source', scope);
}

function confirmBatchSource() {
  confirmBatchLabeled('batch-source', '/internal/batch-source', 'site');
}

function applyRandomSort() {
  var si = document.getElementById('search-input');
  var q = si ? si.value : '';
  var seed = Math.floor(Math.random() * 2147483647) + 1;
  window.location.href = '/?q=' + encodeURIComponent(q) + '&sort=random&seed=' + seed;
}

// Close save-search dialog after success and reload so sidebar updates
document.addEventListener('htmx:afterSettle', function(e) {
  var el = e.detail.elt;
  if (!el || el.id !== 'save-search-result') return;
  var ok = el.querySelector('.flash-ok');
  if (ok) {
    setTimeout(function() {
      document.getElementById('save-search-dialog').close();
      window.location.reload();
    }, 600);
  }
});
</script>

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