{{define "content"}}
<div class="page">
  <header class="page-head">
    <div>
      <h1>套餐</h1>
      <p>新增套餐只需加一行配置，不会影响任何已有客户与订阅</p>
    </div>
    <div class="page-actions"><a class="btn btn-primary" href="/packages/new">＋ 新增套餐</a></div>
  </header>

  {{if .D.List}}
  <div class="table-wrap">
    <table class="table table-packages">
      <thead>
        <tr><th class="col-dot" scope="col"><span class="visually-hidden">颜色</span></th><th scope="col">名称</th><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><span class="dot big" style="background:{{.Color}}"></span></td>
          <td>
            <b>{{.Name}}</b>
            {{if .Tag}}<span class="tagchip">{{.Tag}}</span>{{end}}{{if .CalendarSeparate}}<span class="tagchip">独立日历</span>{{end}}
            {{if .Note}}<div class="muted small">{{.Note}}</div>{{end}}
          </td>
          <td>{{.UnitLabel}}</td>
          <td class="mono">{{.DefaultAmount}}{{if eq .Unit "day"}} 天{{else}} 次{{end}}</td>
          <td class="mono">{{if .HasPrice}}¥{{money .PriceCents}}{{else}}—{{end}}</td>
          <td class="mono">{{.ActiveCount}} / {{.SubCount}}</td>
          <td>{{if .Archived}}<span class="chip chip-closed">已归档</span>{{else}}<span class="chip chip-active">启用中</span>{{end}}</td>
          <td class="actions-cell">
            <a class="btn btn-soft btn-sm" href="/packages/{{.ID}}">详情/批量</a>
            <a class="btn btn-ghost btn-sm" href="/packages/{{.ID}}/edit">编辑</a>
            <form method="post" action="/packages/{{.ID}}/archive"{{if not .Archived}} data-confirm="归档后不能再新建该套餐的订阅，已有订阅不受影响。继续？"{{end}}>
              <button class="btn btn-ghost btn-sm">{{if .Archived}}恢复{{else}}归档{{end}}</button>
            </form>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="empty">
    <div class="empty-mark">票</div>
    <p>还没有套餐。先建「包月日常」这类常用套餐，之后客户开通就一键完成。</p>
    <a class="btn btn-primary" href="/packages/new">＋ 新增套餐</a>
  </div>
  {{end}}
</div>
{{end}}