{{define "tags_detail.html"}}
{{template "layout_head" .}}
<div id="sidebar-inner"></div>
{{template "layout_mid" .}}

{{$csrf := .CSRFToken}}
{{$kinds := .OriginKinds}}
<div id="tag-detail-page">
  <p class="tag-detail-crumb"><a href="/tags">‹ Tags</a> <span class="field-hint">/ #{{.Tag.ID}}</span></p>

  <h2 id="tag-detail-header">
    <span id="tag-detail-name" style="color:{{.Tag.CategoryColor}}">{{.Tag.Name}}</span>
    {{if .Tag.IsAlias}}<span class="alias-badge">alias</span>{{end}}
    {{if .IsRating}}
    <span class="field-hint">(built-in rating)</span>
    {{else}}
    <span class="field-hint" id="tag-detail-cat">{{.Tag.CategoryName}}</span>
    {{end}}
    <span class="tag-detail-actions">
      {{if not .IsRating}}
      <button type="button" id="btn-detail-rename" class="btn-sm" data-id="{{.Tag.ID}}" data-name="{{.Tag.Name}}">Rename</button>
      <button type="button" id="btn-detail-category" class="btn-sm">Change category…</button>
      <button type="button" id="btn-detail-alias" class="btn-sm">{{if .Tag.IsAlias}}Repoint to…{{else}}Alias to…{{end}}</button>
      {{end}}
      {{if and .MonloaderPaired .MonloaderPTR (not .Tag.IsAlias) (not .IsRating)}}
      <button type="button" id="btn-detail-ptr" class="btn-sm monloader-accent"
              title="Add this tag's aliases and implications from the Public Tag Repository">PTR lookup</button>
      {{end}}
      <button type="button" id="btn-detail-delete" class="btn-sm btn-danger"
              data-name="{{.Tag.Name}}" data-category="{{.Tag.CategoryName}}"
              title="{{if .IsRating}}Strip this rating from every image (the catalog row stays){{else}}Delete this tag from every image{{end}}">Delete</button>
    </span>
  </h2>

  <p class="tag-detail-meta">
    usage <strong>{{.Tag.UsageCount}}</strong>
    · origin
    {{if .Tag.Origin}}
      {{$kind := index $kinds .Tag.Origin}}
      {{if eq $kind "user"}}<span class="origin-user">user</span>{{else}}<span class="origin-chip origin-{{$kind}}" title="{{.Tag.Origin}}">{{.Tag.Origin}}</span>{{end}}
    {{else}}<span class="origin-none">—</span>{{end}}
    · created <strong>{{.Tag.CreatedAt.Format "2006-01-02"}}</strong>
    · last used {{if .Tag.LastUsedAt.IsZero}}<span class="origin-none">—</span>{{else}}<strong>{{.Tag.LastUsedAt.Format "2006-01-02"}}</strong>{{end}}
  </p>

  <div id="tag-flash"></div>

  {{if .Tag.IsAlias}}
  <section class="tag-detail-section">
    <h3>Resolves to</h3>
    {{with .Canonical}}
    <div class="tag-canonical-card">
      <span style="color:{{$.Tag.CategoryColor}}">{{$.Tag.Name}}</span>
      <span class="merge-arrow">→</span>
      <a href="/tags/{{.ID}}" style="color:{{.CategoryColor}}">{{.Name}}</a>
      <span class="field-hint">{{.CategoryName}}</span>
      · usage {{.UsageCount}}
      · last used {{if .LastUsedAt.IsZero}}—{{else}}{{.LastUsedAt.Format "2006-01-02"}}{{end}}
      · <a href="/tags/{{.ID}}">details →</a>
    </div>
    {{else}}
    <p class="field-hint">Canonical tag missing.</p>
    {{end}}
    <p class="field-hint">Searches for {{.Tag.Name}} and new adds of it land on the canonical. An alias row never carries images itself.</p>
  </section>
  {{else}}
  <!-- Inbound (aliases, implied by) left, outbound (implies) right; the
       facing rails meet mid-gap in the tag's category color so the two
       relational blocks read as flowing through the tag. Stats and the
       recent strip stack below on the left. -->
  <div class="tag-detail-cols">
    <div>
      <div class="tag-detail-inbound" style="border-color:{{.Tag.CategoryColor}}">
        <section class="tag-detail-section">
          <h3>Aliases pointing here</h3>
          {{if .Aliases}}
          <ul class="tag-list">
            {{range .Aliases}}
            <li class="tag-item">
              <a href="/tags/{{.ID}}" style="color:{{.CategoryColor}}" title="Alias details">{{.Name}}</a>
              {{if .Origin}}
              {{$kind := index $kinds .Origin}}
              {{if eq $kind "user"}}<span class="origin-user">user</span>{{else}}<span class="origin-chip origin-{{$kind}}" title="{{.Origin}}">{{.Origin}}</span>{{end}}
              {{end}}
              <button class="tag-remove-btn"
                      hx-delete="/tags/{{.ID}}"
                      hx-headers='{"X-CSRF-Token":"{{$csrf}}"}'
                      hx-confirm="Delete the alias {{.Name}}?"
                      data-confirm-ok="Delete"
                      hx-on::after-request="if(event.detail.successful){this.closest('li').remove()}"
                      title="Delete this alias">×</button>
            </li>
            {{end}}
          </ul>
          {{else}}
          <p class="field-hint">No aliases point at this tag.</p>
          {{end}}
        </section>

        <section class="tag-detail-section">
          <h3>Implied by</h3>
          {{if .ImpliedBy}}
          <ul class="tag-list">
            {{range .ImpliedBy}}
            <li class="tag-item">
              <a href="/tags/{{.ParentID}}" style="color:{{.ParentCategoryColor}}">{{.ParentName}}</a>
              {{if .Origin}}
              {{$kind := index $kinds .Origin}}
              {{if eq $kind "user"}}<span class="origin-user">user</span>{{else}}<span class="origin-chip origin-{{$kind}}" title="{{.Origin}}">{{.Origin}}</span>{{end}}
              {{end}}
              <button class="tag-remove-btn"
                      hx-delete="/tags/{{.ParentID}}/implications/{{$.Tag.ID}}"
                      hx-headers='{"X-CSRF-Token":"{{$csrf}}"}'
                      hx-on::after-request="if(event.detail.successful){this.closest('li').remove()}"
                      title="Remove this implication">×</button>
            </li>
            {{end}}
          </ul>
          {{else}}
          <p class="field-hint">Nothing implies this tag.</p>
          {{end}}
        </section>
      </div>

      <!-- Applied-by and the histogram aggregate every row the tag
           carries - seconds on a monster tag - so they arrive as one
           lazy fragment after first paint. -->
      <section class="tag-detail-section"
               hx-get="/tags/{{.Tag.ID}}/usage" hx-trigger="load" hx-swap="innerHTML">Loading…</section>

      <section class="tag-detail-section">
        <h3>Recent images</h3>
        {{if .RecentImageIDs}}
        <div class="tag-recent-strip">
          {{range .RecentImageIDs}}
          <a href="/images/{{.}}"><img src="/thumbnails/{{$.ActiveGallery}}/{{.}}.jpg" alt="image {{.}}" loading="lazy"></a>
          {{end}}
        </div>
        <p><a href="/?q={{.Tag.CategoryName}}:{{.Tag.Name}}">all {{.Tag.UsageCount}} in gallery →</a></p>
        {{else}}
        <p class="field-hint">No visible images carry this tag.</p>
        {{end}}
      </section>
    </div>

    <div>
      <div class="tag-detail-outbound" style="border-color:{{.Tag.CategoryColor}}">
        <section class="tag-detail-section">
          <h3>Implies</h3>
          <div id="implications-editor" data-tag-id="{{.Tag.ID}}">
            {{template "partials/implications_dialog.html" (dict "Parent" .Tag "Implications" .Implications "CSRFToken" $csrf)}}
          </div>
        </section>
      </div>
    </div>
  </div>
  {{end}}
</div>

<!-- Rename dialog -->
<dialog id="rename-dialog">
  <form id="rename-form"
        hx-post=""
        hx-target="#rename-error"
        hx-swap="innerHTML">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <p>Rename <strong id="rename-src-name"></strong></p>
    <div class="field">
      <label>New name</label>
      <input type="text" name="name" id="rename-new-name" required autocomplete="off">
    </div>
    {{if not .Tag.IsAlias}}
    <label style="display:block;font-size:12px">
      <input type="checkbox" name="keep_alias" value="1" id="rename-keep-alias">
      Keep the old name as an alias
    </label>
    {{end}}
    <div id="rename-error"></div>
    <div class="dialog-actions">
      <button type="submit">Rename</button>
      <button type="button" onclick="document.getElementById('rename-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Change-category dialog: same PATCH as the listing's inline select,
     collision merge offer included via the #tag-flash response. -->
{{if not .IsRating}}
<dialog id="detail-category-dialog">
  <form hx-patch="/tags/{{.Tag.ID}}/category"
        hx-target="#tag-flash"
        hx-swap="innerHTML"
        hx-on::after-request="onDetailCategoryChanged(event)">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <p>Move <strong>{{.Tag.Name}}</strong> to:</p>
    <div class="field">
      <label>Target category</label>
      <select name="category_id" id="detail-category-select">
        {{range .Categories}}
        <option value="{{.ID}}" data-color="{{.Color}}" {{if eq .ID $.Tag.CategoryID}}selected{{end}}>{{.Name}}</option>
        {{end}}
      </select>
    </div>
    <div class="dialog-actions">
      <button type="submit">Move</button>
      <button type="button" onclick="document.getElementById('detail-category-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>
{{end}}

<!-- Alias / repoint dialog: batch-alias with this tag as the whole
     scope. A real form so Enter in the input submits like the
     create-alias dialog. -->
<dialog id="detail-alias-dialog">
  <form onsubmit="event.preventDefault(); confirmDetailAlias()">
    <p>{{if .Tag.IsAlias}}Repoint{{else}}Alias{{end}} <strong>{{.Tag.Name}}</strong> to:</p>
    <div class="field">
      <label>Canonical tag</label>
      {{template "tag_suggest_input" dict "Name" "canonical_id" "InputID" "detail-alias-canon" "SuggestID" "detail-alias-suggest" "Required" true}}
    </div>
    {{if not .Tag.IsAlias}}
    <p style="color:var(--error);font-size:12px">Every image tagged {{.Tag.Name}} moves to the canonical and its implications go with it; the name stays as a zero-usage alias. This cannot be undone.</p>
    {{end}}
    <p style="color:var(--fg-dim);font-size:12px">The canonical is created if it doesn't exist yet.</p>
    <div id="detail-alias-flash"></div>
    <div class="dialog-actions">
      <button type="submit" class="btn-danger">{{if .Tag.IsAlias}}Repoint{{else}}Alias{{end}}</button>
      <button type="button" onclick="document.getElementById('detail-alias-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<script>
var TAG_ID = {{.Tag.ID}};

(function() {
  var btn = document.getElementById('btn-detail-rename');
  if (!btn) return;
  btn.addEventListener('click', function() {
    document.getElementById('rename-src-name').textContent = this.dataset.name;
    clearSlots('rename-error');
    var input = document.getElementById('rename-new-name');
    input.value = this.dataset.name;
    openHxRewriteDialog('rename-form', 'hx-post', '/tags/' + this.dataset.id + '/rename', 'rename-dialog');
    input.focus();
    input.select();
  });
})();

(function() {
  var btn = document.getElementById('btn-detail-category');
  if (!btn) return;
  btn.addEventListener('click', function() {
    document.getElementById('detail-category-dialog').showModal();
  });
})();

// A category collision answers 200 with a flash-err carrying the merge
// offer, so success alone can't drive the header repaint.
function onDetailCategoryChanged(event) {
  document.getElementById('detail-category-dialog').close();
  if (!event.detail.successful) return;
  if (event.detail.xhr.responseText.indexOf('flash-err') !== -1) return;
  var sel = document.getElementById('detail-category-select');
  updateDetailColor(sel);
  var cat = document.getElementById('tag-detail-cat');
  var opt = sel.options[sel.selectedIndex];
  if (cat && opt) cat.textContent = opt.text;
}

(function() {
  var btn = document.getElementById('btn-detail-alias');
  if (!btn) return;
  btn.addEventListener('click', function() {
    clearSlots('detail-alias-flash', 'detail-alias-suggest');
    document.getElementById('detail-alias-canon').value = '';
    document.getElementById('detail-alias-dialog').showModal();
    document.getElementById('detail-alias-canon').focus();
  });
})();

function confirmDetailAlias() {
  clearSlots('detail-alias-flash');
  var params = new URLSearchParams();
  params.set('ids', String(TAG_ID));
  params.set('canonical_id', document.getElementById('detail-alias-canon').value);
  postForm('/tags/batch-alias', params, {
    dialogId: 'detail-alias-dialog',
    flashId: 'detail-alias-flash',
    failMsg: 'Alias failed.',
    catchMsg: 'Alias request failed.',
    onOK: function() {
      _pendingGalleryReload = true;
      if (typeof refreshJobStatus === 'function') refreshJobStatus();
    }
  });
}

(function() {
  var btn = document.getElementById('btn-detail-ptr');
  if (!btn) return;
  btn.addEventListener('click', function() {
    clearSlots('tag-flash');
    postForm('/tags/' + TAG_ID + '/ptr-lookup', null, {
      flashId: 'tag-flash',
      failMsg: 'PTR lookup failed.',
      catchMsg: 'PTR lookup request failed.',
      onOK: function() {
        _pendingGalleryReload = true;
        if (typeof refreshJobStatus === 'function') refreshJobStatus();
      }
    });
  });
})();

(function() {
  var btn = document.getElementById('btn-detail-delete');
  if (!btn) return;
  btn.addEventListener('click', function() {
    var name = this.dataset.name;
    var isRating = this.dataset.category === 'rating';
    var msg = isRating
      ? 'Strip "' + name + '" from every image?'
      : 'Delete tag "' + name + '" and remove it from every image?';
    var danger = isRating
      ? 'The rating tag itself stays in the catalog and can be re-added later.'
      : 'This cannot be undone.';
    var btn = this;
    showConfirm(msg, function() {
      // The cascade on a heavily-used tag takes seconds; surface the
      // wait and block a second click until the DELETE answers.
      btn.disabled = true;
      var el = document.getElementById('tag-flash');
      setFlashText(el, 'warn', (isRating ? 'Stripping' : 'Deleting') + ' "' + name + '"…');
      fetch('/tags/' + TAG_ID, {
        method: 'DELETE',
        headers: {'X-CSRF-Token': getCSRFToken()}
      }).then(function(r) {
        if (r.ok) {
          stashActionFlash(escapeHTML(isRating ? 'Stripped "' + name + '" from every image.' : 'Tag "' + name + '" deleted.'), 'ok');
          window.location.href = '/tags';
        } else {
          btn.disabled = false;
          r.text().then(function(t) {
            setFlashText(el, 'err', t || 'Delete failed.');
          });
        }
      }).catch(function() {
        btn.disabled = false;
        setFlashText(el, 'err', 'Delete request failed.');
      });
    }, danger, isRating ? 'Strip' : 'Delete');
  });
})();

function updateDetailColor(sel) {
  var opt = sel.options[sel.selectedIndex];
  var name = document.getElementById('tag-detail-name');
  if (opt && name && opt.dataset.color) name.style.color = opt.dataset.color;
}

// mergeCategoryCollision re-runs an inline category move with merge=1
// after the collision flash offered it (same handler contract as the
// /tags listing).
function mergeCategoryCollision(tagID, catID) {
  var body = new URLSearchParams();
  body.set('category_id', String(catID));
  body.set('merge', '1');
  fetch('/tags/' + tagID + '/category', {
    method: 'PATCH',
    headers: {'X-CSRF-Token': getCSRFToken(), 'Content-Type': 'application/x-www-form-urlencoded'},
    body: body
  }).then(function(r) {
    if (r.ok) {
      stashActionFlash('Merged into the existing tag.', 'ok');
      window.location.reload();
    }
  });
}

// The implications editor reuses the dialog partial; after an add the
// body re-fetches so fresh edges render, mirroring the old dialog's
// behaviour. The remove buttons prune their own <li> in place.
function reloadImplicationsBody() {
  var body = document.getElementById('implications-editor');
  if (!body) return;
  fetch('/tags/' + TAG_ID + '/implications', {credentials: 'same-origin', headers: {'HX-Request': 'true'}})
    .then(function(r) { return r.text(); })
    .then(function(html) {
      body.innerHTML = html;
      if (window.htmx) window.htmx.process(body);
    });
}

function handleImplicationAdded(event) {
  var hdr = event.detail.xhr.getResponseHeader('HX-Trigger') || '';
  if (hdr.indexOf('implication-added') !== -1) {
    var input = document.getElementById('implication-add-input');
    if (input) input.value = '';
    clearSlots('implication-add-suggest');
    reloadImplicationsBody();
  }
}
</script>

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