{{define "day.html"}}
{{template "shell-start" .}}
<header class="page-head day-page-head">
  <div><p class="eyebrow">TEAM DAY</p><h1>Who’s working?</h1><p>See the team’s presence, remote work, and absences for one day.</p></div>
  <form method="get" action="/day" class="day-date-form">
    <label>Persian date
      <span class="jalali-field">
        <input name="date" value="{{.Day.Jalali}}" data-jalali-picker required autocomplete="off" inputmode="numeric" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
        <button type="button" class="jalali-trigger" aria-label="Choose team date" title="Open Persian calendar">▦</button>
      </span>
    </label>
    <button class="button primary" type="submit">View day</button>
  </form>
</header>
{{template "notice" .}}
<div class="day-layout">
  <section class="card day-summary-card">
    <div class="day-date-nav">
      <a href="/day?date={{.Day.Prev}}" aria-label="Previous day">‹</a>
      <div>
        <p class="eyebrow">PERSIAN CALENDAR</p>
        <h2>{{.Day.Jalali}}</h2>
        <span>{{.Day.Weekday}} · {{.Day.Gregorian}}{{if .Day.DayNote}} · {{.Day.DayNote}}{{end}}</span>
      </div>
      <a href="/day?date={{.Day.Next}}" aria-label="Next day">›</a>
    </div>
    <div class="day-stats">
      <div><i class="presence-mark present"></i><span><strong>{{.Day.Present}}</strong><small>Present</small></span></div>
      <div><i class="presence-mark remote"></i><span><strong>{{.Day.Remote}}</strong><small>Remote</small></span></div>
      <div><i class="presence-mark absent"></i><span><strong>{{.Day.Absent}}</strong><small>Absent</small></span></div>
    </div>
  </section>

  <section class="card roster-card">
    <header class="section-head">
      <div><p class="eyebrow">TEAM ROSTER</p><h2>{{len .Day.Members}} teammates</h2></div>
      <div class="roster-legend"><span><i class="presence-mark present"></i> Present</span><span><i class="presence-mark remote"></i> Remote</span><span><i class="presence-mark absent"></i> Absent</span></div>
    </header>
    {{if .Day.Members}}
    <div class="roster-list">
      {{range .Day.Members}}
      <article class="roster-row">
        {{if .User.AvatarURL}}<img class="avatar" src="{{.User.AvatarURL}}" alt="">{{else}}<span class="avatar">{{initial .User.DisplayName}}</span>{{end}}
        <div class="roster-person"><strong>{{.User.DisplayName}}</strong><small>@{{.User.Username}}</small></div>
        <div class="roster-detail"><span>{{.Detail}}</span>{{if .CheckIn}}<small>{{if .CheckOut}}Completed{{else}}Active{{end}}</small>{{end}}</div>
        <span class="presence-badge {{.Status}}"><i class="presence-mark {{.Status}}"></i>{{.Label}}</span>
      </article>
      {{end}}
    </div>
    {{else}}
    <div class="empty roomy"><span>◌</span><h3>No teammates yet</h3><p>Add teammates to see the daily roster.</p></div>
    {{end}}
  </section>
</div>
{{template "shell-end" .}}
{{end}}