{{define "admin/items_list.html"}}
{{template "admin_shell_open" .}}
<style>
.cs-admin-items-page .cs-admin-page-head {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
}
/* List tabs (same row as filters): pill segmented control */
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.32rem 0.4rem;
  margin-bottom: 0;
  list-style: none;
  background: linear-gradient(165deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-item {
  margin: 0;
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.3rem 0.72rem;
  min-height: 1.95rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: #475569;
  text-decoration: none !important;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-link:hover {
  color: #0f172a;
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.75);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-link.active {
  color: #fff !important;
  font-weight: 600;
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.38);
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-tab-pills .nav-link.active:hover {
  color: #fff !important;
  border-color: rgba(29, 78, 216, 0.55);
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-items-filter-toolbar {
  flex: 1 1 auto;
  min-width: 0;
}
.cs-admin-items-page .cs-admin-items-toolbar-integrated .cs-admin-items-tabs-inline {
  flex: 0 0 auto;
}
.cs-admin-items-page .cs-admin-filter-card .cs-admin-items-tabs-hint {
  margin-top: 0.6rem;
}
.cs-admin-items-page .cs-admin-filter-card .form-control::placeholder {
  color: #94a3b8;
}
.cs-admin-items-page .cs-admin-table-card .table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  border-bottom-width: 1px;
}
.cs-admin-items-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-items-page .cs-admin-icon-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a;
}
.cs-admin-items-page .cs-admin-row-dropdown .dropdown-menu {
  min-width: 12rem;
  font-size: 0.875rem;
  border-radius: 10px;
}
.cs-admin-items-page .cs-admin-row-dropdown .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
}
.cs-admin-items-page .cs-admin-row-dropdown form.cs-admin-ajax-form .dropdown-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}
.cs-admin-items-page .cs-admin-shortcut-pill i {
  vertical-align: -0.125em;
}
.cs-admin-items-page a.cs-admin-item-title-link:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}
.cs-admin-items-page #cs-admin-items-results.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cs-admin-items-page .cs-admin-items-search-wrap .input-group-text {
  background: #fff;
}
.cs-admin-items-page .cs-admin-items-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}
.cs-admin-items-page .cs-admin-items-uid-group {
  flex: 0 0 auto;
  width: 9.25rem;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-items-page .cs-admin-items-uid-group .input-group-text {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.45);
}
.cs-admin-items-page .cs-admin-items-search-wrap {
  flex: 1 1 12rem;
  min-width: 0;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-items-page .cs-admin-items-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.cs-admin-items-page .cs-admin-items-live-hint {
  font-size: 0.7rem;
  line-height: 1.2;
}
</style>

<div class="cs-admin-list-page cs-admin-items-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-package"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.items.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.items.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a class="btn btn-sm btn-outline-primary" href="/admin/audit"><i class="bx bx-task me-1"></i>{{T "admin.items.link_audit"}}</a>
  </div>
</header>

<div class="card cs-admin-section cs-admin-section--toolbar mb-3 cs-admin-filter-card">
  <div class="card-body py-2 px-3">
    <div class="cs-admin-items-toolbar-integrated">
      <nav class="cs-admin-items-tabs-inline" aria-label="{{T "admin.items.tabs_aria"}}">
        <ul class="nav nav-pills cs-admin-tab-pills mb-0" role="tablist">
          <li class="nav-item" role="presentation"><a class="nav-link {{if eq .Data.Tab "published"}}active{{end}}" href="/admin/items?tab=published" role="tab" {{if eq .Data.Tab "published"}}aria-current="page"{{end}}>{{T "admin.items.tab_published"}}</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link {{if eq .Data.Tab "recommend"}}active{{end}}" href="/admin/items?tab=recommend" role="tab" {{if eq .Data.Tab "recommend"}}aria-current="page"{{end}}>{{T "admin.items.tab_recommend"}}</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link {{if eq .Data.Tab "offline"}}active{{end}}" href="/admin/items?tab=offline" role="tab" {{if eq .Data.Tab "offline"}}aria-current="page"{{end}}>{{T "admin.items.tab_offline"}}</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link {{if eq .Data.Tab "all"}}active{{end}}" href="/admin/items?tab=all" role="tab" {{if eq .Data.Tab "all"}}aria-current="page"{{end}}>{{T "admin.items.tab_all"}}</a></li>
        </ul>
      </nav>
      <form id="cs-admin-items-filter" class="cs-admin-items-filter-toolbar" method="get" action="/admin/items" autocomplete="off">
        <input type="hidden" name="tab" id="cs-admin-items-tab" value="{{.Data.Tab}}">
        <div class="input-group input-group-sm cs-admin-items-uid-group shadow-sm">
          <span class="input-group-text" title="User ID"><i class="bx bx-user" aria-hidden="true"></i></span>
          <input class="form-control" type="text" inputmode="numeric" name="user_id" id="cs-admin-items-uid" placeholder="{{T "admin.items.ph_uid"}}" value="{{.Data.QUserID}}" aria-label="User ID" autocomplete="off">
        </div>
        <div class="input-group input-group-sm cs-admin-items-search-wrap shadow-sm">
          <span class="input-group-text border-end-0"><i class="bx bx-search-alt-2" aria-hidden="true"></i></span>
          <input class="form-control border-start-0" type="search" name="q" id="cs-admin-items-q" placeholder="{{T "admin.items.ph_q"}}" value="{{.Data.QQ}}" enterkeyhint="search" autocomplete="off" aria-label="{{T "admin.items.ph_q"}}">
        </div>
        <div class="cs-admin-items-filter-actions">
          <span class="cs-admin-items-live-hint text-primary" style="display:none;">{{T "admin.items.live"}}</span>
          <button type="submit" class="btn btn-outline-secondary btn-sm" title="{{T "admin.items.refresh_title"}}"><i class="bx bx-refresh" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">{{T "admin.items.refresh"}}</span></button>
          <a class="btn btn-link btn-sm text-muted py-0 px-1 text-nowrap" href="/admin/items?tab={{urlEncode .Data.Tab}}">{{T "admin.items.clear"}}</a>
        </div>
      </form>
    </div>
    {{if eq .Data.Tab "recommend"}}
    <p class="small text-muted mb-0 ps-1 border-start border-3 border-info ps-2 cs-admin-items-tabs-hint">{{html (T "admin.items.rec_hint_html")}}</p>
    {{end}}
  </div>
</div>

<div id="cs-admin-items-results" class="cs-admin-items-results-mount" role="region" aria-live="polite" aria-busy="false">
{{template "admin_items_list_results" .}}
</div>

</div>

<script>
var Litems = {
  editModal: {{jsString (T "admin.items.edit_modal")}},
  needCheck: {{jsString (T "admin.items.need_check")}},
  confirm: {{jsString (T "admin.items.confirm")}},
  bulkOffline: {{jsString (T "admin.items.bulk_offline")}},
  bulkRec: {{jsString (T "admin.items.bulk_rec")}},
  bulkDel: {{jsString (T "admin.items.bulk_del")}},
  delTitle: {{jsString (T "admin.items.del_title")}},
  saved: {{jsString (T "admin.items.saved")}},
  opFail: {{jsString (T "admin.items.op_fail")}},
  reqFail: {{jsString (T "admin.items.req_fail")}}
};
$(document).on('click', '.js-admin-open-item', function () {
  var id = $(this).data('id');
  if (!id || !window.csAdminModal || typeof window.csAdminModal.openEmbed !== 'function') return;
  window.csAdminModal.openEmbed(Litems.editModal + id, '/admin/items/' + id + '?embed=1', ['min(960px, 96vw)', 'min(720px, 90vh)']);
});
(function () {
  var $root = $('#cs-admin-items-results');
  if (!$root.length) return;

  var debounceQ;
  var debounceUid;
  var xhr;

  function tabVal() {
    return $.trim($('#cs-admin-items-tab').val() || 'published');
  }

  function buildParams(page) {
    var q = $.trim($('#cs-admin-items-q').val() || '');
    var uid = $.trim($('#cs-admin-items-uid').val() || '');
    var p = page > 0 ? page : 1;
    return { tab: tabVal(), user_id: uid, q: q, page: String(p) };
  }

  function buildPublicUrl(page) {
    return '/admin/items?' + $.param(buildParams(page));
  }

  function buildPartialUrl(page) {
    return buildPublicUrl(page) + '&partial=1';
  }

  function setLoading(on) {
    $root.toggleClass('is-loading', !!on);
    $root.attr('aria-busy', on ? 'true' : 'false');
    $('.cs-admin-items-live-hint').toggle(!!on);
  }

  function loadPage(page) {
    if (xhr && xhr.readyState !== 4) {
      try { xhr.abort(); } catch (e) {}
    }
    setLoading(true);
    xhr = $.ajax({
      url: buildPartialUrl(page),
      type: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      success: function (html) {
        $root.html(html);
        try {
          history.replaceState({}, '', buildPublicUrl(page));
        } catch (e) {}
      },
      error: function (jqXHR) {
        if (jqXHR && (jqXHR.status === 0 || jqXHR.statusText === 'abort')) return;
        window.location.href = buildPublicUrl(page);
      },
      complete: function () {
        setLoading(false);
      }
    });
  }

  $('#cs-admin-items-q').on('input', function () {
    clearTimeout(debounceQ);
    debounceQ = setTimeout(function () { loadPage(1); }, 380);
  });

  $('#cs-admin-items-uid').on('input', function () {
    clearTimeout(debounceUid);
    debounceUid = setTimeout(function () { loadPage(1); }, 420);
  });

  $(document).on('click', '#cs-admin-items-results .cs-admin-items-pager a[href*="/admin/items"]', function (e) {
    e.preventDefault();
    var href = this.getAttribute('href');
    if (!href) return;
    try {
      var u = new URL(href, window.location.origin);
      var pg = parseInt(u.searchParams.get('page') || '1', 10);
      if (!isFinite(pg) || pg < 1) pg = 1;
      loadPage(pg);
    } catch (err) {
      window.location.href = href;
    }
  });

  $('#cs-admin-items-filter').on('submit', function (e) {
    e.preventDefault();
    loadPage(1);
  });
})();

(function () {
  function bulkForm() {
    return document.getElementById('admin-items-bulk');
  }

  function checkedCount() {
    var form = bulkForm();
    if (!form) return 0;
    return $(form).find('input.js-items-row-chk:checked').length;
  }

  function needPick() {
    var n = checkedCount();
    if (n === 0) {
      var tip = Litems.needCheck;
      if (window.layer && typeof window.layer.msg === 'function') {
        window.layer.msg(tip, { icon: 0, time: 2000 });
      } else {
        alert(tip);
      }
      return 0;
    }
    return n;
  }

  function confirmThen(msg, title, fn) {
    if (window.layer && typeof window.layer.confirm === 'function') {
      window.layer.confirm(msg, { title: title || Litems.confirm, icon: 3 }).then(function (ok) {
        if (ok) fn();
      });
      return;
    }
    if (window.confirm(msg)) fn();
  }

  function submitBulk(action, confirmMsg, confirmTitle) {
    var n = needPick();
    if (!n) return;
    var form = bulkForm();
    if (!form) return;
    function go() {
      $('#admin-items-bulk-action').val(action);
      $(form).trigger('submit');
    }
    if (confirmMsg) {
      confirmThen(confirmMsg, confirmTitle, go);
      return;
    }
    go();
  }

  $(document).on('change', '#chk-all-items', function () {
    var on = $(this).prop('checked');
    $('#admin-items-bulk input.js-items-row-chk').prop('checked', on);
  });

  $(document).on('click', '.js-admin-items-bulk-offline', function () {
    submitBulk('bulk_offline', Litems.bulkOffline.replace('{n}', String(checkedCount())));
  });

  $(document).on('click', '.js-admin-items-bulk-rec', function () {
    submitBulk('bulk_toggle_rec', Litems.bulkRec.replace('{n}', String(checkedCount())));
  });

  $(document).on('click', '.js-admin-items-bulk-delete', function () {
    var n = checkedCount();
    submitBulk(
      'bulk_delete',
      Litems.bulkDel.replace('{n}', String(n)),
      Litems.delTitle
    );
  });

  function postItemRowAction(action, id, done) {
    $.ajax({
      url: '/admin/items',
      type: 'POST',
      data: { _action: action, id: id, _ajax: '1' },
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    })
      .done(function (res) {
        if (res && res.success) {
          var tip = res.message || Litems.saved;
          if (window.layer && typeof window.layer.msg === 'function') {
            window.layer.msg(tip, { icon: 1, time: 1400 }, function () {
              if (typeof done === 'function') done();
              else window.location.reload();
            });
          } else {
            alert(tip);
            if (typeof done === 'function') done();
            else window.location.reload();
          }
          return;
        }
        var failTip = (res && res.message) || Litems.opFail;
        if (window.layer && typeof window.layer.msg === 'function') {
          window.layer.msg(failTip, { icon: 2 });
        } else {
          alert(failTip);
        }
      })
      .fail(function (xhr) {
        var failTip = Litems.reqFail;
        if (xhr.responseJSON && xhr.responseJSON.message) {
          failTip = xhr.responseJSON.message;
        }
        if (window.layer && typeof window.layer.msg === 'function') {
          window.layer.msg(failTip, { icon: 2 });
        } else {
          alert(failTip);
        }
      });
  }

  $(document).on('click', '.js-admin-item-row-act', function () {
    var $btn = $(this);
    var action = $.trim(String($btn.attr('data-action') || ''));
    var id = $.trim(String($btn.attr('data-id') || ''));
    if (!action || !id) return;
    var confirmMsg = $.trim(String($btn.attr('data-confirm') || ''));
    var confirmTitle = $.trim(String($btn.attr('data-confirm-title') || '')) || Litems.confirm;
    var dd = $btn.closest('.dropdown');
    function run() {
      if (dd.length && window.bootstrap && bootstrap.Dropdown) {
        var inst = bootstrap.Dropdown.getInstance(dd.find('[data-bs-toggle="dropdown"]')[0]);
        if (inst) inst.hide();
      }
      postItemRowAction(action, id);
    }
    if (confirmMsg) {
      confirmThen(confirmMsg, confirmTitle, run);
      return;
    }
    run();
  });
})();
</script>
{{template "admin_shell_close" .}}
{{end}}