{{define "content"}}
<div class="cal-page">
  <header class="cal-head">
    <div class="cal-title">
      <a class="btn btn-ghost btn-square" href="/calendar?y={{.D.PrevY}}&m={{.D.PrevM}}" aria-label="上个月">‹</a>
      <h1>{{.D.Title}}</h1>
      <a class="btn btn-ghost btn-square" href="/calendar?y={{.D.NextY}}&m={{.D.NextM}}" aria-label="下个月">›</a>
      <a class="btn btn-sm" href="/calendar">回到今天</a>
    </div>
    <div class="cal-stats">
      <span><em>{{.D.MonthDue}}</em>本月到期</span>
      <span><em>{{.D.MonthTasks}}</em>本月待打</span>
      <span><em>{{.D.MonthDone}}</em>已完成</span>
      <a class="btn btn-primary btn-sm" href="/customers/new">＋ 新建客户</a>
    </div>
  </header>

  {{if .D.NoPackages}}
  <div class="notice">还没有服务套餐，先去 <a href="/packages/new">新建套餐</a>，再给客户开通。</div>
  {{else if .D.NoCustomers}}
  <div class="notice">还没有客户，<a href="/customers/new">新建第一位客户</a>。</div>
  {{end}}

  <div class="cal-body">
    <div class="cal-grid" role="grid">
      <div class="cal-dow" role="row">
        {{range .D.Weekdays}}<span>{{.}}</span>{{end}}
      </div>
      {{range .D.Weeks}}
      <div class="cal-week" role="row">
        {{range .}}
        <a class="cal-cell heat-{{.Heat}}{{if not .InMonth}} out{{end}}{{if .IsToday}} today{{end}}{{if .IsSelected}} sel{{end}}{{if .IsWeekend}} weekend{{end}}{{if .DueCount}} has-due{{end}}"
           href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{.Date}}" role="gridcell">
          <div class="cell-top">
            <span class="dnum">{{.Day}}</span>
            {{if .DueCount}}<span class="due-badge"><em>到期</em>{{.DueCount}}</span>{{end}}
          </div>
          {{if .TaskCount}}
          <div class="cell-load">{{.DoneCount}}/{{.TaskCount}} 单</div>
          {{end}}
          <div class="cell-tickets">
            {{range .Tickets}}
            <span class="ticket{{if .Done}} done{{end}}{{if .Skipped}} skipped{{end}}" style="--tag:{{.Color}}"><b>{{.Tail}}</b><span class="tk-name">{{.Name}}</span><i>{{.Pkg}}</i></span>
            {{end}}
            {{if gt .More 0}}<span class="ticket more">+{{.More}}</span>{{end}}
          </div>
        </a>
        {{end}}
      </div>
      {{end}}
    </div>

    <aside class="drawer">
      <header class="drawer-head">
        <h2>{{.D.SelectedLabel}}</h2>
        <div class="drawer-tags">
          {{if .D.SelectedIsToday}}<span class="chip chip-active">今天</span>{{end}}
          {{if .D.SelectedIsPast}}<span class="chip chip-closed">已过去</span>{{end}}
          <span class="chip chip-plain">{{len .D.Tasks}} 待打</span>
        </div>
      </header>

      <section class="drawer-block">
        <h3>这天到期 <em>{{len .D.Due}}</em></h3>
        {{if .D.Due}}
        <ul class="due-list">
          {{range .D.Due}}
          <li>
            <a class="due-main" href="/customers/{{.CustomerID}}">
              <span class="ticket" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
              <span class="pkg">{{.PackageName}}</span>
              <span class="rem">{{.RemainShort}}</span>
            </a>
            <a class="btn btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&extend={{.ID}}#extend">追加</a>
          </li>
          {{end}}
        </ul>
        {{else}}<p class="muted">没有到期订阅。</p>{{end}}
      </section>

      <section class="drawer-block">
        <h3>当日待打 <em>{{len .D.Tasks}}</em></h3>
        {{if .D.Tasks}}
        <ul class="task-list">
          {{range .D.Tasks}}
          <li class="task{{if .Done}} done{{end}}{{if .Skipped}} skipped{{end}}">
            <div class="task-main">
              <a class="task-title" href="/customers/{{.CustomerID}}">
                <span class="ticket" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
                <span class="pkg">{{.PackageName}}</span>
              </a>
              <div class="task-meta">
                <span>{{.RemainText}}</span>
                {{if .DueText}}<span class="due due-{{.Eval.Level}}">{{.DueText}}</span>{{end}}
              </div>
              {{if .Note}}<div class="task-note">{{.Note}}{{if .Operator}} · {{.Operator}}{{end}}</div>{{end}}
            </div>
            <div class="task-actions">
              {{if or .Done .Skipped}}
              <span class="chip {{if .Done}}chip-active{{else}}chip-paused{{end}}">{{if .Done}}已完成{{else}}已跳过{{end}}</span>
              <form method="post" action="/checkins/{{.CheckinID}}/delete">
                <input type="hidden" name="back" value="{{$.D.Back}}">
                <button class="btn btn-sm btn-ghost">撤销</button>
              </form>
              {{else}}
              <form method="post" action="/subscriptions/{{.ID}}/checkin">
                <input type="hidden" name="date" value="{{$.D.Selected}}">
                <input type="hidden" name="status" value="done">
                <input type="hidden" name="back" value="{{$.D.Back}}">
                <button class="btn btn-sm btn-primary">完成</button>
              </form>
              <form method="post" action="/subscriptions/{{.ID}}/checkin">
                <input type="hidden" name="date" value="{{$.D.Selected}}">
                <input type="hidden" name="status" value="skipped">
                <input type="hidden" name="back" value="{{$.D.Back}}">
                <button class="btn btn-sm btn-ghost">跳过</button>
              </form>
              {{end}}
              <a class="btn btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&extend={{.ID}}#extend">追加</a>
            </div>
          </li>
          {{end}}
        </ul>
        {{else}}<p class="muted">这天没有待打任务。</p>{{end}}
      </section>

      {{if .D.Extend}}{{template "extend-panel" .D.Extend}}{{end}}

      <section class="drawer-block">
        <h3>近 7 天到期</h3>
        {{if .D.OtherDue}}
        <ul class="mini-due">
          {{range .D.OtherDue}}
          <li>
            <a href="/customers/{{.CustomerID}}"><span class="ticket" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span></a>
            <span class="muted">{{.PackageName}}</span>
            <span class="sm-date">{{.EndDate}}</span>
          </li>
          {{end}}
        </ul>
        {{else}}<p class="muted">7 天内没有其它到期。</p>{{end}}
      </section>
    </aside>
  </div>
</div>
{{end}}