{{define "calendar.html"}}
<section id="calendar-panel" class="card calendar-card">
  <header class="calendar-head">
    <div>
      <p class="eyebrow">PERSIAN CALENDAR</p>
      <h2>{{.Calendar.MonthName}} <span>{{.Calendar.Year}}</span></h2>
      <p class="fa-month" lang="fa" dir="rtl">{{.Calendar.MonthNameFA}} {{.Calendar.Year}}</p>
    </div>
    <div class="calendar-nav">
      <a aria-label="Previous month" href="/?month={{.Calendar.Prev}}" hx-get="/calendar?month={{.Calendar.Prev}}" hx-target="#calendar-panel" hx-swap="outerHTML">‹</a>
      <a aria-label="Next month" href="/?month={{.Calendar.Next}}" hx-get="/calendar?month={{.Calendar.Next}}" hx-target="#calendar-panel" hx-swap="outerHTML">›</a>
    </div>
  </header>
  <div class="calendar-grid weekdays">
    <span>Sat</span><span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
  </div>
  <div class="calendar-grid days">
    {{range .Calendar.Cells}}
      {{if .InMonth}}
      <a href="/day?date={{.Gregorian}}&view=day" class="day {{if .IsToday}}today{{end}} {{if .IsFriday}}friday{{end}} {{if .Holiday}}holiday{{end}}" title="View team details for this day">
        <span class="day-number">{{.Day}}</span>
        {{if .Status}}<i class="status-dot {{.Status}}" title="{{.Status}}"></i>{{end}}
        {{if .Holiday}}<small title="{{.Holiday}}">{{.Holiday}}</small>{{end}}
      </a>
      {{else}}<div class="day blank"></div>{{end}}
    {{end}}
  </div>
  <footer class="calendar-legend">
    <span><i class="status-dot office"></i> Office</span>
    <span><i class="status-dot remote"></i> Remote</span>
    <span><i class="status-dot leave"></i> Time off</span>
    <span><i class="holiday-mark"></i> Holiday</span>
  </footer>
</section>
{{end}}