{{define "content"}}
<div class="page">
  <header class="page-head">
    <div>
      <h1>客户</h1>
      <p>共 {{.D.Total}} 位 · 输入手机尾号可快速定位</p>
    </div>
    <div class="page-actions">
      {{if .D.ShowArchived}}
      <a class="btn btn-ghost" href="/customers?q={{.D.Q}}">隐藏已停用</a>
      {{else}}
      <a class="btn btn-ghost" href="/customers?q={{.D.Q}}&archived=1">显示已停用{{if gt .D.ArchivedCount 0}} ({{.D.ArchivedCount}}){{end}}</a>
      {{end}}
      <a class="btn btn-primary" href="/customers/new">＋ 新建客户</a>
    </div>
  </header>

  <form class="filterbar" method="get" action="/customers">
    <input type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off" aria-label="搜索客户">
    <button class="btn btn-soft" type="submit">搜索</button>
    {{if .D.Q}}<a class="btn btn-ghost" href="/customers">清除</a>{{end}}
  </form>

  {{if .D.List}}
  <div class="table-wrap">
    <table class="table table-customers">
      <thead>
        <tr><th scope="col">尾号</th><th scope="col">客户</th><th scope="col">联系方式</th><th scope="col">订阅与剩余</th><th scope="col">标签</th><th scope="col"><span class="visually-hidden">操作</span></th></tr>
      </thead>
      <tbody>
        {{range .D.List}}
        <tr{{if .Archived}} class="archived"{{end}}>
          <td><a class="tail" href="/customers/{{.ID}}">{{.Tail}}</a></td>
          <td>
            <a class="name" href="/customers/{{.ID}}">{{.Name}}</a>{{if .Archived}} <span class="chip chip-closed">已停用</span>{{end}}
            {{if .GameName}}<div class="muted small">{{.GameName}}{{if .GameServer}} · {{.GameServer}}{{end}}</div>{{end}}
          </td>
          <td class="muted small">{{if .Contact}}{{.Contact}}{{else}}—{{end}}</td>
          <td><span class="summary due-{{.Level}}">{{.Summary}}</span></td>
          <td>{{range .TagList}}<span class="tagchip">{{.}}</span>{{end}}</td>
          <td class="right"><a class="btn btn-soft btn-sm" href="/customers/{{.ID}}">详情</a></td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{template "pager" .D.Pager}}
  {{else}}
  <div class="empty">
    <div class="empty-mark">票</div>
    {{if .D.Q}}
    <p>没有匹配「{{.D.Q}}」的客户。</p>
    <a class="btn btn-soft" href="/customers">看全部客户</a>
    {{else}}
    <p>还没有客户。先建一位，再给他开套餐。</p>
    <a class="btn btn-primary" href="/customers/new">＋ 新建客户</a>
    {{end}}
  </div>
  {{end}}
</div>
{{end}}