{{define "user/list"}}
{{template "header" .}}

<div class="toolbar">
  <form class="inline grow" method="get" action="/users">
    <input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
    <label for="user-q">用户名</label>
    <input id="user-q" class="search-narrow" type="text" name="q"
           value="{{.Keyword}}" placeholder="搜索用户名">
    <label for="user-status">状态</label>
    <select id="user-status" name="status">
      <option value="">全部</option>
      <option value="active" {{if eq .StatusFilter "active"}}selected{{end}}>启用</option>
      <option value="disabled" {{if eq .StatusFilter "disabled"}}selected{{end}}>禁用</option>
    </select>
    <a class="button-link" href="/users?page_size={{.CurrentPageSize}}">清除</a>
    <button type="submit">搜索</button>
  </form>
  <button type="button" class="primary" data-modal-open="create-user-modal">新增采购员</button>
</div>

{{if .Message}}<p class="notice" role="status">{{.Message}}</p>{{end}}
{{if .Error}}<p class="missing" role="alert">{{.Error}}</p>{{end}}

<div class="table-wrap">
<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>角色</th>
      <th>状态</th>
      <th>最后登录</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr>
      <td>{{.Username}}</td>
      <td>{{.RoleLabel}}</td>
      <td><span class="status-pill {{if .IsActive}}status-active{{else}}status-disabled{{end}}">{{.StatusLabel}}</span></td>
      <td>{{if .LastLoginAt}}{{.LastLoginAt}}{{else}}从未登录{{end}}</td>
      <td>{{.CreatedAt}}</td>
      <td>
        <div class="row-actions">
          {{if .IsAdmin}}
          <button type="button" disabled title="不能禁用最后一个有效管理员">唯一管理员</button>
          {{else}}
          <form method="post" action="/users/status"
                data-confirm-submit="确定{{if .IsActive}}禁用{{else}}启用{{end}}采购员“{{.Username}}”吗？{{if .IsActive}}该账号的现有登录会立即失效。{{end}}">
            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
            <input type="hidden" name="user_id" value="{{.UserID}}">
            <input type="hidden" name="status" value="{{if .IsActive}}disabled{{else}}active{{end}}">
            <input type="hidden" name="q" value="{{$.Keyword}}">
            <input type="hidden" name="list_status" value="{{$.StatusFilter}}">
            <input type="hidden" name="page" value="{{$.CurrentPage}}">
            <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">
            <button type="submit" {{if .IsActive}}class="danger"{{end}}>{{if .IsActive}}禁用{{else}}启用{{end}}</button>
          </form>
          <button type="button" data-modal-open="reset-password-modal"
                  data-reset-user-id="{{.UserID}}" data-reset-username="{{.Username}}">重置密码</button>
          {{end}}
        </div>
      </td>
    </tr>
    {{else}}
    <tr class="empty">
      <td colspan="6">
        {{if .Keyword}}没有匹配的用户。<a href="/users?page_size={{.CurrentPageSize}}">清除搜索条件</a>
        {{else}}还没有用户。{{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

<div class="modal-backdrop" id="create-user-modal" {{if not .NeedCreate}}hidden{{end}}>
  <div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="create-user-title">
    <div class="modal-head">
      <h2 id="create-user-title">新增采购员</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <form method="post" action="/users/create">
      <div class="modal-body form-stack">
        <p class="hint">新账号固定为采购员，可使用业务页面，但不能进入用户管理。</p>
        <div class="field">
          <label for="new-username">用户名</label>
          <input id="new-username" type="text" name="username" value="{{.CreateUsername}}" maxlength="64"
                 required autocomplete="off" autofocus>
        </div>
        <div class="field">
          <label for="new-password">初始密码</label>
          <input id="new-password" type="password" name="password" minlength="6"
                 maxlength="72" required autocomplete="new-password">
          <small>至少 6 个字符。密码不会显示在列表或日志中。</small>
        </div>
        <div class="field">
          <label for="new-password-confirm">确认密码</label>
          <input id="new-password-confirm" type="password" name="password_confirm"
                 minlength="6" maxlength="72" required autocomplete="new-password">
        </div>
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
        <input type="hidden" name="q" value="{{.Keyword}}">
        <input type="hidden" name="list_status" value="{{.StatusFilter}}">
        <input type="hidden" name="page" value="{{.CurrentPage}}">
        <input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
      </div>
      <div class="modal-foot">
        <button type="button" data-modal-close>取消</button>
        <button type="submit" class="primary">创建采购员</button>
      </div>
    </form>
  </div>
</div>

<div class="modal-backdrop" id="reset-password-modal" hidden>
  <div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="reset-password-title">
    <div class="modal-head">
      <h2 id="reset-password-title">重置采购员密码</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <form method="post" action="/users/reset-password"
          data-confirm-submit="确定重置这个采购员的密码吗？现有登录会立即失效。">
      <div class="modal-body form-stack">
        <p>账号：<strong data-reset-username-label></strong></p>
        <div class="field">
          <label for="reset-password">新密码</label>
          <input id="reset-password" type="password" name="password" minlength="6"
                 maxlength="72" required autocomplete="new-password" autofocus>
          <small>至少 6 个字符。重置成功后原有登录会立即失效。</small>
        </div>
        <div class="field">
          <label for="reset-password-confirm">确认新密码</label>
          <input id="reset-password-confirm" type="password" name="password_confirm"
                 minlength="6" maxlength="72" required autocomplete="new-password">
        </div>
        <input type="hidden" name="user_id" data-reset-user-id-input>
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
        <input type="hidden" name="q" value="{{.Keyword}}">
        <input type="hidden" name="list_status" value="{{.StatusFilter}}">
        <input type="hidden" name="page" value="{{.CurrentPage}}">
        <input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
      </div>
      <div class="modal-foot">
        <button type="button" data-modal-close>取消</button>
        <button type="submit" class="danger">重置密码</button>
      </div>
    </form>
  </div>
</div>

{{template "footer" .}}
{{end}}