{{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" method="post" action="/clients/delete" data-confirm-delete>
    <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}}
    {{/* TODO(骨架): 行渲染。
         「状态」是算出来的：最近活动在 N 分钟内为在线，否则离线。
         数据库里没有 status 字段，存成字段会和真实情况不同步。
         名称可以人工改成好记的，改过之后客户端上报的名称不再覆盖它。 */}}
    {{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}}