{{define "content"}}
<div class="scr">
  <header class="scr-head">
    <div class="scr-brand"><span class="mark">代</span>代打台<em>控制台</em></div>
    <div class="scr-clock"><b data-clock>--:--:--</b><span data-date></span></div>
    <div class="scr-links">每 {{.D.Refresh}} 秒刷新 · <a href="/calendar">进入工作台</a></div>
  </header>

  <section class="scr-kpis">
    <div class="kpi">
      <span>客户</span><b>{{.D.Stats.Customers}}</b><i>位</i>
    </div>
    <div class="kpi">
      <span>活跃订阅</span><b>{{.D.Stats.ActiveSubs}}</b><i>条</i>
    </div>
    <div class="kpi kpi-hot">
      <span>今日到期</span><b>{{.D.Stats.DueToday}}</b><i>条</i>
    </div>
    <div class="kpi kpi-warm">
      <span>7 天内到期</span><b>{{.D.Stats.Due7}}</b><i>条</i>
    </div>
  </section>

  <section class="scr-main">
    <div class="panel panel-cal">
      <div class="panel-head">
        <h2>到期热力</h2>
        <span>{{.D.MonthTitle}} · 本月 {{.D.Stats.MonthDue}} 条到期</span>
      </div>
      <div class="heat-grid">
        <div class="heat-dow">{{range .D.Weekdays}}<span>{{.}}</span>{{end}}</div>
        {{range .D.Weeks}}
        <div class="heat-row">
          {{range .}}
          <div class="heat-cell h{{.Heat}}{{if not .InMonth}} out{{end}}{{if .IsToday}} today{{end}}">
            <span>{{.Day}}</span>
            {{if .Due}}<b>{{.Due}}</b>{{end}}
          </div>
          {{end}}
        </div>
        {{end}}
      </div>
      <div class="heat-legend">
        <span>到期数</span><i class="h0"></i><i class="h1"></i><i class="h2"></i><i class="h3"></i><i class="h4"></i>
      </div>
    </div>

    <div class="panel panel-top">
      <div class="panel-head"><h2>即将到期 TOP 10</h2><span>按剩余量排序</span></div>
      {{if .D.Top}}
      <ol class="top-list">
        {{range $i, $s := .D.Top}}
        <li class="top-item lv-{{$s.Eval.Level}}">
          <span class="rank">{{add $i 1}}</span>
          <span class="top-tail">{{$s.CustomerTail}}</span>
          <span class="top-name">{{$s.CustomerName}}</span>
          <span class="top-pkg" style="--tag:{{$s.PackageColor}}">{{$s.PackageName}}</span>
          <span class="top-remain">{{$s.RemainShort}}</span>
          <span class="top-bar"><i style="width:{{$s.Progress}}%"></i></span>
        </li>
        {{end}}
      </ol>
      {{else}}
      <p class="scr-empty">暂无订阅数据</p>
      {{end}}
    </div>
  </section>

  <section class="scr-bottom">
    <div class="panel">
      <div class="panel-head">
        <h2>今日待打</h2>
        <span>{{.D.TodayDone}} / {{.D.TodayTasks}} 已完成</span>
      </div>
      {{if .D.TodayList}}
      <ul class="today-list">
        {{range .D.TodayList}}
        <li class="lv-{{.Eval.Level}}">
          <span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
          <span class="pkg">{{.PackageName}}</span>
          <span class="rem">{{.RemainShort}}</span>
        </li>
        {{end}}
      </ul>
      {{else}}
      <p class="scr-empty">今天没有待打任务</p>
      {{end}}
    </div>

    <div class="panel">
      <div class="panel-head"><h2>最近追加</h2><span>服务时长变更流水</span></div>
      {{if .D.Recent}}
      <ul class="recent-list">
        {{range .D.Recent}}
        <li>
          <span class="time mono">{{.CreatedAt}}</span>
          <span class="who"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
          <span class="pkg">{{.PackageName}}</span>
          {{if gt .DaysAdded 0}}<em class="plus">+{{.DaysAdded}} 天</em>{{end}}
          {{if gt .CountAdded 0}}<em class="plus">+{{.CountAdded}} 次</em>{{end}}
          <span class="op">{{.OperatorName}}</span>
        </li>
        {{end}}
      </ul>
      {{else}}
      <p class="scr-empty">还没有追加记录</p>
      {{end}}
    </div>
  </section>

  <footer class="scr-foot">代打台 v{{.D.Version}} · 数据每 {{.D.Refresh}} 秒自动刷新 · 按 F 进入全屏</footer>
</div>
{{end}}