{{define "title"}}{{.Title}}{{end}}
{{define "main"}}
<main rst-page cal-view id="main">
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>{{.Data.Month.Title}}</h1>
  </div>
  {{/* Quick add sits BESIDE New event, not instead of it. The
       sentence is the fast path; the form is the one that shows
       every field, and neither is a lesser version of the other. */}}
  <div cal-header-actions>
    {{template "quickadd" .}}
    <a rst-btn="primary" href="/events/new">New event</a>
  </div>
</header>

{{template "calendar-toolbar" (dict "View" "month" "Noun" "month" "Prev" (printf "/month/%s" .Data.Month.PrevISO) "Today" (printf "/month/%s" .Data.TodayMonth) "Next" (printf "/month/%s" .Data.Month.NextISO) "Day" (printf "/day/%s" .Data.SelectedISO) "Week" (printf "/week/%s" .Data.SelectedISO) "Month" (printf "/month/%s?date=%s" .Data.Month.ISO .Data.SelectedISO) "Agenda" (printf "/agenda?from=%s" .Data.SelectedISO))}}

{{/* A real table. A month IS tabular data — seven weekday columns
     against week rows — so the headers come free for a screen reader,
     and a scriptless page keeps semantics a div grid would have to
     rebuild with ARIA. */}}
<table cal-month>
  <caption class="rst-sr-only">{{.Data.Month.Title}}, by week</caption>
  <thead>
    <tr>{{range .Data.Month.Weekdays}}<th scope="col">{{.}}</th>{{end}}</tr>
  </thead>
  <tbody>
    {{range .Data.Month.Weeks}}
    <tr>
      {{range .Days}}
      <td>
        <div cal-day-cell="{{if not .InMonth}}outside{{end}}{{if .Weekend}} weekend{{end}}">
          <a cal-day-num="{{if .IsToday}}today{{end}}" href="{{.Href}}">
            {{.Day}}{{if .IsToday}}<span class="rst-sr-only"> (today)</span>{{end}}
          </a>
          {{range .Chips}}{{template "chip" .}}{{end}}
          {{/* A month cell that grew to fit its fullest day would make
               every row that tall. The overflow links to the day, which
               is the only place that can show them all. */}}
          {{if .More}}<a cal-more href="{{.Href}}">+{{.More}} more</a>{{end}}
        </div>
      </td>
      {{end}}
    </tr>
    {{end}}
  </tbody>
</table>
</main>
{{end}}
{{define "content"}}{{end}}