{{define "admin/users.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-page">
{{template "admin_flash" .}}
{{template "admin_pagehead" (dict "Icon" "bx-user" "Title" (T "admin.users.title") "Desc" (T "admin.users.desc"))}}
<div class="card cs-admin-section cs-admin-section--toolbar mb-3">
  <div class="cs-admin-section__body py-2 px-3">
    <form class="row g-2 align-items-center" method="get">
      <div class="col-auto flex-grow-1"><input class="form-control form-control-sm" name="q" value="{{.Data.QQ}}" placeholder="{{T "admin.users.search_ph"}}"></div>
      <div class="col-auto"><button class="btn btn-primary btn-sm" type="submit"><i class="bx bx-search me-1"></i>{{T "admin.users.filter"}}</button></div>
    </form>
  </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 table-hover align-middle mb-0">
<thead class="table-light">
  <tr>
    <th style="width:4.5rem">{{T "admin.users.col_id"}}</th>
    <th>{{T "admin.users.col_user"}}</th>
    <th>{{T "admin.users.col_group"}}</th>
    <th>{{T "admin.users.col_status"}}</th>
    <th>{{T "admin.users.col_time"}}</th>
    <th>{{T "admin.users.col_ip"}}</th>
    <th class="text-end" style="width:6rem">{{T "admin.users.col_actions"}}</th>
  </tr>
</thead>
<tbody>
{{range .Data.Rows}}
{{$uid := index . "id"}}
{{$role := asInt (index . "role")}}
{{$email := index . "email"}}
{{$nick := index . "nickname"}}
{{$uname := index . "username"}}
<tr>
  <td class="font-monospace small">{{$uid}}</td>
  <td>
    <div class="fw-semibold">{{privacy "username" $uname}}{{if eq $role 1}} <span class="badge bg-danger">{{T "admin.users.role_admin"}}</span>{{end}}</div>
    {{if $email}}<div class="text-muted small text-break">{{privacy "email" $email}}</div>{{else}}<div class="text-muted small">—</div>{{end}}
    {{if and $nick (ne $nick $uname)}}<div class="text-muted small">{{privacy "text" $nick}}</div>{{end}}
  </td>
  <td class="small">
    {{$gname := index . "group_name"}}
    {{if $gname}}{{$gname}}{{else}}—{{end}}
    {{if ne $role 1}}<div class="text-muted mt-1">{{T "admin.users.role_user"}}</div>{{end}}
  </td>
  <td>{{if eq (asInt (index . "status")) 1}}<span class="badge bg-success">{{T "admin.users.status_ok"}}</span>{{else}}<span class="badge bg-secondary">{{T "admin.users.status_disabled"}}</span>{{end}}</td>
  <td>
    <div class="small">
      <div><i class="bx bx-calendar text-muted"></i> {{T "admin.users.lbl_reg"}}：{{if index . "reg_time_str"}}{{index . "reg_time_str"}}{{else}}—{{end}}</div>
      <div class="text-muted mt-1"><i class="bx bx-time"></i> {{T "admin.users.lbl_login"}}：{{if index . "last_time_str"}}{{index . "last_time_str"}}{{else}}—{{end}}</div>
    </div>
  </td>
  <td class="small">
    {{$lip := index . "last_ip"}}
    {{if $lip}}
    <div class="font-monospace">{{privacy "ip" $lip}}</div>
    {{if index . "last_ip_geo"}}<div class="text-muted mt-1"><i class="bx bx-map"></i> {{index . "last_ip_geo"}}</div>{{end}}
    {{else}}—{{end}}
  </td>
  <td class="text-end text-nowrap p-2">
    {{if ne $role 1}}
    <button type="button" class="btn btn-sm btn-outline-primary js-admin-user-edit-bs"
      data-uid="{{$uid}}">{{T "admin.users.btn_edit"}}</button>
    {{else}}
    <button type="button" class="btn btn-sm btn-outline-secondary js-admin-user-preview" data-user-id="{{$uid}}" title="{{T "admin.users.view_title"}}">{{T "admin.users.btn_view"}}</button>
    {{end}}
  </td>
</tr>
{{else}}<tr><td colspan="7" class="text-center text-muted py-4">{{T "admin.users.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-2 d-flex justify-content-between"><span class="small text-muted">{{T "admin.users.total_prefix"}} {{.Data.Total}}</span>
<div class="btn-group btn-group-sm">{{if gt $pg 1}}<a class="btn btn-outline-secondary" href="/admin/users?q={{urlEncode $.Data.QQ}}&page={{sub $pg 1}}">{{T "admin.users.prev"}}</a>{{end}}
{{if eq (len .Data.Rows) $ps}}<a class="btn btn-outline-secondary" href="/admin/users?q={{urlEncode $.Data.QQ}}&page={{add $pg 1}}">{{T "admin.users.next"}}</a>{{end}}
</div></nav>{{end}}

<div class="modal fade" id="adminUserEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bx bx-user me-1"></i>{{T "admin.users.modal_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.users.close"}}"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small" id="adminUserEditLoading">{{T "admin.users.loading"}}</p>
        <form id="adminUserEditForm" class="d-none">
          <input type="hidden" name="user_id" id="admUserF_uid">
          <div class="mb-2">
            <label class="form-label small mb-0">{{T "admin.users.label_username"}}</label>
            <input type="text" class="form-control form-control-sm" name="username" id="admUserF_username" required autocomplete="off">
          </div>
          <div class="mb-2">
            <label class="form-label small mb-0">{{T "admin.users.label_email"}}</label>
            <input type="email" class="form-control form-control-sm" name="email" id="admUserF_email" autocomplete="off" placeholder="{{T "admin.users.email_ph"}}">
          </div>
          <div class="mb-2">
            <label class="form-label small mb-0">{{T "admin.users.label_nickname"}}</label>
            <input type="text" class="form-control form-control-sm" name="nickname" id="admUserF_nickname" autocomplete="off">
          </div>
          <div class="mb-2">
            <label class="form-label small mb-0">{{T "admin.users.label_group"}}</label>
            <select class="form-select form-select-sm adm-user-edit-group-select" name="group_id" id="admUserF_group"></select>
          </div>
          <div class="mb-3">
            <label class="form-label small mb-0">{{T "admin.users.label_status"}}</label>
            <select class="form-select form-select-sm adm-user-edit-status-select" name="status" id="admUserF_status">
              <option value="1">{{T "admin.users.status_ok"}}</option>
              <option value="0">{{T "admin.users.status_disabled"}}</option>
            </select>
          </div>
          <div class="border-top pt-3 mb-3" id="admUserF_meta">
            <div class="small text-muted mb-2">{{T "admin.users.meta_title"}}</div>
            <dl class="row small mb-0">
              <dt class="col-sm-4 text-muted">{{T "admin.users.lbl_reg"}}</dt>
              <dd class="col-sm-8" id="admUserF_regTime">—</dd>
              <dt class="col-sm-4 text-muted">{{T "admin.users.lbl_login"}}</dt>
              <dd class="col-sm-8" id="admUserF_lastTime">—</dd>
              <dt class="col-sm-4 text-muted">{{T "admin.users.lbl_reg_ip"}}</dt>
              <dd class="col-sm-8 font-monospace" id="admUserF_regIp">—</dd>
              <dt class="col-sm-4 text-muted">{{T "admin.users.lbl_last_ip"}}</dt>
              <dd class="col-sm-8 font-monospace" id="admUserF_lastIp">—</dd>
            </dl>
          </div>
          <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center pt-2 border-top">
            <button type="button" class="btn btn-sm btn-outline-danger d-none" id="admUserF_delete">{{T "admin.users.btn_delete"}}</button>
            <div class="d-flex gap-2 ms-auto">
              <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">{{T "admin.users.cancel"}}</button>
              <button type="submit" class="btn btn-sm btn-primary" id="admUserF_save">{{T "admin.users.save"}}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var L = {
    loading: {{jsString (T "admin.users.loading")}},
    loadFailed: {{jsString (T "admin.users.load_failed")}},
    saved: {{jsString (T "admin.users.saved")}},
    saveFailed: {{jsString (T "admin.users.save_failed")}},
    confirmDelete: {{jsString (T "admin.users.confirm_delete")}},
    deleted: {{jsString (T "admin.users.deleted")}},
    deleteFailed: {{jsString (T "admin.users.save_failed")}},
    confirmTitle: {{jsString (T "admin.users.btn_delete")}}
  };
  function esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function wrapIP(ip, geo) {
    if (!ip) return '—';
    var html = (window.NCPrivacy && NCPrivacy.wrapHTML) ? NCPrivacy.wrapHTML('ip', ip) : esc(ip);
    if (geo) {
      html = '<div>' + html + '</div><div class="text-muted mt-1"><i class="bx bx-map"></i> ' + esc(geo) + '</div>';
    }
    return html;
  }
  function toastOk(msg) {
    if (window.layer && layer.msg) layer.msg(msg, { icon: 1 });
    else alert(msg);
  }
  function toastErr(msg) {
    if (window.layer && layer.msg) layer.msg(msg, { icon: 2 });
    else alert(msg);
  }
  var editModalEl = document.getElementById('adminUserEditModal');
  var editModal = editModalEl && window.bootstrap ? new bootstrap.Modal(editModalEl) : null;

  function openEditModal(uid) {
    if (!editModal) return;
    $('#adminUserEditLoading').removeClass('d-none').text(L.loading);
    $('#adminUserEditForm').addClass('d-none');
    $('#admUserF_save').prop('disabled', true);
    editModal.show();
    $.getJSON('/admin/users/detail?id=' + encodeURIComponent(uid), function (res) {
      if (!res || !res.success || !res.data || !res.data.user) {
        $('#adminUserEditLoading').text(L.loadFailed);
        return;
      }
      var u = res.data.user;
      var groups = res.data.groups || [];
      $('#adminUserEditLoading').addClass('d-none');
      $('#adminUserEditForm').removeClass('d-none');
      $('#admUserF_uid').val(String(u.id));
      $('#admUserF_username').val(u.username || '');
      $('#admUserF_email').val(u.email || '');
      $('#admUserF_nickname').val(u.nickname || '');
      var $g = $('#admUserF_group').empty();
      groups.forEach(function (g) {
        $g.append($('<option></option>').attr('value', String(g.id)).text(g.name || ('#' + g.id)));
      });
      var curGid = String(u.group_id);
      if (!$g.find('option').filter(function () { return String($(this).val()) === curGid; }).length && curGid !== '0') {
        $g.append($('<option></option>').attr('value', curGid).text(u.group_name || ('#' + curGid)));
      }
      $('#admUserF_group').val(curGid);
      $('#admUserF_status').val(String(u.status === 0 ? 0 : 1));
      $('#admUserF_regTime').text(u.reg_time_str || '—');
      $('#admUserF_lastTime').text(u.last_time_str || '—');
      $('#admUserF_regIp').html(wrapIP(u.reg_ip, u.reg_ip_geo));
      $('#admUserF_lastIp').html(wrapIP(u.last_ip, u.last_ip_geo));
      var canEdit = u.can_edit !== false;
      $('#admUserF_username, #admUserF_email, #admUserF_nickname, #admUserF_group, #admUserF_status').prop('disabled', !canEdit);
      $('#admUserF_save').prop('disabled', !canEdit).toggleClass('d-none', !canEdit);
      var $del = $('#admUserF_delete');
      if (u.can_delete) {
        $del.removeClass('d-none').prop('disabled', false);
      } else {
        $del.addClass('d-none');
      }
    }).fail(function () {
      $('#adminUserEditLoading').text(L.loadFailed);
    });
  }

  $(document).on('click', '.js-admin-user-edit-bs', function () {
    var uid = $(this).data('uid');
    if (!uid) return;
    openEditModal(uid);
  });

  $('#adminUserEditForm').on('submit', function (e) {
    e.preventDefault();
    var fd = $(this).serialize();
    $.ajax({
      url: '/admin/users/update',
      type: 'POST',
      data: fd,
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json',
      success: function (r) {
        if (r && r.success) {
          toastOk((r.data && r.data.message) || L.saved);
          if (editModal) editModal.hide();
          location.reload();
        } else {
          toastErr((r && r.message) || L.saveFailed);
        }
      },
      error: function (xhr) {
        var m = L.saveFailed;
        try { var j = JSON.parse(xhr.responseText); if (j.message) m = j.message; } catch (e) {}
        toastErr(m);
      }
    });
  });

  $('#admUserF_delete').on('click', function () {
    var uid = $('#admUserF_uid').val();
    if (!uid) return;
    var doDel = function () {
      $.ajax({
        url: '/admin/users/delete',
        type: 'POST',
        data: { user_id: uid },
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        dataType: 'json',
        success: function (r) {
          if (r && r.success) {
            toastOk((r.data && r.data.message) || L.deleted);
            if (editModal) editModal.hide();
            location.reload();
          } else {
            toastErr((r && r.message) || L.deleteFailed);
          }
        },
        error: function (xhr) {
          var m = L.deleteFailed;
          try { var j = JSON.parse(xhr.responseText); if (j.message) m = j.message; } catch (e) {}
          toastErr(m);
        }
      });
    };
    if (window.layer && layer.confirm) {
      layer.confirm(L.confirmDelete, { title: L.confirmTitle, icon: 3 }).then(function (ok) { if (ok) doDel(); });
    } else if (window.confirm(L.confirmDelete)) {
      doDel();
    }
  });
})();
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}