{{define "admin/audit_list.html"}}
{{template "admin_shell_open" .}}
<style>
.cs-admin-audit-page .cs-admin-page-head {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.cs-admin-audit-page .cs-admin-audit-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cs-admin-audit-page .cs-admin-audit-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  width: 100%;
}
.cs-admin-audit-page .cs-admin-audit-filter-row--secondary {
  justify-content: flex-start;
}
.cs-admin-audit-page .cs-admin-audit-filter-row--secondary .cs-admin-audit-filter-actions {
  margin-left: auto;
}
.cs-admin-audit-page .cs-admin-audit-filter-toolbar .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-audit-page .cs-admin-audit-filter-toolbar .cs-admin-audit-search-wrap .input-group-text {
  background: #fff;
  font-weight: 400;
}
.cs-admin-audit-page .cs-admin-audit-status-group {
  flex: 0 0 auto;
  width: 8.75rem;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-audit-page .cs-admin-audit-type-group {
  flex: 0 0 auto;
  width: 6.5rem;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-audit-page .cs-admin-audit-uid-group {
  flex: 0 0 auto;
  width: 9.25rem;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-audit-page .cs-admin-audit-search-wrap {
  flex: 1 1 10rem;
  min-width: 0;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-audit-page .cs-admin-audit-date-group {
  flex: 0 0 auto;
  width: 11.25rem;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.cs-admin-audit-page .cs-admin-audit-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.cs-admin-audit-page .cs-admin-filter-card .form-control::placeholder {
  color: #94a3b8;
}
.cs-admin-audit-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-audit-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-audit-page .cs-admin-icon-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a;
}
.cs-admin-audit-page .cs-admin-row-dropdown .dropdown-menu {
  min-width: 11rem;
  font-size: 0.875rem;
  border-radius: 10px;
}
.cs-admin-audit-page .cs-admin-row-dropdown .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
}
.cs-admin-audit-page .cs-admin-shortcut-pill i {
  vertical-align: -0.125em;
}
</style>

<div class="cs-admin-list-page cs-admin-audit-page">
{{if .Data.Flash}}
<div class="alert alert-info alert-dismissible fade show flash-bar mb-3"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{.Data.Flash}}</div>{{end}}

<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-check-shield"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.audit.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.audit.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a class="btn btn-sm btn-outline-primary" href="/admin/items"><i class="bx bx-package me-1"></i>{{T "admin.audit.link_items"}}</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">
    <form class="cs-admin-audit-filter-toolbar" method="get" action="/admin/audit" autocomplete="off">
      <div class="cs-admin-audit-filter-row cs-admin-audit-filter-row--primary">
      <div class="input-group input-group-sm cs-admin-audit-status-group shadow-sm">
        <span class="input-group-text" title="{{T "admin.audit.status_title"}}"><i class="bx bx-list-check" aria-hidden="true"></i></span>
        <select class="form-select form-select-sm" name="status" aria-label="{{T "admin.audit.status_aria"}}">
          <option value="1" {{if eq $.Data.QStatus "1"}}selected{{end}}>{{T "admin.audit.status_pending"}}</option>
          <option value="-1" {{if eq $.Data.QStatus "-1"}}selected{{end}}>{{T "admin.audit.status_all"}}</option>
          <option value="3" {{if eq $.Data.QStatus "3"}}selected{{end}}>{{T "admin.audit.status_reject"}}</option>
          <option value="0" {{if eq $.Data.QStatus "0"}}selected{{end}}>{{T "admin.audit.status_draft"}}</option>
        </select>
      </div>
      <div class="input-group input-group-sm cs-admin-audit-type-group shadow-sm">
        <span class="input-group-text" title="{{T "admin.audit.type_title"}}"><i class="bx bx-package" aria-hidden="true"></i></span>
        <select class="form-select form-select-sm" name="item_type" aria-label="{{T "admin.audit.type_aria"}}">
          <option value="">—</option>
          <option value="1" {{if eq $.Data.QItemType "1"}}selected{{end}}>{{T "admin.audit.type_source"}}</option>
          <option value="2" {{if eq $.Data.QItemType "2"}}selected{{end}}>{{T "admin.audit.type_soft"}}</option>
        </select>
      </div>
      <div class="input-group input-group-sm cs-admin-audit-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 form-control-sm" type="text" inputmode="numeric" name="user_id" value="{{.Data.QUserID}}" placeholder="{{T "admin.audit.uid_ph"}}" aria-label="User ID" autocomplete="off">
      </div>
      <div class="input-group input-group-sm cs-admin-audit-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 form-control-sm border-start-0" type="search" name="q" value="{{.Data.QQ}}" placeholder="{{T "admin.audit.q_ph"}}" enterkeyhint="search" autocomplete="off" aria-label="{{T "admin.audit.q_aria"}}">
      </div>
      </div>
      <div class="cs-admin-audit-filter-row cs-admin-audit-filter-row--secondary">
      <div class="input-group input-group-sm cs-admin-audit-date-group shadow-sm">
        <span class="input-group-text" title="{{T "admin.audit.from_title"}}"><i class="bx bx-calendar" aria-hidden="true"></i></span>
        <input class="form-control form-control-sm" type="date" name="from" value="{{.Data.QFrom}}" aria-label="{{T "admin.audit.from_title"}}">
      </div>
      <div class="input-group input-group-sm cs-admin-audit-date-group shadow-sm">
        <span class="input-group-text" title="{{T "admin.audit.to_title"}}"><i class="bx bx-calendar-check" aria-hidden="true"></i></span>
        <input class="form-control form-control-sm" type="date" name="to" value="{{.Data.QTo}}" aria-label="{{T "admin.audit.to_title"}}">
      </div>
      <div class="cs-admin-audit-filter-actions">
        <button class="btn btn-primary btn-sm" type="submit" title="{{T "admin.audit.filter_title"}}"><i class="bx bx-filter-alt" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">{{T "admin.audit.filter"}}</span></button>
      </div>
      </div>
    </form>
  </div>
</div>

{{if eq $.Data.QStatus "1"}}
<form id="admin-audit-bulk" method="post" action="/admin/audit" class="cs-admin-ajax-form" data-cs-reload="1">
  <input type="hidden" name="action" value="bulk_approve" id="admin-audit-bulk-action">
  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <button type="button" class="btn btn-sm btn-success js-admin-audit-bulk-approve"><i class="bx bx-check-circle me-1"></i>{{T "admin.audit.bulk_approve"}}</button>
    <button type="button" class="btn btn-sm btn-outline-danger js-admin-audit-bulk-reject"><i class="bx bx-x-circle me-1"></i>{{T "admin.audit.bulk_reject"}}</button>
    <span class="small text-muted">{{T "admin.audit.bulk_hint"}}</span>
  </div>
<div class="card cs-admin-section cs-admin-table-card">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light"><tr>
        <th style="width:36px"><input type="checkbox" id="chk-all-audit" title="{{T "admin.audit.chk_all"}}" aria-label="{{T "admin.audit.chk_all"}}"></th>
        <th class="text-nowrap">{{T "admin.audit.col_id"}}</th><th class="text-nowrap">{{T "admin.audit.col_type"}}</th><th>{{T "admin.audit.col_title"}}</th><th class="text-nowrap">{{T "admin.audit.col_ver"}}</th><th>{{T "admin.audit.col_user"}}</th><th class="text-nowrap">{{T "admin.audit.col_time"}}</th><th class="text-nowrap">{{T "admin.audit.col_status"}}</th><th class="text-end text-nowrap" style="width:3.5rem">{{T "admin.audit.col_actions"}}</th>
      </tr></thead>
      <tbody>
      {{range $r := .Data.Rows}}
      {{$rid := index $r "id"}}{{$rst := asInt (index $r "status")}}
      <tr>
        <td>{{if eq $rst 1}}<input type="checkbox" name="ids" value="{{$rid}}" class="js-audit-row-chk" aria-label="{{T "admin.audit.select_item"}} {{$rid}}">{{end}}</td>
        <td class="text-muted small font-monospace">{{$rid}}</td>
        <td>{{if eq (index $r "item_type") 1}}{{T "admin.audit.type_source"}}{{else}}{{T "admin.audit.type_soft"}}{{end}}</td>
        <td class="fw-medium">
          <button type="button" class="btn btn-link p-0 text-start text-body text-decoration-none fw-medium js-admin-open-audit" data-id="{{index $r "id"}}">{{index $r "title"}}</button>
        </td>
        <td><span class="text-muted">{{index $r "version"}}</span></td>
        <td>{{$suid := index $r "user_id"}}{{if gt (asInt $suid) 0}}<button type="button" class="btn btn-link btn-sm p-0 align-baseline text-start js-admin-user-preview" data-user-id="{{$suid}}" title="{{T "admin.audit.view_user"}}">{{index $r "submitter_name"}}</button>{{else}}<span class="text-muted">—</span>{{end}}</td>
        <td class="small text-muted text-nowrap">{{unixTime (index $r "created_at")}}</td>
        <td>{{$st := index $r "status"}}{{if eq (asInt $st) 1}}<span class="badge badge-soft bg-warning text-dark">{{T "admin.audit.badge_pending"}}</span>{{else if eq (asInt $st) 0}}<span class="badge bg-secondary">{{T "admin.audit.badge_draft"}}</span>{{else if eq (asInt $st) 3}}<span class="badge bg-danger">{{T "admin.audit.badge_reject"}}</span>{{else if eq (asInt $st) 2}}<span class="badge bg-success">{{T "admin.audit.badge_published"}}</span>{{else}}<span class="badge bg-dark">{{T "admin.audit.badge_offline"}}</span>{{end}}</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.audit.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>
                <a class="dropdown-item d-flex align-items-center gap-2" href="{{itemSoftPath (index $r "id")}}" target="_blank" rel="noopener">
                  <i class="bx bx-show text-secondary"></i><span>{{T "item_admin_preview_menu"}}</span>
                </a>
              </li>
              <li>
                <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-admin-open-audit" data-id="{{index $r "id"}}">
                  <i class="bx bx-check-shield text-primary"></i><span>{{T "admin.audit.menu_audit"}}</span>
                </button>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="9" class="text-center text-muted py-5"><i class="bx bxs-inbox fs-2 d-block mb-2 opacity-50"></i>{{T "admin.audit.empty"}}</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>
</form>
{{else}}
<div class="card cs-admin-section cs-admin-table-card">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light"><tr>
        <th class="text-nowrap">{{T "admin.audit.col_id"}}</th><th class="text-nowrap">{{T "admin.audit.col_type"}}</th><th>{{T "admin.audit.col_title"}}</th><th class="text-nowrap">{{T "admin.audit.col_ver"}}</th><th>{{T "admin.audit.col_user"}}</th><th class="text-nowrap">{{T "admin.audit.col_time"}}</th><th class="text-nowrap">{{T "admin.audit.col_status"}}</th><th class="text-end text-nowrap" style="width:3.5rem">{{T "admin.audit.col_actions"}}</th>
      </tr></thead>
      <tbody>
      {{range $r := .Data.Rows}}
      <tr>
        <td class="text-muted small font-monospace">{{index $r "id"}}</td>
        <td>{{if eq (index $r "item_type") 1}}{{T "admin.audit.type_source"}}{{else}}{{T "admin.audit.type_soft"}}{{end}}</td>
        <td class="fw-medium">
          <button type="button" class="btn btn-link p-0 text-start text-body text-decoration-none fw-medium js-admin-open-audit" data-id="{{index $r "id"}}">{{index $r "title"}}</button>
        </td>
        <td><span class="text-muted">{{index $r "version"}}</span></td>
        <td>{{$suid := index $r "user_id"}}{{if gt (asInt $suid) 0}}<button type="button" class="btn btn-link btn-sm p-0 align-baseline text-start js-admin-user-preview" data-user-id="{{$suid}}" title="{{T "admin.audit.view_user"}}">{{index $r "submitter_name"}}</button>{{else}}<span class="text-muted">—</span>{{end}}</td>
        <td class="small text-muted text-nowrap">{{unixTime (index $r "created_at")}}</td>
        <td>{{$st := index $r "status"}}{{if eq (asInt $st) 1}}<span class="badge badge-soft bg-warning text-dark">{{T "admin.audit.badge_pending"}}</span>{{else if eq (asInt $st) 0}}<span class="badge bg-secondary">{{T "admin.audit.badge_draft"}}</span>{{else if eq (asInt $st) 3}}<span class="badge bg-danger">{{T "admin.audit.badge_reject"}}</span>{{else if eq (asInt $st) 2}}<span class="badge bg-success">{{T "admin.audit.badge_published"}}</span>{{else}}<span class="badge bg-dark">{{T "admin.audit.badge_offline"}}</span>{{end}}</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.audit.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>
                <a class="dropdown-item d-flex align-items-center gap-2" href="{{itemSoftPath (index $r "id")}}" target="_blank" rel="noopener">
                  <i class="bx bx-show text-secondary"></i><span>{{T "item_admin_preview_menu"}}</span>
                </a>
              </li>
              <li>
                <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-admin-open-audit" data-id="{{index $r "id"}}">
                  <i class="bx bx-check-shield text-primary"></i><span>{{T "admin.audit.menu_audit"}}</span>
                </button>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="8" class="text-center text-muted py-5"><i class="bx bxs-inbox fs-2 d-block mb-2 opacity-50"></i>{{T "admin.audit.empty"}}</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>
{{end}}

{{$pg := .Data.Page}}{{$ps := .Data.PageSize}}{{$tot := .Data.Total}}
{{if or (gt $pg 1) (eq (len .Data.Rows) $ps)}}
<nav class="mt-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
  <span class="small text-muted">{{T "admin.audit.total_prefix"}} <strong>{{$tot}}</strong> {{T "admin.audit.total_suffix"}}</span>
  <div class="btn-group btn-group-sm shadow-sm">
    {{if gt $pg 1}}<a class="btn btn-outline-secondary" href="/admin/audit?status={{urlEncode $.Data.QStatus}}&item_type={{urlEncode $.Data.QItemType}}&user_id={{urlEncode $.Data.QUserID}}&q={{urlEncode $.Data.QQ}}&from={{urlEncode $.Data.QFrom}}&to={{urlEncode $.Data.QTo}}&page={{sub $pg 1}}"><i class="bx bx-chevron-left"></i> {{T "admin.audit.prev"}}</a>{{end}}
    {{if eq (len .Data.Rows) $ps}}<a class="btn btn-outline-secondary" href="/admin/audit?status={{urlEncode $.Data.QStatus}}&item_type={{urlEncode $.Data.QItemType}}&user_id={{urlEncode $.Data.QUserID}}&q={{urlEncode $.Data.QQ}}&from={{urlEncode $.Data.QFrom}}&to={{urlEncode $.Data.QTo}}&page={{add $pg 1}}">{{T "admin.audit.next"}} <i class="bx bx-chevron-right"></i></a>{{end}}
  </div>
</nav>
{{end}}

</div>

<script>
var AL = {
  openPrefix: {{jsString (T "admin.audit.open_title_prefix")}},
  needPick: {{jsString (T "admin.audit.need_pick")}},
  confirmApprove: {{jsString (T "admin.audit.confirm_approve")}},
  confirmApproveTail: {{jsString (T "admin.audit.confirm_approve_tail")}},
  bulkApproveTitle: {{jsString (T "admin.audit.bulk_approve_title")}},
  rejectLabel: {{jsString (T "admin.audit.reject_reason_label")}},
  rejectPh: {{jsString (T "admin.audit.reject_reason_ph")}},
  needReason: {{jsString (T "admin.audit.need_reason")}},
  rejectTitlePre: {{jsString (T "admin.audit.bulk_reject_title_prefix")}},
  rejectTitleSuf: {{jsString (T "admin.audit.bulk_reject_title_suffix")}},
  confirmReject: {{jsString (T "admin.audit.confirm_reject")}},
  cancel: {{jsString (T "admin.audit.cancel")}},
  promptReason: {{jsString (T "admin.audit.prompt_reason")}}
};
$(document).on('click', '.js-admin-open-audit', function () {
  var id = $(this).data('id');
  if (!id || !window.csAdminModal || typeof window.csAdminModal.openEmbed !== 'function') return;
  window.csAdminModal.openEmbed(AL.openPrefix + id, '/admin/audit/' + id + '?embed=1', ['min(960px, 96vw)', '90vh']);
});

(function () {
  var $bulk = $('#admin-audit-bulk');
  if (!$bulk.length) return;

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

  function checkedCount() {
    return $bulk.find('input.js-audit-row-chk:checked').length;
  }

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

  $('.js-admin-audit-bulk-approve').on('click', function () {
    var n = needPick();
    if (!n) return;
    var msg = AL.confirmApprove + ' ' + n + ' ' + AL.confirmApproveTail;
    function go() {
      $('#admin-audit-bulk-action').val('bulk_approve');
      $bulk.find('input[name="reject_reason"]').remove();
      $bulk.trigger('submit');
    }
    if (window.layer && typeof window.layer.confirm === 'function') {
      window.layer.confirm(msg, { title: AL.bulkApproveTitle, icon: 3 }).then(function (ok) {
        if (ok) go();
      });
      return;
    }
    if (window.confirm(msg)) go();
  });

  $('.js-admin-audit-bulk-reject').on('click', function () {
    var n = needPick();
    if (!n) return;
    var html = '<div class="p-1"><label class="form-label small mb-1">' + AL.rejectLabel + '</label>'
      + '<textarea class="form-control form-control-sm" id="auditBulkRejectReason" rows="4" maxlength="500" placeholder="' + AL.rejectPh + '"></textarea></div>';
    function submitReject(reason) {
      reason = $.trim(reason || '');
      if (!reason) {
        if (window.layer && typeof window.layer.msg === 'function') {
          window.layer.msg(AL.needReason, { icon: 0 });
        } else {
          alert(AL.needReason);
        }
        return;
      }
      $('#admin-audit-bulk-action').val('bulk_reject');
      $bulk.find('input[name="reject_reason"]').remove();
      $('<input type="hidden" name="reject_reason">').val(reason).appendTo($bulk);
      $bulk.trigger('submit');
    }
    if (window.layer && typeof window.layer.open === 'function') {
      window.layer.open({
        type: 1,
        title: AL.rejectTitlePre + n + AL.rejectTitleSuf,
        area: ['min(420px, 92vw)', 'auto'],
        content: html,
        btn: [AL.confirmReject, AL.cancel],
        yes: function (idx) {
          var reason = $('#auditBulkRejectReason').val();
          if (!$.trim(reason)) {
            if (typeof window.layer.msg === 'function') {
              window.layer.msg(AL.needReason, { icon: 0 });
            }
            return false;
          }
          window.layer.close(idx);
          submitReject(reason);
        }
      });
      return;
    }
    var reason = window.prompt(AL.promptReason);
    if (reason !== null) submitReject(reason);
  });
})();
</script>
{{template "admin_shell_close" .}}
{{end}}