{{define "admin/comments.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-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-comment-detail"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.comments.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{.Data.PolicyTip}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a class="btn btn-sm btn-outline-primary" href="/admin/config"><i class="bx bx-cog me-1"></i>{{T "admin.comments.link_policy"}}</a>
  </div>
</header>
<div class="card cs-admin-section cs-admin-section--toolbar mb-3">
  <div class="cs-admin-section__body py-2 px-3 d-flex flex-wrap align-items-center gap-2">
    <div class="btn-group btn-group-sm">
      <a class="btn btn-outline-secondary {{if or (eq .Data.QStatus "") (eq .Data.QStatus "all")}}active{{end}}" href="/admin/comments?status=all">{{T "admin.comments.all"}}</a>
      <a class="btn btn-outline-secondary {{if eq .Data.QStatus "2"}}active{{end}}" href="/admin/comments?status=2">{{T "admin.comments.pending"}}</a>
      <a class="btn btn-outline-secondary {{if eq .Data.QStatus "3"}}active{{end}}" href="/admin/comments?status=3">{{T "admin.comments.blocked"}}</a>
    </div>
    <form id="admin-comments-bulk" method="post" action="/admin/comments" class="d-inline-block ms-auto">
      <input type="hidden" name="action" value="bulk_delete">
      <button type="button" class="btn btn-sm btn-outline-danger js-admin-comments-bulk-del">{{T "admin.comments.bulk_del"}}</button>
    </form>
  </div>
</div>
<div class="card cs-admin-section"><div class="cs-admin-section__body cs-admin-section__body--flush"><div class="table-responsive"><table class="table table-sm align-middle mb-0">
<thead class="table-light"><tr><th style="width:36px"><input type="checkbox" id="chk-all-comments" title="{{T "admin.comments.select_page"}}" aria-label="{{T "admin.comments.select_page"}}"></th><th>ID</th><th>item</th><th>user</th><th>content</th><th>{{T "admin.comments.col_status"}}</th><th>{{T "admin.comments.col_spam"}}</th><th class="text-end">{{T "admin.comments.col_ops"}}</th></tr></thead>
<tbody>
{{range .Data.Rows}}
{{$cid := index . "id"}}{{$iid := index . "item_id"}}
<tr>
  <td><input type="checkbox" form="admin-comments-bulk" name="ids" value="{{$cid}}" aria-label="{{T "admin.comments.select_row"}} {{$cid}}"></td>
  <td>{{$cid}}</td>
  <td class="small"><a href="/item/{{$iid}}" target="_blank" rel="noopener noreferrer">#{{$iid}} {{index . "item_title"}}</a></td>
  <td class="small">#{{index . "user_id"}} {{index . "author_name"}}</td>
  <td class="small" style="max-width:240px"><div class="text-truncate">{{index . "content"}}</div></td>
  <td>{{$cs := asInt (index . "status")}}{{if eq $cs 1}}{{T "admin.comments.st_ok"}}{{else if eq $cs 2}}{{T "admin.comments.st_pending"}}{{else if eq $cs 3}}{{T "admin.comments.st_block"}}{{else}}{{$cs}}{{end}}</td>
  <td>{{if eq (asInt (index . "is_spam_flag")) 1}}{{T "admin.comments.spam_yes"}}{{else}}{{T "admin.comments.spam_no"}}{{end}}</td>
  <td class="text-end text-nowrap p-2">
    <textarea class="d-none" id="admin-cmt-body-{{$cid}}" aria-hidden="true">{{index . "content"}}</textarea>
    <button type="button" class="btn btn-sm btn-outline-primary js-admin-open-comment"
      data-id="{{$cid}}"
      data-status="{{index . "status"}}"
      data-spam="{{index . "is_spam_flag"}}"
      data-body-el="admin-cmt-body-{{$cid}}"
      data-item="#{{index . "item_id"}} {{index . "item_title"}}"
      data-user="#{{index . "user_id"}} {{index . "author_name"}}">{{T "admin.comments.handle"}}</button>
  </td>
</tr>
{{else}}<tr><td colspan="8" class="text-center text-muted py-4">{{T "admin.comments.empty"}}</td></tr>{{end}}
</tbody></table></div></div></div>
{{$pg := .Data.Page}}{{$ps := .Data.PageSize}}{{if or (gt $pg 1) (eq (len .Data.Rows) $ps)}}
<nav class="mt-3 d-flex justify-content-between"><span class="small text-muted">{{T "admin.comments.total_prefix"}} {{.Data.Total}}</span>
<div class="btn-group btn-group-sm">{{if gt $pg 1}}<a class="btn btn-outline-secondary" href="/admin/comments?status={{urlEncode $.Data.QStatus}}&page={{sub $pg 1}}">{{T "admin.comments.prev"}}</a>{{end}}
{{if eq (len .Data.Rows) $ps}}<a class="btn btn-outline-secondary" href="/admin/comments?status={{urlEncode $.Data.QStatus}}&page={{add $pg 1}}">{{T "admin.comments.next"}}</a>{{end}}
</div></nav>{{end}}
<script>
(function () {
  $('#chk-all-comments').on('change', function () {
    var on = $(this).prop('checked');
    $('input[type="checkbox"][form="admin-comments-bulk"][name="ids"]').prop('checked', on);
  });

  $('.js-admin-comments-bulk-del').on('click', function () {
    var form = document.getElementById('admin-comments-bulk');
    if (!form) return;
    var n = $(form).find('input[name="ids"]:checked').length;
    if (n === 0) {
      if (window.layer && typeof window.layer.msg === 'function') {
        window.layer.msg(Lcmt.needCheck, { icon: 0, time: 2000 });
      } else {
        alert(Lcmt.needCheck);
      }
      return;
    }
    var msg = Lcmt.bulkConfirm.replace('%s', String(n));
    function doSubmit() {
      form.submit();
    }
    if (window.layer && typeof window.layer.confirm === 'function') {
      window.layer.confirm(msg, { title: Lcmt.delTitle, icon: 3, btn: [Lcmt.delOk, Lcmt.delCancel] }).then(function (ok) {
        if (ok) doSubmit();
      });
      return;
    }
    if (window.confirm(msg)) {
      doSubmit();
    }
  });
})();
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}