{{define "dashboard.html"}}
{{template "shell-start" .}}
<header class="page-head">
  <div><p class="eyebrow">TEAM WORKSPACE</p><h1>Good day, {{.User.DisplayName}}</h1><p>Here’s your month at a glance.</p></div>
  <div class="today-pill"><span>Today</span><strong>{{.TodayJalali}}</strong></div>
</header>
{{template "notice" .}}
<div class="dashboard-grid">
  <section class="card presence-card">
    <div class="presence-top">
      <div><p class="eyebrow">TODAY’S PRESENCE</p><h2>{{if .Attendance}}{{if .Attendance.CheckOut}}Day complete{{else}}You’re checked in{{end}}{{else}}Ready when you are{{end}}</h2></div>
      <span class="live-badge"><i></i> {{if and .Attendance (not .Attendance.CheckOut)}}ACTIVE{{else}}TODAY{{end}}</span>
    </div>
    {{if .Attendance}}
      <div class="time-line">
        <div><small>CHECKED IN</small><strong>{{timeHM .Attendance.CheckIn}}</strong></div>
        <span></span>
        <div><small>CHECKED OUT</small><strong>{{timeHM .Attendance.CheckOut}}</strong></div>
        <div><small>LOCATION</small><strong>{{if eq .Attendance.Mode "remote"}}Remote{{else}}Office{{end}}</strong></div>
      </div>
      {{if not .Attendance.CheckOut}}
      <form method="post" action="/attendance/check-out">
        <input type="hidden" name="csrf" value="{{.CSRF}}">
        <button class="button dark full">Check out</button>
      </form>
      {{end}}
    {{else}}
      <p class="muted">Start your day by choosing where you’re working.</p>
      <div class="checkin-actions">
        <form method="post" action="/attendance/check-in">
          <input type="hidden" name="csrf" value="{{.CSRF}}"><input type="hidden" name="mode" value="office">
          <button class="button primary">Check in at office</button>
        </form>
        <form method="post" action="/attendance/check-in">
          <input type="hidden" name="csrf" value="{{.CSRF}}"><input type="hidden" name="mode" value="remote">
          <button class="button secondary">Working remotely</button>
        </form>
      </div>
    {{end}}
  </section>
  <section class="stats-grid">
    <div class="stat card"><span class="stat-icon mint">✓</span><small>PRESENT DAYS</small><strong>{{.Stats.Present}}</strong><p>This month</p></div>
    <div class="stat card"><span class="stat-icon blue">⌂</span><small>REMOTE DAYS</small><strong>{{.Stats.Remote}}</strong><p>This month</p></div>
    <div class="stat card"><span class="stat-icon sand">☼</span><small>TIME OFF</small><strong>{{.Stats.Leave}}</strong><p>Approved days</p></div>
  </section>
  {{template "calendar.html" .}}
  <section class="card recent-card">
    <header class="section-head"><div><p class="eyebrow">RECENT ACTIVITY</p><h2>Your requests</h2></div><a href="/requests">View all →</a></header>
    {{if .Requests}}
    <div class="request-list compact">
      {{range .Requests}}
      <div class="request-row">
        <span class="request-icon {{.Kind}}">{{if eq .Kind "remote"}}⌂{{else}}☼{{end}}</span>
        <div><strong>{{kindLabel .Kind}}</strong><small>{{dateFA .StartDate}}{{if ne .StartDate .EndDate}} — {{dateFA .EndDate}}{{end}}</small></div>
        <span class="badge {{.Status}}">{{statusLabel .Status}}</span>
      </div>
      {{end}}
    </div>
    {{else}}<div class="empty"><span>◌</span><p>No requests yet.</p><a href="/requests">Make a request</a></div>{{end}}
  </section>
</div>
{{template "shell-end" .}}
{{end}}