{{define "state-chip"}}<span class="chip chip-{{.StateClass}}">{{.StateLabel}}</span>{{end}}

{{define "pager"}}
{{if gt .Pages 1}}
<nav class="pager">
  {{if .Prev}}<a class="btn btn-soft btn-sm" href="{{.Prev}}">← 上一页</a>{{else}}<span class="btn btn-soft btn-sm disabled">← 上一页</span>{{end}}
  <span class="pager-info">{{.Page}} / {{.Pages}} 页 · 共 {{.Total}} 条</span>
  {{if .Next}}<a class="btn btn-soft btn-sm" href="{{.Next}}">下一页 →</a>{{else}}<span class="btn btn-soft btn-sm disabled">下一页 →</span>{{end}}
</nav>
{{end}}
{{end}}

{{define "empty"}}
<div class="empty">
  <div class="empty-mark">票</div>
  <p>{{.Text}}</p>
  {{if .Action}}<a class="btn btn-primary" href="{{.Action}}">{{.ActionText}}</a>{{end}}
</div>
{{end}}

{{define "sub-card"}}
<article class="subcard{{if eq .Status "closed"}} is-closed{{end}}" id="sub-{{.ID}}" style="--tag:{{.PackageColor}}">
  <div class="subcard-head">
    <span class="tag"></span>
    <h3>{{.PackageName}}</h3>
    {{template "state-chip" .}}
    <span class="unit">{{.UnitLabel}}</span>
  </div>
  <div class="subcard-body">
    <div class="subcard-big">{{.RemainText}}</div>
    <div class="subcard-meta">{{.PeriodText}}</div>
    {{if .DueText}}<div class="due due-{{.Eval.Level}}">{{.DueText}}</div>{{end}}
    <div class="bar"><i style="width:{{.Progress}}%"></i></div>
  </div>
  <div class="subcard-foot">
    {{if ne .Status "closed"}}
      {{if .CanCheckinToday}}
      <form method="post" action="/subscriptions/{{.ID}}/checkin">
        <input type="hidden" name="date" value="{{.Today}}">
        <input type="hidden" name="status" value="done">
        <button class="btn btn-primary btn-sm">今日打卡</button>
      </form>
      {{end}}
      <a class="btn btn-soft btn-sm" href="?extend={{.ID}}#extend">追加时长</a>
      {{if eq .Status "active"}}
      <form method="post" action="/subscriptions/{{.ID}}/pause" data-confirm="暂停后剩余时长冻结，确认暂停？">
        <button class="btn btn-soft btn-sm">暂停</button>
      </form>
      {{else if eq .Status "paused"}}
      <form method="post" action="/subscriptions/{{.ID}}/resume">
        <button class="btn btn-soft btn-sm">恢复</button>
      </form>
      {{end}}
      <form method="post" action="/subscriptions/{{.ID}}/close" data-confirm="结束后该订阅不再出现在待打清单，确认结束？">
        <button class="btn btn-ghost btn-sm">结束</button>
      </form>
    {{else}}
      <form method="post" action="/subscriptions/{{.ID}}/reopen">
        <button class="btn btn-soft btn-sm">重新启用</button>
      </form>
      <form method="post" action="/subscriptions/{{.ID}}/delete" data-confirm="将永久删除该订阅及其打卡/追加记录，无法恢复。确定删除？">
        <input type="hidden" name="confirm" value="delete">
        <button class="btn btn-ghost btn-sm text-danger">删除</button>
      </form>
    {{end}}
  </div>
</article>
{{end}}

{{define "extend-panel"}}
<section class="extend" id="extend" style="--tag:{{.Sub.PackageColor}}">
  <header class="extend-head">
    <div>
      <h3>给 {{.Sub.CustomerTail}} {{.Sub.CustomerName}} 追加时长</h3>
      <p>{{.Sub.PackageName}} · {{.View.RemainText}} · {{.View.PeriodText}}</p>
    </div>
    <a class="extend-close" href="{{.Back}}" aria-label="关闭">×</a>
  </header>
  <form method="post" action="/subscriptions/{{.Sub.ID}}/extend" class="extend-form"
        data-extend data-base="{{.Base}}" data-old-end="{{.OldEnd}}" data-today="{{.Today}}">
    <input type="hidden" name="back" value="{{.Back}}">
    <input type="hidden" name="new_end_date" value="{{.Suggested}}" data-end-input>
    <div class="extend-preview">
      <div><span>计算起点</span><b data-base-label>{{.Base}}</b></div>
      <div><span>原结束日</span><b>{{.OldEnd}}</b></div>
      <div><span>新结束日</span><b data-end-label>{{.Suggested}}</b></div>
      <div class="add"><span>本次追加</span><b><i data-days>{{.SuggestedDays}}</i> 天</b></div>
      <div><span>追加后剩余</span><b><i data-remain>—</i> 天</b></div>
    </div>
    <p class="extend-hint">在下面的日历上点选新的终止日期；未到期的订阅从原结束日次日起算，已到期的从今天起算。</p>
    <div class="minis">
      {{range .Months}}
      <div class="minimonth">
        <div class="minimonth-title">{{.Title}}</div>
        <div class="minimonth-grid">
          <span class="dow">一</span><span class="dow">二</span><span class="dow">三</span><span class="dow">四</span><span class="dow">五</span><span class="dow">六</span><span class="dow">日</span>
          {{range .Weeks}}{{range .}}
          <button type="button" class="miniday{{if not .InMonth}} out{{end}}{{if .IsOldEnd}} old{{end}}{{if .IsToday}} today{{end}}" data-date="{{.Date}}"{{if .Disabled}} disabled{{end}}>{{.Day}}</button>
          {{end}}{{end}}
        </div>
      </div>
      {{end}}
    </div>
    <label class="field"><span>备注</span>
      <input type="text" name="note" maxlength="120" placeholder="例如：微信转账 30 天 / 补送 3 天">
    </label>
    <div class="actions">
      <button type="submit" class="btn btn-primary">确认追加</button>
      <a class="btn btn-soft" href="{{.Back}}">取消</a>
    </div>
  </form>
</section>
{{end}}