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

<div class="toolbar">
  <form class="inline grow" method="get" action="/clients">
    <label for="q">名称</label>
    <input id="q" type="text" name="name" value="{{.Keyword}}" placeholder="客户端名称">
    <button type="submit">搜索</button>
  </form>

  {{if .CurrentUser.IsAdmin}}<form class="inline" id="client-delete-form" method="post" action="/clients/delete" data-confirm-delete>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit" class="danger" data-need-checked>删除</button>
  </form>{{end}}
</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>
      {{if .CurrentUser.IsAdmin}}<th class="col-check"><input type="checkbox" data-check-all aria-label="全选客户端"></th>{{end}}
      <th>名称</th>
      <th>序列号</th>
      <th>状态</th>
      <th>当前负责人</th>
      <th>最近活动</th>
      <th>更新时间</th>
      {{if .CurrentUser.IsAdmin}}<th>操作</th>{{end}}
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr>
      {{if $.CurrentUser.IsAdmin}}<td class="col-check">
        <input type="checkbox" name="ids" value="{{.ClientID}}" form="client-delete-form">
      </td>{{end}}
      <td>{{.Name}}</td>
      <td>{{.ClientID}}</td>
      {{/* 状态是算出来的，不是数据库字段。必须有文字，不能只靠颜色 */}}
      <td>{{.Status}}</td>
      <td>{{if .AssignedUsername}}{{.AssignedUsername}}{{else}}<span class="hint">未绑定</span>{{end}}</td>
      <td>{{.LastSeenAt}}</td>
      <td>{{.UpdatedAt}}</td>
      {{if $.CurrentUser.IsAdmin}}<td>
        <div class="row-actions">
          <button type="button" data-modal-open="assign-client-modal"
                  data-assign-client-id="{{.ClientID}}" data-assign-client-name="{{.Name}}"
                  data-assign-user-id="{{.AssignedUserID}}" data-assign-username="{{.AssignedUsername}}">
            {{if .AssignedUserID}}转交{{else}}绑定{{end}}
          </button>
          {{if .AssignedUserID}}<form method="post" action="/clients/unassign"
                data-confirm-submit="确定解绑客户端“{{.Name}}”吗？采购员“{{.AssignedUsername}}”将立即看不到它；归属历史和既有任务会保留。">
            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
            <input type="hidden" name="client_id" value="{{.ClientID}}">
            <button type="submit" class="danger">解绑</button>
          </form>{{end}}
        </div>
      </td>{{end}}
    </tr>
    {{else}}
    <tr class="empty">
      <td colspan="{{if $.CurrentUser.IsAdmin}}8{{else}}6{{end}}">
        {{if $.CurrentUser.IsAdmin}}还没有客户端。<br>
        <small>客户端第一次调用领取接口时会自动登记到这里，不需要手工添加。</small>
        {{else}}当前没有绑定给你的客户端。<br><small>如需使用客户端，请联系管理员绑定。</small>{{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

<p class="hint">
  客户端执行长任务期间不会调领取接口，可能显示为「离线」，属正常现象——
  本项目有意不做心跳，见 docs/admin/04-client-api.md §3。
</p>

{{if .CurrentUser.IsAdmin}}
<div class="modal-backdrop" id="assign-client-modal" hidden>
  <div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="assign-client-title">
    <div class="modal-head">
      <h2 id="assign-client-title">绑定客户端</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <form method="post" action="/clients/assign">
      <div class="modal-body form-stack">
        <p>客户端：<strong data-assign-client-label></strong></p>
        <div class="field">
          <label for="assign-user-id">负责人</label>
          <select id="assign-user-id" name="user_id" required autofocus {{if not .Purchasers}}disabled{{end}}>
            <option value="">请选择采购员</option>
            {{range .Purchasers}}<option value="{{.UserID}}">{{.Username}}</option>{{end}}
          </select>
          {{if not .Purchasers}}<small class="missing">没有启用中的采购员，请先到用户管理创建或启用账号。</small>{{end}}
        </div>
        <p class="hint" data-assignment-note>绑定只改变负责人和网页可见范围，不影响 Client 接口或既有任务。</p>
        <input type="hidden" name="client_id" data-assign-client-id-input>
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      </div>
      <div class="modal-foot">
        <button type="button" data-modal-close>取消</button>
        <button type="submit" class="primary" {{if not .Purchasers}}disabled{{end}}>保存绑定</button>
      </div>
    </form>
  </div>
</div>
{{end}}

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