{{/* present_notes — GET /p/{session}/notes, the presenter view.

     The screen somebody actually presents from: what the room is
     looking at, what is coming next, the notes for the slide that is
     up, a clock, and the four controls. Meant for a second window on a
     laptop or for the presenter's own phone.

     The pairing block appears exactly once — on the one request that
     carries the remote capability, and only for the person presenting
     (presentation.go says why). Coming back to this URL later shows
     the talk and no secret, because there is no secret left to show:
     only the hash was stored. */}}
{{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}">
<script defer src="{{asset "static/present.js"}}"></script>
<style>
  /* Two slides side by side above the notes, and one column the
     moment there is not room for two — the notes are the part being
     read, so they get the width. */
  [slides-preview] {
    display: grid;
    gap: var(--rst-sp-4);
    grid-template-columns: 2fr 1fr;
  }
  @media (max-width: 60rem) {
    [slides-preview] {
      grid-template-columns: 1fr;
    }
  }
  /* The two slides are pictures of themselves (presentation.go's
     slideThumbImg): one <img> each of the session's SVG thumbnail,
     rather than a live copy of the slide. A border and a background
     under it so a picture still loading is a slide-shaped space. */
  [slides-thumb-img] {
    aspect-ratio: 16 / 9;
    background: var(--rst-surface-2);
    block-size: auto;
    border: 1px solid var(--rst-line);
    border-radius: var(--rst-radius);
    display: block;
    inline-size: 100%;
  }
  [slides-clock] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-3);
  }
  [slides-clock-now] {
    font-size: var(--rst-fs-lg);
    font-variant-numeric: tabular-nums;
    margin: 0;
  }
  [slides-clock] p {
    color: var(--rst-text-muted);
    margin: 0;
  }
  [slides-commands] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
  }
  [slides-commands] form {
    margin: 0;
  }
  [slides-commands] button {
    min-height: 44px;
  }
  [slides-tools] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
  }
  [slides-code] {
    font-size: var(--rst-fs-lg);
    letter-spacing: 0.25em;
    margin: 0;
  }
  [slides-pair] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-4);
  }
  [slides-pair-fields] {
    flex: 1 1 18rem;
  }
</style>{{end}}
{{define "content"}}
{{template "page-header" dict "Title" .Title "Sub" .DeckTitle}}

<div slides-clock>
  <p slides-clock-now data-clock>{{.Clock}}</p>
  <p>{{.Started}}</p>
  <p data-elapsed-since="{{.StartedAt}}" data-elapsed-template="{{.ElapsedTemplate}}">{{.Elapsed}}</p>
  <p slides-counter>{{.Counter}}</p>
</div>

{{if .Blackout}}
{{/* State in words, never in colour alone: the presenter's own screen
     is the one place that has to say the room is looking at nothing. */}}
{{template "status-pill" dict "Tone" "neutral" "Label" .BlackoutLabel}}
{{end}}

{{if .Controls}}
<div slides-commands>{{template "present-controls" .Controls}}</div>
{{end}}

{{/* The script's root: the session it is watching, and — only when
     this request carried it — the capability its keyboard sends with.
     A presenter view opened without the token watches and cannot
     drive, which is exactly what the buttons above do too. */}}
<div slides-preview data-session="{{.Session}}"
     data-slide="{{.Now}}"
     data-blackout="{{if .Blackout}}true{{else}}false{{end}}"
     {{- if .Token}} data-remote-token="{{.Token}}"{{end}}>
  <div>
    <h2>{{.CurrentLabel}}</h2>
    {{.Current}}
  </div>
  <div>
    <h2>{{.NextLabel}}</h2>
    {{if .HasNext}}{{.Next}}{{end}}
  </div>
</div>

<div rst-box>
  <h2>{{.NotesLabel}}</h2>
  {{if .Notes}}{{.Notes}}{{else}}<p>{{.NoNotes}}</p>{{end}}
</div>

{{if .Pair}}
<div rst-box>
  {{template "callout" dict "Tone" "info" "Title" .PairTitle "Body" .PairBody}}
  <div slides-pair>
    {{.QR}}
    <div slides-pair-fields>
      <p slides-code>{{.Code}}</p>
      {{/* Hand-written for one attribute, share.html's reason: readonly
           is not in field-text's contract, and the field is here to be
           selected and copied. */}}
      <div rst-field>
        <label rst-field-label for="remote-url">{{.URLLabel}}</label>
        <input rst-input id="remote-url" name="remote-url" type="text"
               value="{{.RemoteURL}}" readonly aria-describedby="remote-url-hint">
        <small rst-field-hint id="remote-url-hint">{{.CodeLabel}} {{.Code}}</small>
      </div>
    </div>
  </div>
</div>
{{end}}

<nav slides-tools aria-label="{{.ToolsLabel}}">
  {{if .StageHref}}<a rst-btn href="{{.StageHref}}">{{.StageLabel}}</a>{{end}}
  <a rst-btn href="{{.DeckHref}}">{{.DeckLabel}}</a>
</nav>
{{end}}