{{define "content"}}
<header class="page-head">
  <h1>หน้าภาพรวม</h1>
  <p class="lede">ความคืบหน้างานของทีมในโครงการ TNSU EMS หน้านี้อัปเดตเองเมื่อข้อมูลงานหรือบันทึกของ Agent เปลี่ยน</p>
</header>

<section class="stats" aria-label="สรุปตัวเลข">
  <a class="stat" href="/milestones">
    <h2 class="stat-label">Task</h2>
    <p class="stat-num">{{.Counts.Total}}</p>
    <div class="mix" aria-hidden="true">
      {{if .Counts.Reviewed}}<span class="mix-reviewed" style="flex:{{.Counts.Reviewed}}"></span>{{end}}
      {{if .Counts.Done}}<span class="mix-done" style="flex:{{.Counts.Done}}"></span>{{end}}
      {{if .Counts.InProgress}}<span class="mix-in_progress" style="flex:{{.Counts.InProgress}}"></span>{{end}}
      {{if .Counts.Review}}<span class="mix-review" style="flex:{{.Counts.Review}}"></span>{{end}}
      {{if .Counts.Todo}}<span class="mix-todo" style="flex:{{.Counts.Todo}}"></span>{{end}}
    </div>
    <dl class="stat-break">
      <div><dt>Reviewed</dt><dd>{{.Counts.Reviewed}}</dd></div>
      <div><dt>Done</dt><dd>{{.Counts.Done}}</dd></div>
      <div><dt>In Progress</dt><dd>{{.Counts.InProgress}}</dd></div>
      <div><dt>Wait for review</dt><dd>{{.Counts.Review}}</dd></div>
      <div><dt>Todo</dt><dd>{{.Counts.Todo}}</dd></div>
    </dl>
  </a>
  <a class="stat" href="/reviews">
    <h2 class="stat-label">Review</h2>
    <p class="stat-num">{{len .Reviews}}</p>
    {{if .Reviews}}
    <p class="stat-note">งานรอรีวิว ชิ้นที่รอนานที่สุด: {{(index .Reviews 0).Title}}</p>
    {{else}}
    <p class="stat-note">ไม่มีงานค้างรีวิว</p>
    {{end}}
  </a>
  <a class="stat" href="/checkpoints">
    <h2 class="stat-label">Checkpoint</h2>
    <p class="stat-num">{{len .Checkpoints}}</p>
    {{with .LastCheckpoint}}
    <p class="stat-note">ล่าสุด {{ago .When}}: {{.Title}}</p>
    {{else}}
    <p class="stat-note">ยังไม่มีบันทึกสรุปจาก Agent</p>
    {{end}}
  </a>
</section>

<section class="block" aria-labelledby="h-current">
  <div class="block-head"><h2 id="h-current">Current Task</h2></div>
  {{if .Current}}
  <div class="current">
    {{range .Current}}
    <article class="task-now">
      <header class="task-now-head">
        <p class="task-now-ms">{{template "where" .Where}} <span class="tid">{{.ID}}</span></p>
        <h3><a href="{{taskHref .ID}}">{{.Title}}</a></h3>
        <p class="task-now-meta">{{if .Owner}}ผู้รับผิดชอบ {{.Owner}}{{end}}{{if .Started}} เริ่ม {{thaiDate .Started}}{{end}}</p>
        {{if .Summary}}<p class="task-now-sum">{{.Summary}}</p>{{end}}
      </header>
      <div class="meter" role="img" aria-label="ทำแล้ว {{len .Done}} จาก {{add (len .Done) (len .Left)}} ขั้น">
        <span style="width:{{.Percent}}%"></span>
      </div>
      <p class="meter-text">ทำแล้ว {{len .Done}} จาก {{add (len .Done) (len .Left)}} ขั้น{{if .Left}} เหลืออีก {{len .Left}} ขั้นก่อนปิด Task{{else}} พร้อมปิด Task{{end}}</p>
      <div class="steps">
        <div>
          <h4>ส่วนที่คืบหน้าแล้ว</h4>
          {{if .Done}}<ul class="step-list">{{range .Done}}<li class="step-done">{{.Text}}</li>{{end}}</ul>{{else}}<p class="muted">ยังไม่มีขั้นที่เสร็จ</p>{{end}}
        </div>
        <div>
          <h4>ส่วนที่ยังเหลือก่อนปิด Task</h4>
          {{if .Left}}<ul class="step-list">{{range .Left}}<li class="step-left">{{.Text}}</li>{{end}}</ul>{{else}}<p class="muted">ไม่มีขั้นที่เหลือ</p>{{end}}
        </div>
      </div>
    </article>
    {{end}}
  </div>
  {{else}}
  <p class="empty">ไม่มีงานที่กำลังทำ ตั้ง <code>"status": "in_progress"</code> ให้ task ที่เริ่มทำ แล้วงานจะขึ้นที่นี่</p>
  {{end}}
</section>

<section class="block" aria-labelledby="h-lanes">
  <div class="block-head">
    <h2 id="h-lanes">Milestone ทั้งหมด</h2>
    {{template "legend"}}
  </div>
  {{if .Milestones}}
  <div class="lanes">{{range .Milestones}}{{template "lane" .}}{{end}}</div>
  {{else}}
  <p class="empty">ยังไม่มี milestone เพิ่มได้ใน <code>tracker/data/milestones.json</code></p>
  {{end}}
</section>
{{end}}