{{define "admin/logs.html"}}
{{template "admin_shell_open" .}}
<style>
.admin-logs-head { margin-bottom: .5rem; }
.admin-logs-head .admin-logs-title { font-size: 1rem; font-weight: 600; }
.admin-logs-toolbar .form-control,
.admin-logs-toolbar .form-select { min-height: calc(1.5em + .5rem + 2px); }
.admin-logs-toolbar .form-label-inline {
  font-size: .75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  margin-bottom: 0;
  margin-right: .35rem;
}
@media (min-width: 576px) {
  .admin-logs-toolbar .admin-logs-filter-row {
    flex-wrap: nowrap;
    align-items: center !important;
  }
}
</style>
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-history" "Title" (T "admin.logs.title") "Desc" (printf (T "admin.logs.desc_fmt") .Data.Total .Data.PageSize))}}
<div class="card cs-admin-section cs-admin-section--toolbar mb-3">
  <div class="cs-admin-section__body admin-logs-toolbar py-2 px-3">
    <div class="row g-2 align-items-center admin-logs-filter-row">
      <div class="col-12 col-sm-auto d-flex align-items-center flex-shrink-0">
        <label class="form-label-inline" for="adminLogDate">{{T "admin.logs.date"}}</label>
        <select class="form-select form-select-sm" style="min-width:11rem" id="adminLogDate" name="date" aria-label="{{T "admin.logs.date_aria"}}">
          {{range .Data.DateChoices}}
          <option value="{{.}}" {{if eq $.Data.Date .}}selected{{end}}>{{.}}</option>
          {{end}}
          {{if not .Data.DateChoices}}<option value="{{.Data.Date}}" selected>{{.Data.Date}}</option>{{end}}
        </select>
      </div>
      <div class="col min-w-0 d-flex align-items-center flex-grow-1">
        <label class="form-label-inline d-none d-sm-inline" for="adminLogQ">{{T "admin.logs.search"}}</label>
        <input type="search" class="form-control form-control-sm flex-grow-1" id="adminLogQ" name="q" value="{{.Data.Q}}" placeholder="{{T "admin.logs.ph_q"}}" autocomplete="off" enterkeyhint="search">
      </div>
      <div class="col-12 col-sm-auto d-flex flex-wrap gap-1 align-items-center justify-content-sm-end">
        <button type="button" class="btn btn-primary btn-sm px-3" id="adminLogSearchBtn">{{T "admin.logs.search"}}</button>
        <a class="btn btn-outline-secondary btn-sm" id="adminLogResetLink" href="/admin/logs">{{T "admin.logs.reset"}}</a>
      </div>
    </div>
  </div>
</div>

<div class="card cs-admin-section"><div class="cs-admin-section__body cs-admin-section__body--flush"><div class="table-responsive" data-nc-privacy-menu><table class="table table-sm align-middle mb-0">
<thead class="table-light"><tr><th>{{T "admin.logs.col_line"}}</th><th>{{T "admin.logs.col_time"}}</th><th>admin</th><th>action</th><th>module</th><th>content</th><th>ip</th><th class="text-end">{{T "admin.logs.col_ops"}}</th></tr></thead>
<tbody id="adminLogsTbody">
{{range .Data.Rows}}
{{$lid := index . "id"}}
<tr>
  <td>{{$lid}}</td>
  <td class="small text-muted">{{unixTime (index . "created_at")}}</td>
  <td class="small">#{{index . "admin_id"}} {{privacy "username" (index . "admin_name")}}</td>
  <td><code>{{index . "action"}}</code></td>
  <td>{{index . "module"}}</td>
  <td class="small text-break" style="max-width:220px"><div class="text-truncate">{{index . "content"}}</div></td>
  <td class="small">{{privacy "ip" (index . "ip")}}</td>
  <td class="text-end text-nowrap p-2">
    <textarea class="d-none" id="admin-log-body-{{$lid}}" aria-hidden="true">{{index . "content"}}</textarea>
    <button type="button" class="btn btn-sm btn-outline-secondary js-admin-open-log"
      data-id="{{$lid}}"
      data-time="{{unixTime (index . "created_at")}}"
      data-admin="#{{index . "admin_id"}} {{index . "admin_name"}}"
      data-action="{{index . "action"}}"
      data-module="{{index . "module"}}"
      data-ip="{{index . "ip"}}"
      data-user-agent="{{index . "user_agent"}}"
      data-body-el="admin-log-body-{{$lid}}">{{T "admin.logs.detail"}}</button>
  </td>
</tr>
{{else}}<tr id="adminLogsEmptyRow"><td colspan="8" class="text-center text-muted py-4">{{if and (not .Data.HasDayFile) (eq .Data.Total 0)}}{{T "admin.logs.empty_day"}}{{else}}{{T "admin.logs.empty_match"}}{{end}}</td></tr>{{end}}
</tbody></table></div></div></div>

<nav class="mt-2 d-flex justify-content-between flex-wrap gap-2" id="adminLogsPagerWrap">
<span class="small text-muted d-none d-sm-inline" id="adminLogsPagerHint"></span>
<div class="btn-group btn-group-sm" id="adminLogsPager">
{{if gt .Data.Total 0}}
{{if gt .Data.Page 1}}<a class="btn btn-outline-secondary" href="/admin/logs?date={{urlEncode .Data.Date}}&q={{urlEncode .Data.Q}}&page={{sub .Data.Page 1}}">{{T "admin.logs.prev"}}</a>{{end}}
{{if lt .Data.Page .Data.TotalPages}}<a class="btn btn-outline-secondary" href="/admin/logs?date={{urlEncode .Data.Date}}&q={{urlEncode .Data.Q}}&page={{add .Data.Page 1}}">{{T "admin.logs.next"}}</a>{{end}}
{{else}}<span class="small text-muted px-2">{{T "admin.logs.no_pager"}}</span>{{end}}
</div>
</nav>

<script>
window.__adminLogsPage = {{.Data.Page}};
(function ($) {
  'use strict';
  function esc(t) {
    if (window.csAdminModal && typeof csAdminModal.escHtml === 'function') {
      return csAdminModal.escHtml(t);
    }
    return String(t == null ? '' : t)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }
  function buildQuery(date, q, page) {
    var p = { ajax: '1', date: date || '', q: q || '', page: String(page || 1) };
    return p;
  }
  function renderRows(rows, hasDayFile, total) {
    var h = '';
    if (!rows || !rows.length) {
      var emptyMsg =
        hasDayFile === false && (!total || total === 0)
          ? Llogs.emptyDay
          : Llogs.emptyMatch;
      h = '<tr id="adminLogsEmptyRow"><td colspan="8" class="text-center text-muted py-4">' + emptyMsg + '</td></tr>';
      return h;
    }
    for (var i = 0; i < rows.length; i++) {
      var r = rows[i];
      var id = r.id != null ? r.id : '';
      var body = r.content != null ? String(r.content) : '';
      var cid = 'admin-log-body-a-' + id + '-' + i;
      h += '<tr>';
      h += '<td>' + esc(id) + '</td>';
      h += '<td class="small text-muted">' + esc(r._timeDisplay || '') + '</td>';
      var wrap = (window.NCPrivacy && NCPrivacy.wrapHTML) ? function (kind, v) { return NCPrivacy.wrapHTML(kind, v || ''); } : function (_k, v) { return esc(v || ''); };
      h += '<td class="small">#' + esc(r.admin_id) + ' ' + (r.admin_name ? wrap('username', r.admin_name) : '') + '</td>';
      h += '<td><code>' + esc(r.action) + '</code></td>';
      h += '<td>' + esc(r.module) + '</td>';
      h += '<td class="small text-break" style="max-width:220px"><div class="text-truncate">' + esc(body) + '</div></td>';
      h += '<td class="small">' + (r.ip ? wrap('ip', r.ip) : '') + '</td>';
      h += '<td class="text-end text-nowrap p-2">';
      h += '<textarea class="d-none" id="' + esc(cid) + '" aria-hidden="true">' + esc(body) + '</textarea>';
      h += '<button type="button" class="btn btn-sm btn-outline-secondary js-admin-open-log"';
      h += ' data-id="' + esc(id) + '"';
      h += ' data-time="' + esc(r._timeDisplay || '') + '"';
      h += ' data-admin="#' + esc(r.admin_id) + ' ' + esc(r.admin_name) + '"';
      h += ' data-action="' + esc(r.action) + '"';
      h += ' data-module="' + esc(r.module) + '"';
      h += ' data-ip="' + esc(r.ip) + '"';
      h += ' data-user-agent="' + esc(r.user_agent) + '"';
      h += ' data-body-el="' + esc(cid) + '">{{T "admin.logs.detail"}}</button>';
      h += '</td></tr>';
    }
    return h;
  }
  function renderPager(total, page, pageSize, date, q, totalPagesArg) {
    var ps = pageSize || 40;
    var pg = Math.max(1, parseInt(page, 10) || 1);
    var pages =
      totalPagesArg != null && parseInt(totalPagesArg, 10) >= 1
        ? parseInt(totalPagesArg, 10)
        : Math.max(1, Math.ceil(total / ps));
    if (!total) {
      pages = totalPagesArg != null && parseInt(totalPagesArg, 10) >= 1 ? parseInt(totalPagesArg, 10) : 1;
      pg = 1;
    }
    var base = '/admin/logs';
    function href(pnum) {
      return base + '?date=' + encodeURIComponent(date) + '&q=' + encodeURIComponent(q || '') + '&page=' + pnum;
    }
    var html = '';
    if (pg > 1) {
      html += '<a class="btn btn-outline-secondary" href="' + href(pg - 1) + '" data-page="' + (pg - 1) + '">{{T "admin.logs.prev"}}</a>';
    }
    if (pg < pages && total > 0) {
      html += '<a class="btn btn-outline-secondary" href="' + href(pg + 1) + '" data-page="' + (pg + 1) + '">{{T "admin.logs.next"}}</a>';
    }
    return html || '<span class="small text-muted px-2">' + Llogs.onePage + '</span>';
  }
  var timer = null;
  function loadLogs() {
    var date = $('#adminLogDate').val() || '';
    var q = $('#adminLogQ').val() || '';
    if (!window.__adminLogsPage) window.__adminLogsPage = 1;
    var page = window.__adminLogsPage || 1;
    $.ajax({
      url: '/admin/logs',
      type: 'GET',
      data: buildQuery(date, q, page),
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res || !res.success || !res.data) return;
      var d = res.data;
      window.__adminLogsPage = d.page || 1;
      var rows = d.rows || [];
      for (var j = 0; j < rows.length; j++) {
        var ts = rows[j].created_at;
        rows[j]._timeDisplay = ts ? new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false }) : '';
      }
      $('#adminLogsTbody').html(renderRows(rows, d.hasDayFile, d.total || 0));
      $('#adminLogsMeta').text(Llogs.metaFmt.replace('%s', String(d.total || 0)).replace('%s', String(d.pageSize || 40)));
      $('#adminLogsPager').html(
        renderPager(d.total || 0, d.page || 1, d.pageSize || 40, d.date || date, d.q != null ? d.q : q, d.totalPages)
      );
    });
  }
  function scheduleLoad() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () { window.__adminLogsPage = 1; loadLogs(); }, 420);
  }
  $(function () {
    $('#adminLogSearchBtn').on('click', function () {
      window.__adminLogsPage = 1;
      loadLogs();
    });
    $('#adminLogDate').on('change', function () {
      window.__adminLogsPage = 1;
      loadLogs();
    });
    $('#adminLogQ').on('input', function () {
      scheduleLoad();
    });
    $(document).on('click', '#adminLogsPager a[data-page]', function (e) {
      e.preventDefault();
      var p = $(this).data('page');
      window.__adminLogsPage = p;
      loadLogs();
    });
  });
})(jQuery);
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}