{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang admin.user_management}</div>
    <div class="nv-page-desc">{lang admin.user_index_desc} {lang admin.total} {$pager.total} {lang admin.unit_users}</div>
  </div>
  <div class="nv-page-actions">
    <button class="nv-btn nv-btn-primary" type="button" id="userAddBtn">＋ {lang admin.new_user}</button>
  </div>
</div>

<div class="nv-card">
  <form class="nv-filters" method="get" action="{$entry_prefix}/admin/user">
    <input class="nv-input nv-input-sm" type="text" name="keyword" value="{$filters.keyword}" placeholder="{lang admin.ph_user_search}">
    <select class="nv-input nv-input-sm" name="group_id">
      <option value="">{lang admin.all_user_groups}</option>
      {foreach $group_list as $g}
      <option value="{$g.id}" {if $filters.group_id == $g.id}selected{/if}>{$g.name}</option>
      {/foreach}
    </select>
    <button class="nv-btn nv-btn-sm nv-btn-primary" type="submit">{lang admin.search}</button>
    <a class="nv-btn nv-btn-sm" href="{$entry_prefix}/admin/user">{lang admin.reset}</a>
  </form>

  <div class="nv-card-body nv-flush">
    {if $list}
    <table class="nv-table">
      <thead>
        <tr>
          <th class="nv-col-id">ID</th>
          <th>{lang admin.username}</th>
          <th>{lang admin.nickname}</th>
          <th>{lang admin.email}</th>
          <th style="width:110px">{lang admin.col_group}</th>
          <th style="width:80px">{lang admin.status}</th>
          <th style="width:120px">{lang admin.col_last_login}</th>
          <th class="nv-col-actions">{lang admin.actions}</th>
        </tr>
      </thead>
      <tbody>
        {foreach $list as $item}
        <tr>
          <td class="nv-col-id">{$item.id}</td>
          <td>{$item.username}</td>
          <td>{$item.nickname}</td>
          <td class="nv-muted">{$item.email}</td>
          <td>{$item.group_name}</td>
          <td>
            {if $item.status == 1}
            <span class="nv-badge nv-badge-success">{lang admin.status_normal}</span>
            {else}
            <span class="nv-badge nv-badge-danger">{lang admin.status_disabled}</span>
            {/if}
          </td>
          <td class="nv-muted">{$item.last_login_at|date=Y-m-d}</td>
          <td class="nv-col-actions">
            <button class="nv-btn nv-btn-xs nv-user-edit" type="button"
              data-id="{$item.id}"
              data-username="{$item.username}"
              data-nickname="{$item.nickname}"
              data-email="{$item.email}"
              data-group="{$item.group_id}"
              data-status="{$item.status}">{lang admin.edit}</button>
            {if $item.id != $admin.id}
            <form method="post" action="{$entry_prefix}/admin/user/delete" style="display:inline">
              <input type="hidden" name="_token" value="{$csrf}">
              <input type="hidden" name="id" value="{$item.id}">
              <button class="nv-btn nv-btn-xs nv-btn-danger nv-confirm" type="submit" data-message="{lang admin.confirm_delete_user}">{lang admin.delete}</button>
            </form>
            {else}
            <span class="nv-badge nv-badge-info">{lang admin.current_account}</span>
            {/if}
          </td>
        </tr>
        {/foreach}
      </tbody>
    </table>
    {else}
    <div class="nv-empty">
      <div class="nv-empty-title">{lang admin.empty_users}</div>
      <div>{lang admin.empty_users_hint}</div>
    </div>
    {/if}
  </div>

  {include admin/partials/pager}
</div>

{include admin/user/form}

<script>
(function () {
  var modal = document.getElementById('userModal');
  var form = document.getElementById('userForm');
  if (!modal || !form) { return; }

  var title = document.getElementById('userFormTitle');
  var pwHint = document.getElementById('user_password_hint');

  function field(name) { return form.querySelector('[name=' + name + ']'); }

  function setMode(mode) {
    field('mode').value = mode;
    if (pwHint) {
      pwHint.textContent = mode === 'edit'
        ? '{lang admin.pw_hint_edit}'
        : '{lang admin.pw_hint_create}';
    }
    field('password').required = (mode !== 'edit');
  }

  function openModal(mode, data) {
    form.reset();
    setMode(mode);
    if (mode === 'edit') {
      field('id').value = data.id;
      field('username').value = data.username || '';
      field('nickname').value = data.nickname || '';
      field('email').value = data.email || '';
      field('group_id').value = data.group || '3';
      field('status').value = String(data.status);
      title.textContent = '{lang admin.edit_user} · ' + (data.username || ('#' + data.id));
    } else {
      field('id').value = '0';
      // 显式指定默认用户组，避免"默认选中第一项 = 超级管理员"的提权事故
      field('group_id').value = '3';
      field('status').value = '1';
      title.textContent = '{lang admin.new_user}';
    }
    modal.hidden = false;
    document.body.style.overflow = 'hidden';
    setTimeout(function () { (mode === 'edit' ? field('nickname') : field('username')).focus(); }, 30);
  }

  function closeModal() {
    modal.hidden = true;
    document.body.style.overflow = '';
  }

  var addBtn = document.getElementById('userAddBtn');
  if (addBtn) {
    addBtn.addEventListener('click', function () { openModal('create', null); });
  }

  var buttons = document.querySelectorAll('.nv-user-edit');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
      openModal('edit', {
        id: this.getAttribute('data-id'),
        username: this.getAttribute('data-username'),
        nickname: this.getAttribute('data-nickname'),
        email: this.getAttribute('data-email'),
        group: this.getAttribute('data-group'),
        status: this.getAttribute('data-status')
      });
    });
  }

  document.addEventListener('click', function (ev) {
    var t = ev.target;
    if (t && t.closest && t.closest('[data-user-close]')) {
      ev.preventDefault();
      closeModal();
    }
  });

  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape' && !modal.hidden) { closeModal(); }
  });

  // 编辑提交前二次确认：明确告诉操作者要改的是哪个账号，
  // 避免"以为在新增、其实把现有账号改了"的误操作。
  form.addEventListener('submit', function () {
    if (field('mode').value === 'edit') {
      var who = field('username').value || ('#' + field('id').value);
      return window.confirm('{lang admin.confirm_edit_user}'.replace(':who', who));
    }
    return true;
  });
})();
</script>