{{define "title"}}{{.Title}}{{end}}
{{define "content"}}
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>{{.Data.Title}}</h1>
    <p rst-page-header-sub>{{if .Data.RescheduleToken}}Pick a new time.{{else}}{{duration .Data.DurationMin}} with {{.Data.HostName}}.{{end}}</p>
  </div>
</header>

{{with .Data.Description}}<p>{{.}}</p>{{end}}

{{if .Data.Gone}}
{{template "callout" dict "Tone" "warning" "Body" "That time has just gone. The times still free are below." "Alert" true}}
{{end}}
{{with .Data.Error}}
{{template "callout" dict "Tone" "negative" "Body" . "Alert" true}}
{{end}}

{{/* The zone, as a plain form. Scriptless it is a select and a button;
     booking.js may preselect the browser's zone when none was chosen
     (data-chosen says one was). */}}
<form method="get" action="{{.Data.Path}}" cal-book-zone-form>
  {{if .Data.Day}}<input type="hidden" name="day" value="{{.Data.Day}}">{{end}}
  <label rst-field-label for="zone">Times shown in</label>
  <select rst-input="short" id="zone" name="zone" cal-book-zone{{if .Data.ZoneChosen}} data-chosen="1"{{end}}>
    {{range .Data.Zones}}<option value="{{.}}"{{if eq . $.Data.Zone}} selected{{end}}>{{.}}</option>{{end}}
  </select>
  <button rst-btn="ghost compact" type="submit">Change</button>
</form>

{{if .Data.Picked}}
{{/* Step two: the slot is fixed; now who is booking it. */}}
<section rst-box>
  <header rst-box-head><h2>{{.Data.DayLabel}}, {{.Data.Picked.Label}}</h2></header>
  <form rst-form method="post" action="{{.Data.Path}}" cal-book-details>
    <input type="hidden" name="start" value="{{.Data.Picked.StartUTC}}">
    <input type="hidden" name="zone" value="{{.Data.Zone}}">
    {{template "field" dict "ID" "name" "Name" "name" "Label" "Your name" "Value" .Data.Name "Required" true "Autofocus" true
      "Error" (if_eq .Data.ErrorField "name" .Data.Error)}}
    {{template "field" dict "ID" "address" "Name" "address" "Label" "Your email" "Type" "email" "Value" .Data.Address "Required" true
      "Help" "A link to confirm goes here, and nothing else does."
      "Error" (if_eq .Data.ErrorField "address" .Data.Error)}}
    {{template "field-textarea" dict "Name" "note" "Label" "Anything to say beforehand?" "Value" .Data.Note "Rows" 3
      "Error" (if_eq .Data.ErrorField "note" .Data.Error)}}
    {{template "form-foot" dict "Submit" "Hold this time" "CancelHref" (printf "%s?day=%s&zone=%s" .Data.Path .Data.Day .Data.Zone) "CancelLabel" "Pick another time"}}
  </form>
</section>
{{else if .Data.Day}}
{{/* Step one: this day's slots, each a form of its own. */}}
<p><a href="{{.Data.Path}}?zone={{.Data.Zone}}">&larr; Other days</a></p>
<h2>{{.Data.DayLabel}}</h2>
{{if .Data.Slots}}
<div cal-book-slots>
  {{range .Data.Slots}}
  <form method="post" action="{{$.Data.Path}}">
    <input type="hidden" name="start" value="{{.StartUTC}}">
    <input type="hidden" name="zone" value="{{$.Data.Zone}}">
    {{with $.Data.Rev}}<input type="hidden" name="rev" value="{{.}}">{{end}}
    <button rst-btn type="submit" cal-book-slot>{{.Label}}</button>
  </form>
  {{end}}
</div>
{{else}}
{{template "empty-state" dict "Body" "Nothing free that day any more."}}
{{end}}
{{else}}
{{if .Data.Days}}
<ul cal-book-days>
  {{range .Data.Days}}
  <li><a href="{{$.Data.Path}}?day={{.Date}}&amp;zone={{$.Data.Zone}}">{{.Label}}</a> <small>{{.Count}} free</small></li>
  {{end}}
</ul>
{{else}}
{{template "empty-state" dict "Body" "Nothing free in the next while. Try again in a few days."}}
{{end}}
{{end}}
{{end}}