{{define "title"}}{{.Title}}{{end}}
{{define "main"}}
{{/* cal-view: the one width every view shares (calendar.css). */}}
<main rst-page cal-view id="main">
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>{{.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" "week" "Noun" "week" "Prev" (printf "/week/%s" .Data.PrevISO) "Today" (printf "/week/%s" .Data.TodayISO) "Next" (printf "/week/%s" .Data.NextISO) "Day" (printf "/day/%s" .Data.StartISO) "Week" (printf "/week/%s" .Data.StartISO) "Month" (printf "/month/%s?date=%s" (slice .Data.StartISO 0 7) .Data.StartISO) "Agenda" (printf "/agenda?from=%s" .Data.StartISO))}}

{{/* The week keeps its two dimensions on a phone and scrolls sideways.
     Flattening it to a list would make it the agenda, which already
     exists and is better at being a list. */}}
<div cal-week-scroll>
  {{/* Row by row, not column by column: the headers, then ONE all-day
       row across the whole week, then the timed grid. When each day
       carried its own all-day strip, a day with a birthday pushed its
       hour column down and its 10:00 meeting drew beside the 11:00
       label. As rows of one grid, every timed column starts at the
       same height whatever sits above it. */}}
  <div cal-week-grid>
    <div cal-column-head>&nbsp;</div>
    {{range .Data.Days}}
    <div cal-column-head="{{if eq .ISO $.Data.TodayISO}}today{{end}}">
      <a href="/day/{{.ISO}}">{{.Date.Format "Mon 2"}}</a>
      {{if eq .ISO $.Data.TodayISO}}<span class="rst-sr-only">(today)</span>{{end}}
    </div>
    {{end}}

    {{if .Data.AnyAllDay}}
    <div cal-allday-label>All day</div>
    {{range .Data.Days}}
    <div cal-allday="week">{{range .AllDay}}{{template "chip" .}}{{end}}</div>
    {{end}}
    {{end}}

    <div cal-hours>
      {{range (index .Data.Days 0).Hours}}<div cal-hour{{if eq . "08:00"}} cal-working-hour{{end}}>{{.}}</div>{{end}}
    </div>
    {{range .Data.Days}}
    <div cal-column>
      <div cal-column-rules aria-hidden="true"></div>
      {{range .Slots}}
      <a cal-slot href="{{.Href}}" style="top:{{.TopPct}}%;height:{{.HeightPct}}%">
        <span class="rst-sr-only">{{.Label}}</span>
      </a>
      {{end}}
      {{range .Placed}}
      <div cal-placed="{{if .Short}}short{{end}}" style="top:{{.TopPct}}%;height:{{.HeightPct}}%;left:{{.LeftPct}}%;width:{{.WidthPct}}%">
        {{template "chip" .Chip}}
      </div>
      {{end}}
    </div>
    {{end}}
  </div>
</div>
</main>
{{end}}
{{define "content"}}{{end}}