{{define "content"}}
<div class="page">
  <header class="page-head">
    <div>
      <h1>订阅</h1>
      <p class="muted">共 {{.D.Total}} 条 · 剩余时长各自独立计算</p>
    </div>
  </header>

  <div class="tabs">
    <a href="/subscriptions?state=active" class="{{if eq .D.State "active"}}on{{end}}">进行中</a>
    <a href="/subscriptions?state=due7" class="{{if eq .D.State "due7"}}on{{end}}">7 天内到期</a>
    <a href="/subscriptions?state=due_today" class="{{if eq .D.State "due_today"}}on{{end}}">今天到期</a>
    <a href="/subscriptions?state=expired" class="{{if eq .D.State "expired"}}on{{end}}">已到期</a>
    <a href="/subscriptions?state=paused" class="{{if eq .D.State "paused"}}on{{end}}">暂停中</a>
    <a href="/subscriptions?state=closed" class="{{if eq .D.State "closed"}}on{{end}}">已结束</a>
    <a href="/subscriptions?state=all" class="{{if eq .D.State "all"}}on{{end}}">全部</a>
  </div>

  <form class="filterbar" method="get" action="/subscriptions">
    <input type="hidden" name="state" value="{{.D.State}}">
    <input type="search" name="q" value="{{.D.Q}}" placeholder="尾号 / 姓名 / 套餐" autocomplete="off">
    <select name="package_id">
      <option value="0">全部套餐</option>
      {{range .D.Packages}}
      <option value="{{.ID}}"{{if eq $.D.PackageID .ID}} selected{{end}}>{{.Name}}</option>
      {{end}}
    </select>
    <button class="btn" type="submit">筛选</button>
  </form>

  {{if .D.List}}
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr><th>客户</th><th>套餐</th><th>状态</th><th>剩余</th><th>时间</th><th>操作</th></tr>
      </thead>
      <tbody>
        {{range .D.List}}
        <tr>
          <td>
            <a class="tail" href="/customers/{{.CustomerID}}">{{.CustomerTail}}</a>
            <a class="name" href="/customers/{{.CustomerID}}">{{.CustomerName}}</a>
          </td>
          <td><span class="dot" style="background:{{.PackageColor}}"></span>{{.PackageName}}
            <span class="muted small">{{.UnitLabel}}</span></td>
          <td>{{template "state-chip" .}}</td>
          <td class="mono">{{.RemainText}}{{if .DueText}}<div class="due due-{{.Eval.Level}} small">{{.DueText}}</div>{{end}}</td>
          <td class="mono small">{{.PeriodText}}</td>
          <td class="actions-cell">
            {{if ne .Status "closed"}}
            <a class="btn btn-sm" href="/customers/{{.CustomerID}}?extend={{.ID}}#extend">追加</a>
            {{if eq .Status "active"}}
            <form method="post" action="/subscriptions/{{.ID}}/pause"><button class="btn btn-sm btn-ghost">暂停</button></form>
            {{else if eq .Status "paused"}}
            <form method="post" action="/subscriptions/{{.ID}}/resume"><button class="btn btn-sm">恢复</button></form>
            {{end}}
            {{else}}
            <form method="post" action="/subscriptions/{{.ID}}/reopen"><button class="btn btn-sm">重新启用</button></form>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{template "pager" .D.Pager}}
  {{else}}
  <div class="empty">
    <div class="empty-mark">票</div>
    <p>这个筛选下没有订阅。</p>
    <a class="btn" href="/subscriptions?state=all">看全部</a>
  </div>
  {{end}}
</div>
{{end}}