{{define "collections.html"}}
{{template "layout_head" .}}
{{$prefix := .Prefix}}
{{$sort := .Sort}}
<div id="sidebar-inner">
  <!-- Boosted filter links swap #collections-page in place and refresh
       this sidebar out-of-band so active states track the pushed URL
       without a full reload, mirroring the tags page. -->
  <div class="sidebar-section"
       hx-boost="true" hx-target="#collections-page" hx-select="#collections-page" hx-swap="outerHTML"
       hx-select-oob="#sidebar-inner" hx-push-url="true">
    <h3>Filter</h3>
    <form action="/collections" method="get" class="tags-filter-row">
      <!-- No sidebar OOB refresh here (the wrapper's hx-select-oob is
           inherited without the unset): swapping the input would drop
           focus and eat the letters typed since the request. -->
      <input type="text" name="q" id="collections-q-input" value="{{$prefix}}" placeholder="Search…"
             hx-get="/collections"
             hx-trigger="input changed delay:300ms"
             hx-include="closest form"
             hx-target="#collections-page" hx-select="#collections-page" hx-swap="outerHTML"
             hx-select-oob="unset"
             hx-push-url="true">
      <input type="hidden" name="sort" value="{{$sort}}">
      <button type="submit">OK</button>
    </form>

    <div class="filter-group">
      <span class="filter-label">Sort</span>
      <a class="filter-btn{{if eq $sort "size"}} active{{end}}" href="/collections?q={{$prefix}}&sort=size">By size</a>
      <a class="filter-btn{{if eq $sort "name"}} active{{end}}" href="/collections?q={{$prefix}}&sort=name">By name</a>
    </div>
  </div>
</div>
{{template "layout_mid" .}}

<div id="collections-page">
  <h2 id="collections-page-header">
    <span>Collections <span class="count-badge">{{.Total}}</span></span>
  </h2>

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

  <ul class="relations-cards">
    {{$gallery := .ActiveGallery}}
    {{range .Collections}}
    {{$q := printf `collection:"%s"` (qval .Name)}}
    <li class="relations-card" data-name="{{.Name}}">
      <div class="collection-card-head">
        <a href="/?q={{urlQ $q}}" title="Browse {{.Name}}"><strong>{{.Name}}</strong></a>
        <span class="field-hint">{{.Count}} image{{if ne .Count 1}}s{{end}}</span>
        <button type="button" class="btn-link-accent btn-rename-collection" data-name="{{.Name}}">[rename]</button>
        <button type="button" class="btn-link-accent btn-reorder-collection" data-name="{{.Name}}">[reorder]</button>
        <button type="button" class="btn-link-accent btn-dissolve-collection" data-name="{{.Name}}">[dissolve]</button>
        {{template "partials/collection_find_relations.html" (dict "Name" .Name "FindRelations" .FindRelations "CSRFToken" $.CSRFToken)}}
      </div>
      <div class="collection-preview">
        {{range .Samples}}
        <a href="/images/{{.ID}}" class="relations-card-thumb" title="Image {{.ID}}">
          <img src="/thumbnails/{{$gallery}}/{{.ID}}.jpg" alt="image {{.ID}}" loading="lazy">
          {{with .Order}}<span class="relations-card-id">#{{.}}</span>{{end}}
        </a>
        {{else}}
        <span class="field-hint">No previewable images.</span>
        {{end}}
      </div>
    </li>
    {{else}}
    {{if $prefix}}
    <li class="no-results">No collections match "{{$prefix}}".</li>
    {{else}}
    <li class="no-results">No collections yet. Add an image to a collection to create one.</li>
    {{end}}
    {{end}}
  </ul>

  {{$base := printf "/collections?q=%s&sort=%s&page=" .Prefix .Sort}}
  <div hx-boost="true" hx-target="#collections-page" hx-select="#collections-page" hx-swap="outerHTML" hx-select-oob="#sidebar-inner" hx-push-url="true">
  {{template "partials/pagination.html" (dict "Base" $base "Page" .Page "Total" .TotalPages)}}
  </div>
</div>

<dialog id="collection-rename-dialog">
  <form id="collection-rename-form">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" id="collection-rename-prev" name="prev" value="">
    <p>Rename <strong id="collection-rename-src"></strong></p>
    <div class="field">
      <label>New name (renaming onto an existing collection merges them)</label>
      {{template "suggest_input" dict "Name" "name" "InputID" "collection-rename-input" "Endpoint" "/internal/collection/suggest" "SuggestID" "collection-rename-suggest" "Required" true}}
    </div>
    <div id="collection-rename-error"></div>
    <div class="dialog-actions">
      <button type="submit">Rename</button>
      <button type="button" onclick="document.getElementById('collection-rename-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<dialog id="collection-order-dialog">
  <form id="collection-order-form">
    <div id="collection-order-body"></div>
    <div id="collection-order-error"></div>
    <div class="dialog-actions">
      <button type="submit">Save order</button>
      <button type="button" id="collection-order-reset">Reset</button>
      <button type="button" onclick="document.getElementById('collection-order-dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>

<script>
// htmx swaps #collections-page in place on filter clicks and the live
// search, so the card buttons bind through delegated document-level
// listeners that resolve their element at event time.
function openCollectionRename(btn) {
  var name = btn.dataset.name;
  document.getElementById('collection-rename-prev').value = name;
  document.getElementById('collection-rename-src').textContent = name;
  clearSlots('collection-rename-error', 'collection-rename-suggest');
  var input = document.getElementById('collection-rename-input');
  input.value = name;
  document.getElementById('collection-rename-dialog').showModal();
  input.focus();
  input.select();
}

document.getElementById('collection-rename-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var prev = document.getElementById('collection-rename-prev').value;
  var name = document.getElementById('collection-rename-input').value.trim();
  var err = document.getElementById('collection-rename-error');
  err.innerHTML = '';
  if (!name) { err.innerHTML = '<div class="flash flash-err">New name required.</div>'; return; }
  postForm('/collections/rename', {prev: prev, name: name}, {
    okStatus: 202,
    dialogId: 'collection-rename-dialog',
    flashId: 'collection-rename-error',
    failMsg: 'Rename failed.',
    catchMsg: 'Rename request failed.',
    onOK: function() {
      _pendingGalleryReload = true;
      if (typeof refreshJobStatus === 'function') refreshJobStatus();
    }
  });
});

var _orderClicks = [];
var _orderMode = 'order';
var _origOrder = [];

function captureOrigOrder() {
  _origOrder = Array.prototype.map.call(
    document.querySelectorAll('#collection-order-body .collection-order-tile'),
    function(t) { return t.dataset.id; });
}

// applyOrderMode reflows the tiles for the current mode - filename mode sorts
// them by filename (natural), order mode restores the server's reading order -
// then flips the toggle's active button and the mode-specific intro line. The
// mode only arranges the grid; it assigns no order on its own (that is a click,
// or Save while in filename mode).
function applyOrderMode() {
  document.querySelectorAll('#collection-order-body [data-order-mode]').forEach(function(b) {
    b.classList.toggle('active', b.dataset.orderMode === _orderMode);
  });
  var oi = document.querySelector('#collection-order-body .order-mode-order');
  var fi = document.querySelector('#collection-order-body .order-mode-filename');
  if (oi) oi.hidden = _orderMode !== 'order';
  if (fi) fi.hidden = _orderMode !== 'filename';
  var grid = document.querySelector('#collection-order-body .collection-order-grid');
  if (grid) {
    var tiles = Array.prototype.slice.call(grid.querySelectorAll('.collection-order-tile'));
    if (_orderMode === 'filename') {
      tiles.sort(function(a, b) {
        return (a.dataset.filename || '').localeCompare(b.dataset.filename || '', undefined, {numeric: true, sensitivity: 'base'});
      });
      tiles.forEach(function(t) { grid.appendChild(t); });
    } else {
      _origOrder.forEach(function(id) {
        var t = grid.querySelector('.collection-order-tile[data-id="' + id + '"]');
        if (t) grid.appendChild(t);
      });
    }
  }
  renumberOrderTiles();
}

// renumberOrderTiles labels each tile with its click position, if picked. The
// mode only rearranges the grid; it never assigns an order on its own.
function renumberOrderTiles() {
  document.querySelectorAll('#collection-order-body .collection-order-tile').forEach(function(tile) {
    var i = _orderClicks.indexOf(tile.dataset.id);
    tile.querySelector('.collection-order-num').textContent = i >= 0 ? String(i + 1) : '';
    tile.classList.toggle('picked', i >= 0);
  });
}

function openCollectionOrder(btn) {
  var dlg = document.getElementById('collection-order-dialog');
  dlg.dataset.name = btn.dataset.name;
  _orderClicks = [];
  _orderMode = 'order';
  clearSlots('collection-order-error');
  var body = document.getElementById('collection-order-body');
  body.innerHTML = 'Loading…';
  fetch('/collections/order?name=' + encodeURIComponent(btn.dataset.name), {credentials: 'same-origin', headers: {'HX-Request': 'true'}})
    .then(function(r) { return r.text(); })
    .then(function(html) { body.innerHTML = html; captureOrigOrder(); applyOrderMode(); })
    .catch(function() { body.innerHTML = '<div class="flash flash-err">Could not load the collection.</div>'; });
  dlg.showModal();
}

document.getElementById('collection-order-body').addEventListener('click', function(e) {
  var modeBtn = e.target.closest('[data-order-mode]');
  if (modeBtn) {
    _orderMode = modeBtn.dataset.orderMode;
    applyOrderMode();
    return;
  }
  var more = e.target.closest('.collection-order-more');
  if (more) {
    // Re-fetch the window with a larger limit; picked ids live in
    // _orderClicks, so renumbering restores them on the fresh tiles.
    var dlg = document.getElementById('collection-order-dialog');
    var body = document.getElementById('collection-order-body');
    more.disabled = true;
    fetch('/collections/order?name=' + encodeURIComponent(dlg.dataset.name) + '&limit=' + more.dataset.limit, {credentials: 'same-origin', headers: {'HX-Request': 'true'}})
      .then(function(r) { return r.text(); })
      .then(function(html) { body.innerHTML = html; captureOrigOrder(); applyOrderMode(); })
      .catch(function() { more.disabled = false; });
    return;
  }
  var tile = e.target.closest('.collection-order-tile');
  if (!tile) return;
  var idx = _orderClicks.indexOf(tile.dataset.id);
  if (idx >= 0) _orderClicks.splice(idx, 1); else _orderClicks.push(tile.dataset.id);
  renumberOrderTiles();
});

document.getElementById('collection-order-reset').addEventListener('click', function() {
  _orderClicks = [];
  renumberOrderTiles();
});

document.getElementById('collection-order-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var err = document.getElementById('collection-order-error');
  err.innerHTML = '';
  var name = document.getElementById('collection-order-dialog').dataset.name;
  var params;
  if (_orderClicks.length) {
    params = {collection: name, ids: _orderClicks.join(',')};
  } else if (_orderMode === 'filename') {
    params = {collection: name, mode: 'filename'};
  } else {
    err.innerHTML = '<div class="flash flash-err">Click images to set an order, or switch to "By filename".</div>';
    return;
  }
  postForm('/collections/order', params, {
    dialogId: 'collection-order-dialog',
    flashId: 'collection-order-error',
    failMsg: 'Reorder failed.',
    catchMsg: 'Reorder request failed.',
    onOK: function(res) {
      // Stash the server's "Ordered N image(s)." flash so it survives
      // the reload that refreshes the sample strips.
      res.text().then(function(t) {
        stashActionFlash(t, 'ok');
        window.location.reload();
      });
    }
  });
});

function confirmDissolveCollection(btn) {
  var name = btn.dataset.name;
  showConfirm('Dissolve "' + name + '"? The collection label is removed from every image in it.', function() {
    postForm('/collections/dissolve', {collection: name}, {
      okStatus: 202,
      flashId: 'collection-flash',
      failMsg: 'Dissolve failed.',
      catchMsg: 'Dissolve request failed.',
      onOK: function() {
        _pendingGalleryReload = true;
        if (typeof refreshJobStatus === 'function') refreshJobStatus();
      }
    });
  }, 'The images and the files on disk are not deleted.', 'Dissolve');
}

document.addEventListener('click', function(e) {
  if (!e.target.closest) return;
  var el = e.target.closest('.btn-rename-collection');
  if (el) { openCollectionRename(el); return; }
  el = e.target.closest('.btn-reorder-collection');
  if (el) { openCollectionOrder(el); return; }
  el = e.target.closest('.btn-dissolve-collection');
  if (el) { confirmDissolveCollection(el); }
});
</script>

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