{{define "content"}}{{with .Timeline}}
<header class="page-head">
  <h1>Timeline</h1>
  <p class="lede">ช่วงเวลาของงานตาม Milestone › Epic › Task แถบทึบคือเวลาที่ทำจริง กรอบเส้นประคือแผน (<code>start</code> ถึง <code>due</code>) เส้นสีทองคือตอนนี้</p>
</header>

<div class="tl-toolbar">
  <nav class="view-tabs" aria-label="ระดับเวลา">
    {{range .Scales}}<a href="/timeline?scale={{.Name}}"{{if eq .Name $.Timeline.Scale.Name}} aria-current="page"{{end}}>{{.Label}}</a>{{end}}
  </nav>
  <div class="tl-actions">
    <button type="button" class="tl-btn" data-tl-today>ไปที่ตอนนี้</button>
    <button type="button" class="tl-btn" data-tl-expand>ขยายทั้งหมด</button>
    <button type="button" class="tl-btn" data-tl-collapse>ย่อทั้งหมด</button>
  </div>
  {{template "legend"}}
</div>
{{if .Clipped}}<p class="tl-note">มุมมองนี้แสดงได้สูงสุด {{.Scale.Max}} {{.Scale.Label}} จึงแสดงช่วงรอบ ๆ ตอนนี้ เปลี่ยนเป็นมุมมองที่กว้างกว่าเพื่อดูทั้งหมด</p>{{end}}

<div class="tl" id="timeline" data-keep-scroll data-now="{{.Now}}" style="--tl-min:{{.Width}}px">
  <div class="tl-head">
    <div class="tl-corner">Milestone › Epic › Task
      <span class="tl-split" role="separator" aria-orientation="vertical" aria-label="ปรับความกว้างช่องรายละเอียด (ลากหรือกดลูกศรซ้ายขวา)" tabindex="0" data-tl-split></span>
    </div>
    <div class="tl-axis">
      <div class="tl-major">{{range .Major}}<span style="left:{{.Left}}%;width:{{.Width}}%"><b>{{.Label}}</b></span>{{end}}</div>
      <div class="tl-minor">{{range .Minor}}<span{{if .Weekend}} class="is-weekend"{{end}} style="left:{{.Left}}%;width:{{.Width}}%">{{.Label}}</span>{{end}}</div>
    </div>
  </div>
  <div class="tl-body">
    <div class="tl-grid" aria-hidden="true">
      {{range .Minor}}{{if .Weekend}}<span class="tl-weekend" style="left:{{.Left}}%;width:{{.Width}}%"></span>{{end}}{{end}}
      {{if ge .Now 0.0}}<span class="tl-now" style="left:{{.Now}}%"></span>{{end}}
    </div>
    {{range .Rows}}
    <div class="tl-row tl-{{.Kind}}" data-id="{{.ID}}"{{if .Parent}} data-parent="{{.Parent}}"{{end}}>
      <div class="tl-label" style="--level:{{.Level}}">
        {{if ne .Kind "task"}}<button type="button" class="tl-toggle" aria-expanded="true" data-tl-toggle="{{.ID}}" aria-label="ย่อหรือขยาย {{.Label}}"></button>{{else}}<span class="tl-toggle-space" aria-hidden="true"></span>{{end}}
        <span class="tl-code">{{if eq .Kind "milestone"}}M{{.Code}}{{else}}{{.Code}}{{end}}</span>
        <a class="tl-name" href="{{.Href}}" title="{{.Label}}">{{.Label}}</a>
        {{if .Status}}<span class="tl-status chip chip-{{.Status}}">{{statusLabel .Status}}</span>{{else}}<span class="tl-pct">{{.Percent}}%</span>{{end}}
      </div>
      <div class="tl-track">
        {{with .Plan}}<span class="tl-plan" style="left:{{.Left}}%;width:{{.Width}}%"></span>{{end}}
        {{if .Bar}}
          {{if eq .Kind "task"}}
          <span class="tl-bar seg-{{.Status}}" style="left:{{.Bar.Left}}%;width:{{.Bar.Width}}%" title="{{.Title}}"></span>
          {{else}}
          <span class="tl-bar tl-sum" style="left:{{.Bar.Left}}%;width:{{.Bar.Width}}%" title="{{.Title}}"><span class="tl-sum-fill" style="width:{{.Percent}}%"></span></span>
          {{end}}
          {{if .Duration}}<span class="tl-dur" style="left:calc({{barEnd .Bar}}% + 6px)">{{.Duration}}</span>{{end}}
        {{else if not .Plan}}{{if eq .Kind "task"}}<span class="tl-none" title="{{.Title}}">ยังไม่ได้กำหนดวัน</span>{{end}}{{end}}
        {{with .Marker}}<span class="tl-marker" style="left:{{.Left}}%" title="เป้าหมาย"></span>{{end}}
      </div>
    </div>
    {{end}}
  </div>
</div>
{{if .Unscheduled}}<p class="tl-note">มี {{.Unscheduled}} task ที่ยังไม่มีวันเริ่มหรือแผน (<code>start</code> / <code>due</code>) จึงยังไม่มีแถบ</p>{{end}}
{{end}}{{end}}