{{/* maintenance_row is one maintenance-table action: title, hint, the
     POST target with optional confirm dialog / job-status kick / extra
     hidden fields, and the button verb. The missing-images row stays
     bespoke for the inline view link in its hint. */}}
{{define "maintenance_row"}}
        <tr>
          <td><strong>{{.Title}}</strong> <span class="field-hint">- {{.Desc}}</span></td>
          <td>
            <form hx-post="{{.URL}}" hx-target="#flash-maintenance" hx-swap="innerHTML"
                  {{if .JobKick}}hx-on::after-request="if(event.detail.successful){document.getElementById('job-status').setAttribute('hx-trigger','load');htmx.trigger('#job-status','load')}"
                  {{end}}{{if .Confirm}}hx-confirm="{{.Confirm}}"
                  {{if .ConfirmDanger}}data-confirm-danger="{{.ConfirmDanger}}"
                  {{end}}data-confirm-ok="{{.ConfirmOK}}"
                  {{end}}style="display:inline">
              <input type="hidden" name="_csrf" value="{{.CSRF}}">
              {{range $k, $v := .Fields}}<input type="hidden" name="{{$k}}" value="{{$v}}">
              {{end}}<button type="submit" class="{{if .Danger}}btn-danger {{end}}btn-sm">{{.Verb}}</button>
            </form>
          </td>
        </tr>
{{end}}
{{define "settings.html"}}
{{template "layout_head" .}}
<div id="sidebar-inner">
  <nav class="settings-nav">
    <a href="#general">General</a>
    <a href="#galleries">Galleries</a>
    <a href="#monloader">Monloader</a>
    <a href="#tagger">Tagger</a>
    <a href="#relations">Relations</a>
    <a href="#auth">Auth</a>
    <a href="#maintenance">Maintenance</a>
    <a href="#schedule">Schedule</a>
    <a href="#stats">Stats</a>
  </nav>
</div>
{{template "layout_mid" .}}

{{$csrf := index . "CSRFToken"}}
{{$cfg  := index . "Config"}}
{{$galleries := index . "Galleries"}}
{{$active := index . "ActiveGallery"}}
{{$monloaderPending := index . "MonloaderPending"}}
{{$monloaderPaired := index . "MonloaderPaired"}}
{{$monloaderPeerURL := index . "MonloaderPeerURL"}}

<div id="settings-page">
  <h2>Settings</h2>

  <section id="general" class="settings-section">
    <h3>General</h3>
    <div id="flash-general"></div>
    <form hx-post="/settings/general" hx-target="#flash-general" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <div class="settings-cols">
        <div class="settings-sub">
          <h4>Files</h4>
          {{template "partials/range_field.html" dict "Name" "max_file_size_mb" "Label" "Max file size (MB)" "Min" 1 "Max" 5120 "Value" $cfg.Gallery.MaxFileSizeMB "Ticks" (list 512 1024 2048 3072 4096 5120) "Hint" "Files larger than this are skipped on upload and during sync."}}
          <div class="field">
            <label for="default_upload_folder">Default upload folder</label>
            <input type="text" name="default_upload_folder" id="default_upload_folder" value="{{$cfg.Gallery.DefaultUploadFolder}}" placeholder="(gallery root)">
            <span class="field-hint">Web uploads land here. Blank means the gallery root.</span>
          </div>
          <div class="field">
            <label>
              <input type="checkbox" name="watch_enabled" {{if $cfg.Gallery.WatchEnabled}}checked{{end}}>
              Watch gallery for new files automatically
            </label>
          </div>
        </div>
        <div class="settings-sub">
          <h4>UI</h4>
          {{template "partials/range_field.html" dict "Name" "page_size" "Label" "Page size" "Min" 1 "Max" 100 "Value" $cfg.UI.PageSize "Ticks" (list 20 40 60 80 100)}}
          <div class="field">
            <label>Thumbnails</label>
            <div class="radio-row">
              <label><input type="radio" name="thumbnail_fit" value="square" {{if ne $cfg.UI.ThumbnailFit "natural"}}checked{{end}}> Square (cropped)</label>
              <label><input type="radio" name="thumbnail_fit" value="natural" {{if eq $cfg.UI.ThumbnailFit "natural"}}checked{{end}}> Real aspect ratio</label>
            </div>
          </div>
        </div>
      </div>
      <div class="settings-actions"><button type="submit">Save</button></div>
    </form>
  </section>

  <section id="galleries" class="settings-section">
    <h3>Galleries</h3>
    <div id="flash-galleries"></div>
    <div class="table-scroll">
    <table class="gallery-table">
      <thead>
        <tr>
          <th>Name</th><th>Gallery path</th><th>Status</th><th>Content</th>
          <th>Switch</th><th>Set default</th><th>Rename</th>
          <th>Export</th><th>Import</th><th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {{range $galleries}}
        <tr>
          <td><strong>{{.Name}}</strong></td>
          <td class="gallery-path-cell"><code>{{.GalleryPath}}</code></td>
          <td class="gallery-status-cell">
            {{if eq .Name $active}}<span class="status-badge status-ok">active</span>{{end}}
            {{if eq .Name $cfg.DefaultGallery}}<span class="status-badge status-ok">default</span>{{end}}
          </td>
          <td class="gallery-info"><span title="?gallery={{.Name}}">{{.Images}} img{{if .Images}} · {{.Tags}} tags{{end}}</span></td>
          <td>
            {{if ne .Name $active}}
            <form hx-post="/internal/gallery/switch" hx-target="#flash-galleries" hx-swap="innerHTML" style="display:inline">
              <input type="hidden" name="_csrf" value="{{$csrf}}">
              <input type="hidden" name="name" value="{{.Name}}">
              <button type="submit" class="btn-sm">Switch</button>
            </form>
            {{else}}
            <span class="status-dim">-</span>
            {{end}}
          </td>
          <td>
            {{if ne .Name $cfg.DefaultGallery}}
            <form hx-post="/settings/galleries/{{.Name}}/default" hx-target="#flash-galleries" hx-swap="innerHTML" style="display:inline">
              <input type="hidden" name="_csrf" value="{{$csrf}}">
              <button type="submit" class="btn-sm btn-set-default">Set default</button>
            </form>
            {{else}}
            <span class="status-dim">-</span>
            {{end}}
          </td>
          <td>
            <button class="btn-sm btn-gallery-rename" data-name="{{.Name}}">Rename</button>
          </td>
          <td>
            <button class="btn-sm btn-gallery-export" data-name="{{.Name}}">Export</button>
          </td>
          <td>
            <button class="btn-sm btn-danger btn-gallery-import"
                    data-name="{{.Name}}"
                    data-can-replace="{{if or (eq .Name $active) (eq .Name $cfg.DefaultGallery)}}false{{else}}true{{end}}">Import</button>
          </td>
          <td>
            {{if and (ne .Name $active) (ne .Name $cfg.DefaultGallery) (gt (len $galleries) 1)}}
            <button class="btn-sm btn-danger btn-gallery-delete" data-name="{{.Name}}">Delete</button>
            {{else}}
            <span class="status-dim">-</span>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
    </div>
    <div class="settings-actions">
      <button type="button" id="add-gallery-btn"
              onclick="openAddGalleryDialog()">Add gallery</button>
    </div>

    <dialog id="gallery-add-dialog">
      <form hx-post="/settings/galleries" hx-target="#flash-gallery-add" hx-swap="innerHTML"
            hx-encoding="multipart/form-data" class="add-gallery-form"
            hx-headers='{"X-CSRF-Token": "{{$csrf}}"}'
            hx-on::before-request="setAddGalleryBusy(this, true)"
            hx-on::after-request="onAddGalleryResponse(this)">
        <input type="hidden" name="_csrf" value="{{$csrf}}">
        <p>Add a new gallery</p>
        <div class="field">
          <label>Name</label>
          <input type="text" name="name" required pattern="[A-Za-z0-9_\-]+"
                 title="Letters, digits, underscore, dash"
                 placeholder="letters / digits / _ / -">
        </div>
        <div class="field">
          <label>Gallery path</label>
          <input type="text" name="gallery_path" required>
        </div>
        <div class="field">
          <label><input type="checkbox" id="gallery-add-import-toggle"> Import an existing gallery</label>
        </div>
        <div class="field" id="gallery-add-import-row" hidden>
          <label>Import file (.db / .json / .zip)</label>
          <input type="file" name="import_file" accept=".db,.sqlite,.json,.zip">
        </div>
        <div id="flash-gallery-add"></div>
        <div class="dialog-actions">
          <button type="submit">Add</button>
          <button type="button" onclick="document.getElementById('gallery-add-dialog').close()">Cancel</button>
        </div>
      </form>
    </dialog>
    <script>
    function openAddGalleryDialog() {
      var dlg = document.getElementById('gallery-add-dialog');
      var form = dlg.querySelector('form');
      form.reset();
      setAddGalleryBusy(form, false);
      clearSlots('flash-gallery-add');
      syncImportToggle();
      dlg.showModal();
    }
    function syncImportToggle() {
      var toggle = document.getElementById('gallery-add-import-toggle');
      var row = document.getElementById('gallery-add-import-row');
      if (toggle && row) row.hidden = !toggle.checked;
    }
    document.getElementById('gallery-add-import-toggle')
      .addEventListener('change', syncImportToggle);
    // Disables the submit button and swaps its label while the Add request
    // is in flight. Without this the user gets no feedback between click
    // and the post-success reload, and can re-submit.
    function setAddGalleryBusy(form, busy) {
      var submit = form.querySelector('button[type=submit]');
      if (!submit) return;
      submit.disabled = busy;
      submit.textContent = busy ? 'Adding…' : 'Add';
    }
    // Mirrors the import dialog: on success, relay the flash from the
    // in-dialog target out to #flash-galleries so it survives the close,
    // then close + reload.
    function onAddGalleryResponse(form) {
      setAddGalleryBusy(form, false);
      var flash = document.getElementById('flash-gallery-add');
      if (flash && flash.querySelector('.flash-ok')) {
        var outer = document.getElementById('flash-galleries');
        if (outer) outer.innerHTML = flash.innerHTML;
        flash.innerHTML = '';
        document.getElementById('gallery-add-dialog').close();
        form.reset();
        setTimeout(function(){ window.location.reload(); }, 1500);
      }
    }
    </script>
  </section>

  <dialog id="gallery-rename-dialog">
    <form id="gallery-rename-form" hx-post="" hx-target="#flash-gallery-rename" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <p>Rename <strong id="gallery-rename-src"></strong></p>
      <div class="field">
        <label>New name</label>
        <input type="text" name="new_name" id="gallery-rename-input" required pattern="[A-Za-z0-9_\-]+" autocomplete="off"
               title="Letters, digits, underscore, dash"
               placeholder="letters / digits / _ / -">
      </div>
      <div id="flash-gallery-rename"></div>
      <div class="dialog-actions">
        <button type="submit">Rename</button>
        <button type="button" onclick="document.getElementById('gallery-rename-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="gallery-delete-dialog">
    <!-- Success sends HX-Refresh, which reloads the page and implicitly
         dismisses the dialog; on error the flash-err lands inside the
         dialog (#flash-gallery-delete) so the user actually sees it
         instead of having it written behind the modal, and the dialog
         stays open so the confirm-name input can be retried. -->
    <form id="gallery-delete-form" hx-post="" hx-target="#flash-gallery-delete" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <p>Delete gallery <strong id="gallery-delete-src"></strong>?</p>
      <p class="confirm-dialog-danger">The database and thumbnails will be erased.</p>
      <div class="field">
        <label><input type="checkbox" name="remove_folder"> Also delete the gallery folder (source images)</label>
      </div>
      <div class="field">
        <label>Type the gallery name to confirm</label>
        <input type="text" name="confirm_name" id="gallery-delete-confirm" required autocomplete="off">
      </div>
      <div id="flash-gallery-delete"></div>
      <div class="dialog-actions">
        <button type="submit" class="btn-danger">Delete</button>
        <button type="button" onclick="document.getElementById('gallery-delete-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="gallery-export-dialog">
    <form id="gallery-export-form" method="get" action=""
          onsubmit="setTimeout(function(){document.getElementById('gallery-export-dialog').close()}, 100)">
      <p>Export gallery <strong id="gallery-export-src"></strong></p>
      <div class="field">
        <label><input type="radio" name="format" value="db" checked> Database (.db): SQLite snapshot, monbooru format</label>
      </div>
      <div class="field">
        <label><input type="radio" name="format" value="json"> JSON (.json): human-readable dump, monbooru format</label>
      </div>
      <div class="field">
        <label><input type="radio" name="format" value="light"> Light (.json): images<->tags only, no monbooru-specific data</label>
      </div>
      <div class="field">
        <label><input type="checkbox" name="with_images" value="true" id="gallery-export-with-images"> Include image files (bundled in a .zip)</label>
      </div>
      <div class="dialog-actions">
        <button type="submit">Download</button>
        <button type="button" onclick="document.getElementById('gallery-export-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <dialog id="gallery-import-dialog">
    <!-- Two-mode dialog. Replace is the existing wipe-and-restore path; it
         keeps the type-to-confirm gate. Merge is additive (images ingested,
         tags applied, no wipe) and so skips the confirm. Client-side JS
         hides the confirm row and the destructive warning when Merge is
         selected, and flips the submit button between .btn-danger and a
         neutral style. -->
    <form id="gallery-import-form" hx-post="" hx-target="#flash-gallery-import" hx-swap="innerHTML"
          hx-encoding="multipart/form-data"
          hx-headers='{"X-CSRF-Token": "{{$csrf}}"}'
          hx-on::before-request="setImportBusy(this, true)"
          hx-on::after-request="onImportResponse(this)">
      <p>Import into gallery <strong id="gallery-import-src"></strong></p>
      <div class="field">
        <label><input type="radio" name="mode" value="merge" checked> Merge: add new images and tags from the uploaded file</label>
      </div>
      <div class="field">
        <label><input type="radio" name="mode" value="replace"> Replace: wipe this gallery and restore from the uploaded file</label>
      </div>
      <p id="gallery-import-danger" class="confirm-dialog-danger">Destructive: replaces the current database. If the uploaded file is a .zip with images, the source folder is replaced as well.</p>
      <div class="field" id="gallery-import-confirm-row">
        <label>Type the gallery name to confirm</label>
        <input type="text" name="confirm_name" autocomplete="off">
      </div>
      <div class="field">
        <label>File (.db, .json, or .zip)</label>
        <input type="file" name="file" accept=".db,.sqlite,.json,.zip" required>
      </div>
      <p id="gallery-import-wait" class="field-hint" hidden>Uploading and restoring the database. On large galleries this can take a few minutes; keep this tab open.</p>
      <div id="flash-gallery-import"></div>
      <div class="dialog-actions">
        <button type="submit" class="btn-danger">Import</button>
        <button type="button" onclick="document.getElementById('gallery-import-dialog').close()">Cancel</button>
      </div>
    </form>
  </dialog>

  <script>
  document.querySelectorAll('.btn-gallery-rename').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var name = this.dataset.name;
      var form = document.getElementById('gallery-rename-form');
      form.setAttribute('hx-post', '/settings/galleries/' + name + '/rename');
      if (window.htmx) window.htmx.process(form);
      document.getElementById('gallery-rename-src').textContent = name;
      clearSlots('flash-gallery-rename');
      var input = document.getElementById('gallery-rename-input');
      input.value = name;
      document.getElementById('gallery-rename-dialog').showModal();
      input.focus();
      input.select();
    });
  });
  document.querySelectorAll('.btn-gallery-delete').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var name = this.dataset.name;
      var form = document.getElementById('gallery-delete-form');
      form.setAttribute('hx-post', '/settings/galleries/' + name + '/delete');
      if (window.htmx) window.htmx.process(form);
      document.getElementById('gallery-delete-src').textContent = name;
      clearSlots('flash-gallery-delete');
      form.querySelector('input[name="remove_folder"]').checked = false;
      form.querySelector('input[name="confirm_name"]').value = '';
      document.getElementById('gallery-delete-dialog').showModal();
      document.getElementById('gallery-delete-confirm').focus();
    });
  });
  document.querySelectorAll('.btn-gallery-export').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var name = this.dataset.name;
      var form = document.getElementById('gallery-export-form');
      form.setAttribute('action', '/settings/galleries/' + name + '/export');
      document.getElementById('gallery-export-src').textContent = name;
      form.querySelector('input[name="format"][value="db"]').checked = true;
      form.querySelector('input[name="with_images"]').checked = false;
      document.getElementById('gallery-export-dialog').showModal();
    });
  });

  document.querySelectorAll('.btn-gallery-import').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var name = this.dataset.name;
      var canReplace = this.dataset.canReplace !== 'false';
      var form = document.getElementById('gallery-import-form');
      form.setAttribute('hx-post', '/settings/galleries/' + name + '/import');
      if (window.htmx) window.htmx.process(form);
      document.getElementById('gallery-import-src').textContent = name;
      clearSlots('flash-gallery-import');
      form.reset();
      setImportBusy(form, false);
      // Active and default galleries reject Replace server-side; disable the
      // radio up front and stay on the default Merge so the user can't pick
      // a mode that will error, and a hint explains why.
      var replaceRadio = form.querySelector('input[name="mode"][value="replace"]');
      var mergeRadio = form.querySelector('input[name="mode"][value="merge"]');
      var replaceLabel = replaceRadio.parentElement;
      replaceRadio.disabled = !canReplace;
      replaceLabel.title = canReplace ? '' : 'Replace is not allowed on the active or default gallery; switch to another first.';
      mergeRadio.checked = true;
      syncImportModeFields();
      document.getElementById('gallery-import-dialog').showModal();
    });
  });

  // Toggle the confirm-name row, destructive warning, and submit button
  // styling to match the selected mode. Replace keeps the type-to-confirm
  // gate and the red button; merge drops both so the user isn't forced to
  // type the name for a non-destructive action.
  function syncImportModeFields() {
    var form = document.getElementById('gallery-import-form');
    if (!form) return;
    var mode = form.querySelector('input[name="mode"]:checked').value;
    var confirmRow = document.getElementById('gallery-import-confirm-row');
    var confirmInput = confirmRow.querySelector('input[name="confirm_name"]');
    var danger = document.getElementById('gallery-import-danger');
    var submit = form.querySelector('button[type=submit]');
    if (mode === 'merge') {
      confirmRow.hidden = true;
      confirmInput.required = false;
      confirmInput.value = '';
      danger.hidden = true;
      submit.classList.remove('btn-danger');
    } else {
      confirmRow.hidden = false;
      confirmInput.required = true;
      danger.hidden = false;
      submit.classList.add('btn-danger');
    }
  }
  document.querySelectorAll('#gallery-import-form input[name="mode"]').forEach(function(radio) {
    radio.addEventListener('change', syncImportModeFields);
  });

  // Toggles the in-flight state of the import form: swaps the submit label,
  // disables the file + confirm inputs, and shows the wait hint. Called on
  // both the before-request and after-request HTMX events.
  function setImportBusy(form, busy) {
    var submit = form.querySelector('button[type=submit]');
    submit.disabled = busy;
    submit.textContent = busy ? 'Importing…' : 'Import';
    form.querySelector('input[name=file]').disabled = busy;
    form.querySelector('input[name=confirm_name]').disabled = busy;
    document.getElementById('gallery-import-wait').hidden = !busy;
  }

  // Runs after the import POST settles. Unwinds the busy state and, when
  // the server replied with a flash-ok body (written to the in-dialog
  // #flash-gallery-import by the hx-target), relays the flash out to
  // #flash-galleries so it survives the dialog close and then closes the
  // modal. Error responses keep the flash inside the dialog so the user
  // can read it and fix the confirm-name or file input.
  //
  // A successful import also flips the server-side active gallery, so the
  // page has to repaint to show the new badge in the galleries table and
  // the footer switcher. Delay the reload just long enough for the flash
  // to be readable in #flash-galleries.
  function onImportResponse(form) {
    setImportBusy(form, false);
    var flash = document.getElementById('flash-gallery-import');
    if (flash && flash.querySelector('.flash-ok')) {
      var outer = document.getElementById('flash-galleries');
      if (outer) outer.innerHTML = flash.innerHTML;
      flash.innerHTML = '';
      document.getElementById('gallery-import-dialog').close();
      setTimeout(function(){ window.location.reload(); }, 1500);
    }
  }
  </script>

  <section id="monloader" class="settings-section">
    <h3>Monloader</h3>
    <div id="flash-monloader"></div>
    <form hx-post="/settings/monloader" hx-target="#flash-monloader" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <div class="settings-sub">
        <h4>URLs</h4>
        <div class="settings-cols">
          <div class="field">
            <label for="monloader_api_url">api url</label>
            <input type="text" name="api_url" id="monloader_api_url" value="{{$cfg.Monloader.APIURL}}" placeholder="auto-detected from pairing">
            <p class="field-hint">Internal URL monbooru uses to reach monloader. Blank = auto-detected from the pairing.</p>
          </div>
          <div class="field">
            <label for="monloader_url">web url</label>
            <input type="text" name="monloader_url" id="monloader_url" value="{{$cfg.Server.MonloaderURL}}" placeholder="http://localhost:8081">
            <p class="field-hint">Browser URL for the footer "connected to monloader" link; blank = same as api url.</p>
          </div>
        </div>
      </div>
      <div class="settings-actions"><button type="submit">Save</button></div>
    </form>
    <div class="settings-sub">
      <h4>Pairing</h4>
      {{template "partials/monloader_pairing.html" (dict "Pending" $monloaderPending "Paired" $monloaderPaired "PeerURL" $monloaderPeerURL "CSRFToken" $csrf)}}
    </div>
  </section>

  <section id="tagger" class="settings-section">
    <div class="settings-section-header">
      <h3>Auto-Tagger</h3>
      {{template "partials/tagger_mode_badge.html" (dict "UseCUDA" $cfg.Tagger.UseCUDA)}}
    </div>
    <div id="flash-tagger"></div>
    {{$taggers := index . "Taggers"}}
    {{$rows := index . "TaggerRows"}}
    {{$supported := index . "SupportedCount"}}
    {{$unsupported := index . "UnsupportedCount"}}
    <form hx-post="/settings/tagger" hx-target="#flash-tagger" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <div class="settings-sub">
        <h4>Workers / GPU</h4>
        <div class="settings-cols">
          <div class="field">
            <label><input type="checkbox" name="use_cuda"{{if $cfg.Tagger.UseCUDA}} checked{{end}}> Use GPU (CUDA)</label>
            <p class="field-hint">Requires a CUDA-capable image and a GPU passed into the container.</p>
          </div>
          {{template "partials/range_field.html" dict "Name" "parallel" "Label" "Parallel workers" "Min" 1 "Max" 16 "Value" $cfg.Tagger.Parallel "Ticks" (list 1 2 4 8 12 16) "Hint" "Images tagged in parallel."}}
          {{template "partials/range_field.html" dict "Name" "idle_release_after_minutes" "Label" "Tagger RAM/VRAM idle release (minutes)" "Min" 0 "Max" 60 "Value" $cfg.Tagger.IdleReleaseAfterMinutes "Ticks" (list 0 15 30 45 60) "Hint" "Use 0 to free it just after inference."}}
        </div>
        <div class="settings-actions"><button type="submit">Save</button></div>
      </div>
    </form>
    <div class="settings-sub">
      <h4>Taggers list</h4>
      {{if $rows}}
      <div class="table-scroll">
      <table class="tagger-table">
        <thead>
          <tr><th>Tagger</th><th>Instructions</th><th>Status</th><th>Thresholds</th><th>Galleries</th><th>Enable</th><th>Delete</th></tr>
        </thead>
        <tbody>
          {{range $i, $r := $rows}}
          {{if and (gt $supported 0) (gt $unsupported 0) (eq $i $supported)}}
          <tr class="tagger-sep"><td colspan="7">unsupported (not in catalog)</td></tr>
          {{end}}
          <tr>
            <td>
              <strong>{{$r.Name}}</strong>
              {{if $r.Description}}<div class="field-hint tagger-row-desc">{{$r.Description}}</div>{{end}}
            </td>
            <td>
              {{if $r.Supported}}
              <button type="button" class="btn-sm btn-tagger-cmd"
                      data-tagger-name="{{$r.Name}}"
                      data-tagger-desc="{{$r.Description}}"
                      data-host-cmd="{{$r.HostCommand}}"
                      data-docker-cmd="{{$r.DockerCommand}}">Show instructions</button>
              {{end}}
            </td>
            <td>
              {{if not $r.Installed}}<span class="status-dim" title="Not installed">not installed</span>
              {{else if not $r.Available}}<span class="status-err" title="{{$r.Reason}}">unavailable</span>
              {{else if $r.Enabled}}<span class="status-badge status-enabled" title="Enabled">enabled</span>
              {{else}}<span class="status-dim" title="Disabled">disabled</span>{{end}}
            </td>
            <td>
              {{if and $r.Installed $r.Enabled}}
              <button type="button" class="btn-sm"
                      hx-get="/settings/tagger/{{$r.Name}}/thresholds"
                      hx-target="#tagger-thresh-{{$r.Name}}-body"
                      hx-trigger="click once"
                      onclick="document.getElementById('tagger-thresh-{{$r.Name}}').showModal()">Configure</button>
              <span id="tagger-thresh-summary-{{$r.Name}}" class="field-hint">{{$r.ThresholdSummary}}</span>
              {{else}}
              <span class="status-dim">-</span>
              {{end}}
            </td>
            <td>
              {{if and $r.Installed $r.Enabled}}
              <button type="button" class="btn-sm"
                      hx-get="/settings/tagger/{{$r.Name}}/galleries"
                      hx-target="#tagger-gal-{{$r.Name}}-body"
                      hx-trigger="click once"
                      onclick="document.getElementById('tagger-gal-{{$r.Name}}').showModal()">Configure</button>
              <span id="tagger-gal-summary-{{$r.Name}}" class="field-hint">{{$r.GallerySummary}}</span>
              {{else}}
              <span class="status-dim">-</span>
              {{end}}
            </td>
            <td>
              {{if $r.Installed}}
                {{if $r.Enabled}}
                <button type="button" class="btn-sm"
                        hx-post="/settings/tagger/{{$r.Name}}/disable" hx-target="#flash-tagger" hx-swap="innerHTML"
                        hx-vals='{"_csrf":"{{$csrf}}"}'>Disable</button>
                {{else if $r.Available}}
                <button type="button" class="btn-sm btn-success"
                        hx-post="/settings/tagger/{{$r.Name}}/enable" hx-target="#flash-tagger" hx-swap="innerHTML"
                        hx-vals='{"_csrf":"{{$csrf}}"}'>Enable</button>
                {{end}}
              {{end}}
            </td>
            <td>
              {{if and $r.Installed (not $r.Enabled)}}
              <button type="button" class="btn-sm btn-danger"
                      hx-post="/settings/tagger/{{$r.Name}}/delete" hx-target="#flash-tagger" hx-swap="innerHTML"
                      hx-vals='{"_csrf":"{{$csrf}}"}'
                      hx-confirm="Delete tagger {{$r.Name}}?"
                      data-confirm-danger="The folder under model_path will be permanently removed from disk."
                      data-confirm-ok="Delete">Delete</button>
              {{end}}
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
      </div>
      {{else}}
      <p class="field-hint">No tagger subfolders found in <code>{{$cfg.Paths.ModelPath}}</code>.</p>
      {{end}}
    </div>
    {{range $rows}}{{if .Installed}}
    <dialog id="tagger-thresh-{{.Name}}" class="tagger-thresh-dialog">
      <h4>{{.Name}} - thresholds</h4>
      <div id="tagger-thresh-{{.Name}}-body">Loading...</div>
    </dialog>
    <dialog id="tagger-gal-{{.Name}}" class="tagger-gal-dialog">
      <h4>{{.Name}} - galleries</h4>
      <div id="tagger-gal-{{.Name}}-body">Loading...</div>
    </dialog>
    {{end}}{{end}}
    <dialog id="tagger-cmd-dialog">
      <p><strong id="tagger-cmd-name"></strong> - <span id="tagger-cmd-desc"></span></p>
      <p class="field-hint">Run one of the commands below on a host with internet access, then reload the Settings page.</p>
      <p class="code-block-label"><strong>Direct host install</strong> <span class="field-hint">(run inside <code>{{$cfg.Paths.ModelPath}}</code>)</span>
        <button type="button" class="btn-sm code-block-copy" id="tagger-cmd-host-copy" title="Copy command">Copy</button>
        <span class="copy-flash" hidden>copied</span>
      </p>
      <pre class="code-block"><code id="tagger-cmd-host"></code></pre>
      <p class="code-block-label"><strong>Docker (monbooru container)</strong>
        <button type="button" class="btn-sm code-block-copy" id="tagger-cmd-docker-copy" title="Copy command">Copy</button>
        <span class="copy-flash" hidden>copied</span>
      </p>
      <pre class="code-block"><code id="tagger-cmd-docker"></code></pre>
      <div class="dialog-actions">
        <button type="button" onclick="this.closest('dialog').close()">Close</button>
      </div>
    </dialog>
  </section>

  <section id="relations" class="settings-section">
    <h3>Relations</h3>
    <div id="flash-relations-settings"></div>
    <form hx-post="/settings/relations" hx-target="#flash-relations-settings" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <div class="settings-cols">
        <div class="settings-sub">
          <h4>Find-pairs default distance</h4>
          {{template "partials/range_field.html" dict "Name" "default_distance" "Label" "Hamming distance" "Min" 0 "Max" 12 "Value" $cfg.Relations.DefaultDistance "Ticks" (list 0 2 4 6 8 10 12)}}
        </div>
        <div class="settings-sub">
          <h4>Default session order</h4>
          <div class="field">
            <label><input type="radio" name="default_session_order" value="smallest_distance_first" {{if eq $cfg.Relations.DefaultSessionOrder "smallest_distance_first"}}checked{{end}}> Smallest distance first</label>
            <label><input type="radio" name="default_session_order" value="largest_file_first" {{if eq $cfg.Relations.DefaultSessionOrder "largest_file_first"}}checked{{end}}> Largest file first</label>
            <label><input type="radio" name="default_session_order" value="random" {{if eq $cfg.Relations.DefaultSessionOrder "random"}}checked{{end}}> Random</label>
          </div>
        </div>
      </div>
      <div class="settings-actions"><button type="submit">Save</button></div>
    </form>
  </section>

  <section id="auth" class="settings-section">
    <h3>Authentication</h3>
    <div id="flash-auth"></div>
    <div class="settings-cols">
      {{template "partials/auth_password_section.html" (dict "AuthEnabled" $cfg.Auth.EnablePassword "CSRFToken" $csrf)}}
      <div class="settings-sub">
        <h4>API Tokens</h4>
        <p class="field-hint">Bearer tokens for the REST API. The secret is shown once, at creation.</p>
        {{template "partials/auth_tokens.html" (dict "Tokens" $cfg.Auth.Tokens "CSRFToken" $csrf)}}
        <form hx-post="/settings/auth/tokens" hx-target="#flash-auth" hx-swap="innerHTML" style="margin-top:8px">
          <input type="hidden" name="_csrf" value="{{$csrf}}">
          <input type="text" id="token-name-input" name="name" placeholder="token name" maxlength="64" required>
          <button type="submit">Create token</button>
        </form>
      </div>
    </div>
  </section>

  <section id="maintenance" class="settings-section">
    <h3>Maintenance</h3>
    <div id="flash-maintenance"></div>
    <div class="table-scroll">
    <table class="maintenance-table">
      <tbody>
        <tr>
          <td><strong>Missing images</strong> <span class="field-hint">- remove DB entries whose files are gone (<a href="/?q=missing:true">view</a>)</span></td>
          <td>
            <form hx-post="/settings/maintenance/prune-missing" hx-target="#flash-maintenance" hx-swap="innerHTML"
                  hx-confirm="Prune every image marked missing from the database?"
                  data-confirm-danger="Tags on those images are removed too. Re-mounting the gallery volume before pruning restores the files."
                  data-confirm-ok="Prune"
                  style="display:inline">
              <input type="hidden" name="_csrf" value="{{$csrf}}">
              <button type="submit" class="btn-danger btn-sm">Prune</button>
            </form>
          </td>
        </tr>
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Orphaned thumbnails" "Desc" "remove thumbnail files with no matching image" "URL" "/settings/maintenance/prune-orphaned-thumbnails" "Verb" "Remove"}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Rebuild thumbnails" "Desc" "regenerate thumbnail files for every image" "URL" "/settings/maintenance/rebuild-thumbnails" "Verb" "Rebuild" "JobKick" true "Confirm" "Rebuild thumbnails for every image in this gallery?" "ConfirmDanger" "Long-running job; blocks other jobs until it finishes." "ConfirmOK" "Rebuild"}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Compute perceptual hashes" "Desc" "backfill phash for every image that doesn't have one yet" "URL" "/settings/maintenance/compute-phashes" "Verb" "Compute" "JobKick" true "Confirm" "Compute perceptual hashes for every image still missing one?" "ConfirmOK" "Compute"}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Rebuild pair queue" "Desc" "wipe potential relation pairs and rescan from scratch" "URL" "/relations/find-pairs" "Verb" "Rebuild" "Danger" true "JobKick" true "Confirm" "Wipe the existing pair queue and rescan from scratch?" "ConfirmDanger" "Skipped pairs and any queue work in progress are dropped." "ConfirmOK" "Rebuild" "Fields" (dict "replace" "true" "confirm" "REBUILD")}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Tag counts" "Desc" "recompute usage counts" "URL" "/settings/maintenance/recalc-tags" "Verb" "Recalculate"}}
        <tr>
          <td><strong>Category conflicts</strong> <span class="field-hint">- list tags whose name occupies more than one category</span></td>
          <td>
            <form hx-post="/settings/maintenance/tag-conflicts" hx-target="#flash-maintenance" hx-swap="innerHTML" style="display:inline">
              <input type="hidden" name="_csrf" value="{{$csrf}}">
              <button type="submit" class="btn-sm">List</button>
            </form>
          </td>
        </tr>
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Re-extract metadata" "Desc" "re-parse metadata for every image" "URL" "/settings/maintenance/re-extract-metadata" "Verb" "Re-extract" "Confirm" "Re-parse metadata for every image in this gallery?" "ConfirmDanger" "Long-running job; blocks other jobs until it finishes." "ConfirmOK" "Re-extract"}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Vacuum database" "Desc" "compact the SQLite file after mass deletions" "URL" "/settings/maintenance/vacuum-db" "Verb" "Vacuum" "Confirm" "Compact the SQLite database now?" "ConfirmDanger" "Holds a database lock for the duration of the VACUUM; other jobs and queries will wait." "ConfirmOK" "Vacuum"}}
        {{template "maintenance_row" dict "CSRF" $csrf "Title" "Free memory" "Desc" "shrink SQLite caches, return the Go heap, and release the auto-tagger from RAM/VRAM." "URL" "/settings/maintenance/free-memory" "Verb" "Free"}}
      </tbody>
    </table>
    </div>

  </section>

  {{$sched := $cfg.Schedule}}
  {{$schedSt := index . "ScheduleStatus"}}
  <section id="schedule" class="settings-section">
    <h3>Schedule</h3>
    <div id="flash-schedule"></div>
    <p class="field-hint">Runs the selected maintenance actions once per day at the configured time, on every configured gallery in sequence. Skipped silently if another job is already running at fire time.</p>
    <p class="field-hint">
      {{if $schedSt.LastRun.IsZero}}Last run: never.{{else}}Last run: {{$schedSt.LastRun.Format "2006-01-02 15:04:05"}} ({{$schedSt.LastInfo}}, {{schedDuration $schedSt.LastDur}}).{{end}}
      {{if $schedSt.NextRun.IsZero}}No next run scheduled (every action is off).{{else}}Next run: {{$schedSt.NextRun.Format "2006-01-02 15:04:05"}}.{{end}}
    </p>
    <form hx-post="/settings/schedule" hx-target="#flash-schedule" hx-swap="innerHTML">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <div class="field">
        <label>Time of day (24h, HH:MM) <input type="text" name="time" value="{{$sched.Time}}"
               pattern="^([01]\d|2[0-3]):[0-5]\d$" placeholder="HH:MM" maxlength="5"
               class="schedule-time-input" required></label>
      </div>
      <div class="schedule-grid">
        <div class="field">
          <label><input type="checkbox" name="sync_gallery"{{if $sched.SyncGallery}} checked{{end}}> Sync gallery</label>
        </div>
        <div class="field">
          <label><input type="checkbox" name="remove_orphans"{{if $sched.RemoveOrphans}} checked{{end}}> Remove orphaned thumbnails</label>
        </div>
        <div class="field">
          <label><input type="checkbox" name="run_auto_taggers"{{if $sched.RunAutoTaggers}} checked{{end}}> Run enabled auto-taggers</label>
        </div>
        <div class="field">
          <label><input type="checkbox" name="find_relation_pairs"{{if $sched.FindRelationPairs}} checked{{end}}> Find relation pairs (phash near-duplicates)</label>
        </div>
      </div>
      <div class="settings-actions"><button type="submit">Save</button></div>
    </form>
  </section>

  {{$stats := index . "Stats"}}
  <section id="stats" class="settings-section">
    <h3>Stats</h3>
    <div class="stats-cols">
    <div class="settings-sub">
      <h4>Process memory</h4>
      <table class="stats-table">
        <tbody>
          {{if $stats.Mem.Available}}
          <tr><th>Memory used (PSS)</th><td>{{humanBytes $stats.Mem.Total}}</td></tr>
          {{if or $stats.Mem.Anon $stats.Mem.File}}
          <tr><th class="stats-d1">Private (anonymous)</th><td>{{humanBytes $stats.Mem.Anon}}</td></tr>
          <tr><th class="stats-d2">Go runtime (reserved)</th><td>{{humanBytes $stats.Mem.Sys}}</td></tr>
          <tr><th class="stats-d3">Go heap (live objects)</th><td>{{humanBytes $stats.Mem.HeapAlloc}}</td></tr>
          <tr><th class="stats-d2">Native heap (SQLite, CGO)</th><td>{{humanBytes $stats.Mem.Native}}</td></tr>
          <tr><th class="stats-d1">Shared (file-backed)</th><td>{{humanBytes $stats.Mem.File}}</td></tr>
          {{if $stats.Mem.DB}}
          <tr><th class="stats-d2">DB pages (memory-mapped)</th><td>{{humanBytes $stats.Mem.DB}}</td></tr>
          <tr><th class="stats-d2">Code &amp; shared libs</th><td>{{humanBytes $stats.Mem.OtherFile}}</td></tr>
          {{end}}
          {{else}}
          <tr><th class="stats-d1">Go runtime (reserved)</th><td>{{humanBytes $stats.Mem.Sys}}</td></tr>
          <tr><th class="stats-d2">Go heap (live objects)</th><td>{{humanBytes $stats.Mem.HeapAlloc}}</td></tr>
          {{end}}
          {{else}}
          <tr><th>Go runtime (reserved)</th><td>{{humanBytes $stats.Mem.Sys}}</td></tr>
          <tr><th class="stats-d1">Go heap (live objects)</th><td>{{humanBytes $stats.Mem.HeapAlloc}}</td></tr>
          {{end}}
          <tr><th>Goroutines</th><td>{{$stats.Mem.Goroutines}}</td></tr>
        </tbody>
      </table>
    </div>
    {{$tg := $stats.Tagger}}
    <div class="settings-sub">
      <h4>Auto-tagger</h4>
      <table class="stats-table">
        <tbody>
          {{if $tg.Loaded}}
          <tr><th>Mode</th><td>{{if $tg.UseCUDA}}CUDA{{else}}CPU{{end}}</td></tr>
          <tr><th>Status</th><td>
            {{if $tg.InUse}}running
            {{else}}idle {{schedDuration $tg.IdleFor}}
              {{if $tg.IdleReleaseAfter}}
                {{$remain := minusDuration $tg.IdleReleaseAfter $tg.IdleFor}}
                {{if gt (int64Duration $remain) 0}}(releases in {{schedDuration $remain}}){{else}}(release pending){{end}}
              {{end}}
            {{end}}
          </td></tr>
          <tr><th>Models</th><td>{{range $i, $n := $tg.Sessions}}{{if $i}}, {{end}}{{$n}}{{end}}</td></tr>
          {{if $tg.WorkerPSS}}
          <tr><th>Worker PID</th><td>{{$tg.WorkerPID}}</td></tr>
          <tr><th class="stats-d1">Worker memory (PSS)</th><td>{{humanBytes $tg.WorkerPSS}}</td></tr>
          <tr><th class="stats-d2">Worker native (ONNX + CGO)</th><td>{{humanBytes $tg.WorkerAnon}}</td></tr>
          <tr><th class="stats-d2">Worker code &amp; libs</th><td>{{humanBytes $tg.WorkerFile}}</td></tr>
          {{end}}
          {{else}}
          <tr><th>Status</th><td>not loaded</td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
    <div class="settings-sub">
      <h4>Database size per gallery</h4>
      <div class="table-scroll">
      <table class="stats-table">
        <thead><tr><th>Gallery</th><th>DB path</th><th>Size</th></tr></thead>
        <tbody>
          {{range $stats.Galleries}}
          <tr>
            <td><strong>{{.Name}}</strong></td>
            <td><code>{{.DBPath}}</code></td>
            <td>{{humanBytes .DBSize}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
      </div>
    </div>
    <div class="settings-sub">
      <h4>Filesystem free space</h4>
      {{if $stats.Mounts}}
      <div class="table-scroll">
      <table class="stats-table">
        <thead><tr><th>Mount</th><th>Used</th><th>Free</th><th>Total</th><th>Used %</th></tr></thead>
        <tbody>
          {{range $stats.Mounts}}
          <tr>
            <td>{{range $i, $l := .Labels}}{{if $i}}, {{end}}{{$l}}{{end}}</td>
            <td>{{humanBytes .UsedSize}}</td>
            <td>{{humanBytes .FreeSize}}</td>
            <td>{{humanBytes .TotalSize}}</td>
            <td>{{.UsedPct}}%</td>
          </tr>
          {{end}}
        </tbody>
      </table>
      </div>
      {{end}}
      {{range $stats.FSWarnings}}<p class="field-hint">{{.}}</p>{{end}}
    </div>
    </div>
  </section>
</div>

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