{{define "reports.html"}}
{{template "shell-start" .}}
<header class="page-head report-page-head">
  <div><p class="eyebrow">ADMIN</p><h1>Reports</h1><p>Review accumulated attendance and work updates for a selected period.</p></div>
  <form method="get" action="/reports" class="report-range-filter">
    <label>From<input type="date" name="start" value="{{.ReportStart}}" required></label>
    <label>To<input type="date" name="end" value="{{.ReportEnd}}" required></label>
    <button class="button dark">Apply period</button>
  </form>
</header>

<section class="card accumulated-report">
  <header class="accumulated-head">
    <div><p class="eyebrow">ACCUMULATED RESULT</p><h2>Team summary</h2><p>{{dateFA .ReportStart}} — {{dateFA .ReportEnd}} · {{len .ReportSummary}} teammates</p></div>
    <a class="button secondary" href="/reports/summary.csv?start={{.ReportStart}}&end={{.ReportEnd}}">Download combined CSV</a>
  </header>
  <div class="accumulated-totals">
    <div><span class="stat-icon mint">✓</span><small>OFFICE DAYS</small><strong>{{.ReportTotals.Present}}</strong></div>
    <div><span class="stat-icon blue">⌂</span><small>REMOTE DAYS</small><strong>{{.ReportTotals.Remote}}</strong></div>
    <div><span class="stat-icon sand">☼</span><small>TIME OFF</small><strong>{{.ReportTotals.Leave}}</strong></div>
    <div><span class="stat-icon mint">✓</span><small>DONE UPDATES</small><strong>{{.ReportTotals.Done}}</strong></div>
    <div><span class="stat-icon blocked-icon">!</span><small>BLOCKED</small><strong>{{.ReportTotals.Blocked}}</strong></div>
    <div><span class="stat-icon pending-icon">…</span><small>PENDING</small><strong>{{.ReportTotals.Pending}}</strong></div>
  </div>
  <div class="summary-table-wrap">
    <table class="summary-table">
      <thead><tr><th>Teammate</th><th>Office</th><th>Remote</th><th>Time off</th><th>Done</th><th>Blocked</th><th>Pending</th><th>Updates</th></tr></thead>
      <tbody>
        {{range .ReportSummary}}
        <tr>
          <td><span class="summary-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>@{{.User.Username}}</small></span></span></td>
          <td>{{.PresentDays}}</td><td>{{.RemoteDays}}</td><td>{{.LeaveDays}}</td>
          <td><span class="metric done">{{.DoneUpdates}}</span></td>
          <td><span class="metric blocked">{{.Blocked}}</span></td>
          <td><span class="metric pending">{{.Pending}}</span></td>
          <td><strong>{{.TotalUpdates}}</strong></td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</section>

<div class="report-export-grid">
<section class="card report-card">
  <div class="report-illustration">↧</div>
  <div><p class="eyebrow">ATTENDANCE EXPORT</p><h2>Download presence records</h2><p class="muted">The UTF-8 CSV includes Gregorian and Persian dates, check-in/out time, location, and approved requests. It opens directly in Excel.</p></div>
  <form method="get" action="/reports/attendance.csv" class="report-form">
    <label>From<input type="date" name="start" value="{{.ReportStart}}" required></label>
    <label>To<input type="date" name="end" value="{{.ReportEnd}}" required></label>
    <button class="button primary">Download CSV</button>
  </form>
</section>
<section class="card report-card secondary-report">
  <div class="report-illustration">✎</div>
  <div><p class="eyebrow">WORK UPDATE EXPORT</p><h2>Download teammate reports</h2><p class="muted">Includes each teammate’s period, status, and free-form notes about completed, blocked, or pending work.</p></div>
  <form method="get" action="/reports/work-updates.csv" class="report-form">
    <label>From<input type="date" name="start" value="{{.ReportStart}}" required></label>
    <label>To<input type="date" name="end" value="{{.ReportEnd}}" required></label>
    <button class="button primary">Download CSV</button>
  </form>
</section>
</div>
{{template "shell-end" .}}
{{end}}