{{define "content"}}
<div class="page">
  <header class="page-head">
    <div>
      <h1>{{.D.Package.Name}}</h1>
      <p>
        {{if eq .D.Package.Unit "day"}}按日{{else}}按次{{end}} ·
        默认 {{.D.Package.DefaultAmount}}{{if eq .D.Package.Unit "day"}} 天{{else}} 次{{end}} ·
        {{if .D.Package.Tag}}标签「{{.D.Package.Tag}}」 · {{end}}{{if .D.Package.CalendarSeparate}}独立日历 · {{end}}
        {{if .D.Package.Archived}}<span class="chip chip-closed">已归档</span>{{end}}
      </p>
    </div>
    <div class="page-actions">
      <a class="btn btn-ghost" href="/packages">返回套餐</a>
      <a class="btn btn-soft" href="/packages/{{.D.Package.ID}}/edit">编辑套餐</a>
    </div>
  </header>

  {{if .D.Package.Note}}<div class="notice note">{{.D.Package.Note}}</div>{{end}}

  <form class="filterbar" method="get" action="/packages/{{.D.Package.ID}}">
    <input type="search" name="q" value="{{.D.Q}}" placeholder="按尾号 / 姓名筛选客户" aria-label="筛选客户">
    <button class="btn btn-soft" type="submit">筛选</button>
    {{if .D.Q}}<a class="btn btn-ghost" href="/packages/{{.D.Package.ID}}">清除</a>{{end}}
    <span class="muted small">共 {{len .D.Customers}} 位客户</span>
  </form>

  <form method="post" action="/packages/{{.D.Package.ID}}/subscribe" class="section card">
    <h2>批量开通</h2>
    <p class="muted small">勾选客户后一次开通；已经是该套餐的客户会自动跳过。开始日期默认今天，时长/次数默认取套餐设置，可改。</p>

    <div class="grid-auto">
      <label class="field"><span>开始日期</span>
        <input type="date" name="start_date" value="{{.D.Today}}" required>
      </label>
      {{if eq .D.Package.Unit "day"}}
      <label class="field"><span>天数</span>
        <input type="number" name="days" min="1" max="3650" value="{{.D.Package.DefaultAmount}}">
      </label>
      {{else}}
      <label class="field"><span>次数</span>
        <input type="number" name="total_count" min="1" max="10000" value="{{.D.Package.DefaultAmount}}">
      </label>
      <label class="field"><span>到期日（可选）</span>
        <input type="date" name="end_date">
      </label>
      {{end}}
    </div>

    <div class="table-wrap">
      <table class="table tight">
        <thead>
          <tr>
            <th style="width:44px"><input type="checkbox" data-select-all aria-label="全选可开通客户"></th>
            <th scope="col">尾号</th><th scope="col">客户</th><th scope="col">当前订阅</th><th scope="col">状态</th>
          </tr>
        </thead>
        <tbody>
          {{range .D.Customers}}
          {{$subscribed := index $.D.Subscribed .ID}}
          <tr{{if $subscribed}} class="archived"{{end}}>
            <td>{{if $subscribed}}<span class="muted small" title="已是此套餐">—</span>{{else}}<input type="checkbox" name="customer_ids" value="{{.ID}}" aria-label="选择 {{.Name}}" checked>{{end}}</td>
            <td><a class="tail" href="/customers/{{.ID}}">{{.Tail}}</a></td>
            <td>{{.Name}}{{if .AssigneeName}} <span class="asg"><i style="background:{{.AssigneeColor}}"></i>{{.AssigneeName}}</span>{{end}}</td>
            <td class="summary due-{{.Level}}">{{.Summary}}</td>
            <td>{{if $subscribed}}<span class="chip chip-closed">已是此套餐</span>{{else}}<span class="chip chip-plain">可开通</span>{{end}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>

    <div class="actions">
      <button class="btn btn-primary" type="submit">开通选中的客户</button>
      <span class="muted small">勾选框默认已按「未订阅」预选，可自行取消</span>
    </div>
  </form>
</div>
{{end}}