{{define "title"}}{{.Title}}{{end}}
{{define "main"}}
<main rst-page cal-view id="main">
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>{{.Data.Day.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?date={{.Data.Day.ISO}}">New event</a>
  </div>
</header>

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

{{/* The day's own sentence. Not a caption — it is the answer to the
     question somebody opened this page to ask. Below the toolbar, so its
     length (and whether it wraps) never moves the controls. */}}
<p cal-sentence>{{.Data.Day.Summary.Sentence}}</p>

{{if .Data.Day.AllDay}}
<div cal-allday>
  {{range .Data.Day.AllDay}}{{template "chip" .}}{{end}}
</div>
{{end}}

<div cal-grid>
  <div cal-hours>
    {{range .Data.Day.Hours}}<div cal-hour{{if eq . "08:00"}} cal-working-hour{{end}}>{{.}}</div>{{end}}
  </div>
  <div cal-column>
    <div cal-column-rules aria-hidden="true"></div>

    {{/* Every empty half hour is an ordinary link to a prefilled form.
         This is the whole of "click a time to create an event" with no
         JavaScript: the visible target is a box, and the accessible
         name is the sentence in Label. */}}
    {{range .Data.Day.Slots}}
    <a cal-slot href="{{.Href}}" style="top:{{.TopPct}}%;height:{{.HeightPct}}%">
      <span class="rst-sr-only">{{.Label}}</span>
    </a>
    {{end}}

    {{range .Data.Day.Placed}}
    <div cal-placed="{{if .Short}}short{{end}}" style="top:{{.TopPct}}%;height:{{.HeightPct}}%;left:{{.LeftPct}}%;width:{{.WidthPct}}%">
      {{template "chip" .Chip}}
    </div>
    {{end}}
  </div>
</div>

{{if not .Data.Day.Placed}}{{if not .Data.Day.AllDay}}
{{template "empty-state" dict
  "Title" "Nothing on this day"
  "Body" "Pick a time in the grid above, or use New event."}}
{{end}}{{end}}
</main>
{{end}}
{{define "content"}}{{end}}