{{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>

  <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>
</div>

<div class="table-wrap">
<table>
  <thead>
    <tr>
      <th class="col-check"><input type="checkbox" data-check-all></th>
      <th>名称</th>
      <th>序列号</th>
      <th>状态</th>
      <th>最近活动</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr>
      <td class="col-check">
        <input type="checkbox" name="ids" value="{{.ClientID}}" form="client-delete-form">
      </td>
      <td>{{.Name}}</td>
      <td>{{.ClientID}}</td>
      {{/* 状态是算出来的，不是数据库字段。必须有文字，不能只靠颜色 */}}
      <td>{{.Status}}</td>
      <td>{{.LastSeenAt}}</td>
      <td>{{.UpdatedAt}}</td>
    </tr>
    {{else}}
    <tr class="empty">
      <td colspan="6">
        还没有客户端。<br>
        <small>客户端第一次调用领取接口时会自动登记到这里，不需要手工添加。</small>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

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

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