{{define "admin/tags_list.html"}}
{{template "admin_shell_open" .}}
<style>
.cs-admin-tags-page .cs-admin-icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #475569;
}
.cs-admin-tags-page .cs-admin-icon-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a;
}
.cs-admin-tags-page .cs-admin-row-dropdown .dropdown-menu {
  min-width: 11rem;
  font-size: 0.875rem;
  border-radius: 10px;
}
.cs-admin-tags-page .cs-admin-row-dropdown .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
}
.cs-admin-tags-page .cs-admin-row-dropdown form.cs-admin-ajax-form .dropdown-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}
.cs-admin-tags-page .cs-admin-tag-tabs .nav-link {
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
}
</style>

<div class="cs-admin-list-page cs-admin-tags-page">
{{template "admin_flash" .}}

<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-purchase-tag-alt"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.tags.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.tags.desc_before"}} <code>cs_tags</code>；{{T "admin.tags.desc_strong"}} — {{.Data.PendingCount}} {{T "admin.tags.desc_unit"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-outline-primary btn-sm js-admin-tag-create">{{T "admin.tags.btn_create"}}</button>
    <button type="button" class="btn btn-outline-secondary btn-sm js-admin-tag-attach-item">{{T "admin.tags.btn_attach_item"}}</button>
    <button type="button" class="btn btn-outline-secondary btn-sm js-admin-tag-attach-article">{{T "admin.tags.btn_attach_article"}}</button>
  </div>
</header>

<ul class="nav nav-pills cs-admin-tag-tabs gap-1 mb-3">
  <li class="nav-item"><a class="nav-link{{if not .Data.StatusFilter}} active{{end}}" href="/admin/tags{{if .Data.Query}}?q={{urlquery .Data.Query}}{{end}}">{{T "admin.tags.tab_all"}}</a></li>
  <li class="nav-item"><a class="nav-link{{if eq .Data.StatusFilter "2"}} active{{end}}" href="/admin/tags?st=2{{if .Data.Query}}&amp;q={{urlquery .Data.Query}}{{end}}">{{T "admin.tags.tab_pending"}}</a></li>
  <li class="nav-item"><a class="nav-link{{if eq .Data.StatusFilter "1"}} active{{end}}" href="/admin/tags?st=1{{if .Data.Query}}&amp;q={{urlquery .Data.Query}}{{end}}">{{T "admin.tags.tab_enabled"}}</a></li>
  <li class="nav-item"><a class="nav-link{{if eq .Data.StatusFilter "0"}} active{{end}}" href="/admin/tags?st=0{{if .Data.Query}}&amp;q={{urlquery .Data.Query}}{{end}}">{{T "admin.tags.tab_disabled"}}</a></li>
</ul>

<form method="get" action="/admin/tags" class="row g-2 align-items-end mb-3">
  {{if .Data.StatusFilter}}<input type="hidden" name="st" value="{{.Data.StatusFilter}}">{{end}}
  <div class="col-md-6 col-lg-4">
    <label class="form-label small mb-0">{{T "admin.tags.filter_label"}}</label>
    <input class="form-control form-control-sm" name="q" value="{{.Data.Query}}" placeholder="{{T "admin.tags.filter_ph"}}">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-sm btn-primary">{{T "admin.tags.query"}}</button>
    <a class="btn btn-sm btn-outline-secondary" href="/admin/tags{{if .Data.StatusFilter}}?st={{.Data.StatusFilter}}{{end}}">{{T "admin.tags.reset"}}</a>
  </div>
  <div class="col-12 small text-muted">{{T "admin.tags.list_hint_before"}} {{.Data.Total}} {{T "admin.tags.list_hint_after"}}</div>
</form>

<div class="card cs-admin-section">
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>{{T "admin.tags.col_id"}}</th>
          <th>{{T "admin.tags.col_label"}}</th>
          <th>{{T "admin.tags.col_key"}}</th>
          <th class="text-end">{{T "admin.tags.col_items"}}</th>
          <th class="text-end">{{T "admin.tags.col_articles"}}</th>
          <th>{{T "admin.tags.col_status"}}</th>
          <th class="text-end">{{T "admin.tags.col_sort"}}</th>
          <th class="text-end text-nowrap" style="width:3.5rem">{{T "admin.tags.col_actions"}}</th>
        </tr>
      </thead>
      <tbody>
        {{range .Data.Rows}}
        <tr>
          <td class="text-muted">#{{.ID}}</td>
          <td class="fw-medium">{{.Label}}</td>
          <td><code class="small">{{.Key}}</code></td>
          <td class="text-end">{{.ItemCount}}</td>
          <td class="text-end">{{.ArticleCount}}</td>
          <td><span class="badge {{.StatusClass}}">{{.StatusLabel}}</span></td>
          <td class="text-end">{{.SortOrder}}</td>
          <td class="text-end">
            <div class="dropdown cs-admin-row-dropdown d-inline-block">
              <button type="button" class="btn btn-sm btn-light border cs-admin-icon-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false" title="{{T "admin.tags.actions"}}">
                <i class="bx bx-dots-vertical-rounded fs-5 lh-1" aria-hidden="true"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end shadow border-0 py-1">
                <li>
                  <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-admin-tag-edit"
                    data-id="{{.ID}}" data-key="{{.Key}}" data-label="{{.Label}}" data-status="{{.Status}}" data-sort="{{.SortOrder}}">
                    <i class="bx bx-edit-alt text-primary"></i><span>{{T "admin.tags.edit"}}</span>
                  </button>
                </li>
                {{if eq .Status 2}}
                <li>
                  <form method="post" action="/admin/tags" class="cs-admin-ajax-form mb-0">
                    <input type="hidden" name="_action" value="approve_tag">
                    <input type="hidden" name="tag_id" value="{{.ID}}">
                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2"><i class="bx bx-check-circle text-success"></i><span>{{T "admin.tags.approve"}}</span></button>
                  </form>
                </li>
                {{end}}
                {{if ne .Status 1}}
                <li>
                  <form method="post" action="/admin/tags" class="cs-admin-ajax-form mb-0">
                    <input type="hidden" name="_action" value="enable_tag">
                    <input type="hidden" name="tag_id" value="{{.ID}}">
                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2"><i class="bx bx-check"></i><span>{{T "admin.tags.enable"}}</span></button>
                  </form>
                </li>
                {{end}}
                {{if ne .Status 0}}
                <li>
                  <form method="post" action="/admin/tags" class="cs-admin-ajax-form mb-0" data-cs-confirm="{{T "admin.tags.confirm_disable"}}">
                    <input type="hidden" name="_action" value="disable_tag">
                    <input type="hidden" name="tag_id" value="{{.ID}}">
                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2"><i class="bx bx-block"></i><span>{{T "admin.tags.disable"}}</span></button>
                  </form>
                </li>
                {{end}}
                <li>
                  <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-admin-tag-merge" data-id="{{.ID}}" data-label="{{.Label}}">
                    <i class="bx bx-git-merge"></i><span>{{T "admin.tags.merge"}}</span>
                  </button>
                </li>
                <li>
                  <form method="post" action="/admin/tags" class="cs-admin-ajax-form mb-0">
                    <input type="hidden" name="_action" value="refresh_count">
                    <input type="hidden" name="tag_id" value="{{.ID}}">
                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2"><i class="bx bx-refresh"></i><span>{{T "admin.tags.refresh"}}</span></button>
                  </form>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                  <a class="dropdown-item d-flex align-items-center gap-2" href="{{.BrowseURL}}" target="_blank" rel="noopener">
                    <i class="bx bx-link-external"></i><span>{{T "admin.tags.hub"}}</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center gap-2" href="{{.SourceURL}}" target="_blank" rel="noopener">
                    <i class="bx bx-package"></i><span>{{T "admin.tags.items_list"}}</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center gap-2" href="{{.ArticlesURL}}" target="_blank" rel="noopener">
                    <i class="bx bx-book-open"></i><span>{{T "admin.tags.articles_list"}}</span>
                  </a>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                  <form method="post" action="/admin/tags" class="cs-admin-ajax-form mb-0" data-cs-confirm="{{T "admin.tags.confirm_delete"}}">
                    <input type="hidden" name="_action" value="delete_tag">
                    <input type="hidden" name="tag_id" value="{{.ID}}">
                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2 text-danger"><i class="bx bx-trash"></i><span>{{T "admin.tags.delete"}}</span></button>
                  </form>
                </li>
              </ul>
            </div>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="8" class="text-center text-muted py-4">{{T "admin.tags.empty"}}</td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

<script>
(function () {
  var L = {
    modalMissing: {{jsString (T "admin.tags.modal_missing")}},
    status: {{jsString (T "admin.tags.status")}},
    statusOn: {{jsString (T "admin.tags.status_on")}},
    statusPending: {{jsString (T "admin.tags.status_pending")}},
    statusOff: {{jsString (T "admin.tags.status_off")}},
    createHint: {{jsString (T "admin.tags.create_hint")}},
    labelName: {{jsString (T "admin.tags.label_name")}},
    labelKeyOpt: {{jsString (T "admin.tags.label_key_opt")}},
    labelSort: {{jsString (T "admin.tags.label_sort")}},
    createSubmit: {{jsString (T "admin.tags.create_submit")}},
    createTitle: {{jsString (T "admin.tags.create_title")}},
    attachItemHint: {{jsString (T "admin.tags.attach_item_hint")}},
    attachItemId: {{jsString (T "admin.tags.attach_item_id")}},
    attachTagName: {{jsString (T "admin.tags.attach_tag_name")}},
    attachSubmit: {{jsString (T "admin.tags.attach_submit")}},
    attachItemTitle: {{jsString (T "admin.tags.attach_item_title")}},
    attachArticleHint: {{jsString (T "admin.tags.attach_article_hint")}},
    attachArticleId: {{jsString (T "admin.tags.attach_article_id")}},
    attachArticleTitle: {{jsString (T "admin.tags.attach_article_title")}},
    editHint: {{jsString (T "admin.tags.edit_hint")}},
    labelKey: {{jsString (T "admin.tags.label_key")}},
    save: {{jsString (T "admin.tags.save")}},
    editTitle: {{jsString (T "admin.tags.edit_title")}},
    mergeHintBefore: {{jsString (T "admin.tags.merge_hint_before")}},
    mergeHintAfter: {{jsString (T "admin.tags.merge_hint_after")}},
    mergeToId: {{jsString (T "admin.tags.merge_to_id")}},
    mergeSubmit: {{jsString (T "admin.tags.merge_submit")}},
    mergeTitle: {{jsString (T "admin.tags.merge_title")}}
  };
  var tagMaxRunes = 32;
  var esc = function (t) {
    return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;');
  };
  function openLayer(html, title) {
    if (window.layer && typeof window.layer.open === 'function') {
      window.layer.open({
        type: 1,
        title: title,
        area: ['min(480px, 94vw)', 'auto'],
        shadeClose: true,
        content: html
      });
    } else {
      alert(L.modalMissing);
    }
  }
  function statusSelect(name, val) {
    val = String(val || '1');
    return ''
      + '<label class="form-label">' + L.status + '</label>'
      + '<select class="form-select" name="' + name + '">'
      + '<option value="1"' + (val === '1' ? ' selected' : '') + '>' + L.statusOn + '</option>'
      + '<option value="2"' + (val === '2' ? ' selected' : '') + '>' + L.statusPending + '</option>'
      + '<option value="0"' + (val === '0' ? ' selected' : '') + '>' + L.statusOff + '</option>'
      + '</select>';
  }
  $(document).on('click', '.js-admin-tag-create', function () {
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/tags">'
      + '<input type="hidden" name="_action" value="create_tag">'
      + '<p class="admin-form-modal-hint">' + L.createHint + '</p>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelName + '</label>'
      + '<input class="form-control" name="name" maxlength="' + tagMaxRunes + '" required autocomplete="off"></div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelKeyOpt + '</label>'
      + '<input class="form-control font-monospace" name="tag_key" autocomplete="off"></div>'
      + '<div class="admin-modal-field">' + statusSelect('status', '1') + '</div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelSort + '</label>'
      + '<input class="form-control" type="number" name="sort_order" value="0" step="1"></div>'
      + '<div class="admin-form-modal-actions"><button type="submit" class="btn btn-primary">' + L.createSubmit + '</button></div>'
      + '</form></div>';
    openLayer(html, L.createTitle);
  });
  $(document).on('click', '.js-admin-tag-attach-item', function () {
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/tags">'
      + '<input type="hidden" name="_action" value="attach_item">'
      + '<p class="admin-form-modal-hint">' + L.attachItemHint + '</p>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.attachItemId + '</label>'
      + '<input class="form-control" type="number" name="item_id" min="1" step="1" required autocomplete="off"></div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.attachTagName + '</label>'
      + '<input class="form-control" name="tag" maxlength="' + tagMaxRunes + '" required autocomplete="off"></div>'
      + '<div class="admin-form-modal-actions"><button type="submit" class="btn btn-primary">' + L.attachSubmit + '</button></div>'
      + '</form></div>';
    openLayer(html, L.attachItemTitle);
  });
  $(document).on('click', '.js-admin-tag-attach-article', function () {
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/tags">'
      + '<input type="hidden" name="_action" value="attach_article">'
      + '<p class="admin-form-modal-hint">' + L.attachArticleHint + '</p>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.attachArticleId + '</label>'
      + '<input class="form-control" type="number" name="article_id" min="1" step="1" required autocomplete="off"></div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.attachTagName + '</label>'
      + '<input class="form-control" name="tag" maxlength="' + tagMaxRunes + '" required autocomplete="off"></div>'
      + '<div class="admin-form-modal-actions"><button type="submit" class="btn btn-primary">' + L.attachSubmit + '</button></div>'
      + '</form></div>';
    openLayer(html, L.attachArticleTitle);
  });
  $(document).on('click', '.js-admin-tag-edit', function () {
    var btn = $(this);
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/tags">'
      + '<input type="hidden" name="_action" value="save_tag">'
      + '<input type="hidden" name="tag_id" value="' + esc(btn.data('id')) + '">'
      + '<p class="admin-form-modal-hint">' + L.editHint + '</p>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelName + '</label>'
      + '<input class="form-control" name="name" value="' + esc(btn.data('label')) + '" maxlength="' + tagMaxRunes + '" required autocomplete="off"></div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelKey + '</label>'
      + '<input class="form-control font-monospace" name="tag_key" value="' + esc(btn.data('key')) + '" required autocomplete="off"></div>'
      + '<div class="admin-modal-field">' + statusSelect('status', btn.data('status')) + '</div>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.labelSort + '</label>'
      + '<input class="form-control" type="number" name="sort_order" value="' + esc(btn.data('sort')) + '" step="1"></div>'
      + '<div class="admin-form-modal-actions"><button type="submit" class="btn btn-primary">' + L.save + '</button></div>'
      + '</form></div>';
    openLayer(html, L.editTitle);
  });
  $(document).on('click', '.js-admin-tag-merge', function () {
    var btn = $(this);
    var fromId = String(btn.data('id') || '');
    var fromLabel = String(btn.data('label') || '');
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/tags">'
      + '<input type="hidden" name="_action" value="merge_tag">'
      + '<input type="hidden" name="from_id" value="' + esc(fromId) + '">'
      + '<p class="admin-form-modal-hint">' + L.mergeHintBefore + ' <strong>#' + esc(fromId) + ' ' + esc(fromLabel) + '</strong> ' + L.mergeHintAfter + '</p>'
      + '<div class="admin-modal-field"><label class="form-label">' + L.mergeToId + '</label>'
      + '<input class="form-control" type="number" name="to_id" min="1" step="1" required autocomplete="off" placeholder="cs_tags.id"></div>'
      + '<div class="admin-form-modal-actions"><button type="submit" class="btn btn-primary">' + L.mergeSubmit + '</button></div>'
      + '</form></div>';
    openLayer(html, L.mergeTitle);
  });
})();
</script>

</div>
{{template "admin_shell_close" .}}
{{end}}