team-presence/internal/app/templates/day.html

{{define "day.html"}}
{{template "shell-start" .}}
<header class="page-head day-page-head">
  <div>
    <p class="eyebrow">{{if .Week.Enabled}}TEAM WEEK{{else}}TEAM DAY{{end}}</p>
    <h1>{{if .Week.Enabled}}Team schedule{{else}}Who’s working?{{end}}</h1>
    <p>{{if .Week.Enabled}}See everyone’s weekly office, remote, and absence plan.{{else}}See the team’s presence, remote work, and absences for one day.{{end}}</p>
  </div>
  <div class="day-view-controls">
    <nav class="view-switch" aria-label="Schedule view">
      <a href="/day?date={{.Day.Jalali}}" class="{{if not .Week.Enabled}}active{{end}}">Day</a>
      <a href="/day?date={{.Day.Jalali}}&view=week" class="{{if .Week.Enabled}}active{{end}}">Week</a>
    </nav>
    <form method="get" action="/day" class="day-date-form">
      {{if .Week.Enabled}}<input type="hidden" name="view" value="week">{{end}}
      <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</button>
    </form>
  </div>
</header>
{{template "notice" .}}

{{if .Week.Enabled}}
<div class="week-layout">
  <section class="card week-calendar">
    <header class="week-toolbar">
      <div class="week-navigation">
        <a href="/day?date={{.Week.Prev}}&view=week" aria-label="Previous week">‹</a>
        <div><p class="eyebrow">SATURDAY — FRIDAY</p><h2>{{.Week.StartJalali}} — {{.Week.EndJalali}}</h2></div>
        <a href="/day?date={{.Week.Next}}&view=week" aria-label="Next week">›</a>
      </div>
      <div class="week-totals">
        <span><i class="presence-mark present"></i><strong>{{.Week.Present}}</strong> Present</span>
        <span><i class="presence-mark remote"></i><strong>{{.Week.Remote}}</strong> Remote</span>
        <span><i class="presence-mark absent"></i><strong>{{.Week.Absent}}</strong> Absent</span>
      </div>
    </header>
    <div class="week-grid">
      {{range .Week.Days}}
      <section class="week-day-column {{if .IsToday}}today{{end}} {{if eq .Weekday "Friday"}}friday{{end}}">
        <a class="week-day-head" href="/day?date={{.Jalali}}">
          <span>{{.Weekday}}</span>
          <strong>{{.Jalali}}</strong>
          <small>{{.Gregorian}}{{if .DayNote}} · {{.DayNote}}{{end}}</small>
        </a>
        <div class="week-day-counts">
          <span class="present">{{.Present}}</span><span class="remote">{{.Remote}}</span><span class="absent">{{.Absent}}</span>
        </div>
        <div class="week-records">
          {{range .Members}}
          <article class="week-record {{.Status}}">
            <div class="week-record-person">
              {{if .User.AvatarURL}}<img class="avatar" src="{{.User.AvatarURL}}" alt="">{{else}}<span class="avatar">{{initial .User.DisplayName}}</span>{{end}}
              <span><strong>{{.User.DisplayName}}</strong><small>{{.Detail}}</small></span>
            </div>
            <span class="week-record-status"><i class="presence-mark {{.Status}}"></i>{{.Label}}</span>
          </article>
          {{end}}
        </div>
      </section>
      {{end}}
    </div>
  </section>
</div>
{{else}}
<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>
{{end}}
{{template "shell-end" .}}
{{end}}