{{/* remote — GET /p/{session}/remote?t=, the phone in the presenter's
     hand.

     Four buttons, each its own form, each big enough to hit without
     looking down (spec §3.4, §8). Above them: the slide the room is
     looking at, the one coming next, and the notes for the one that is
     up — rendered at the phone viewport, because that is the viewport
     this page is on.

     The script makes it feel live (a swipe, and the slide updating
     when somebody else moves it). Nothing here needs it: with scripts
     off each button posts and comes straight back. */}}
{{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}">
<script defer src="{{asset "static/present.js"}}"></script>
<style>
  /* The buttons are the screen. 56px is well past the 24 by 24 floor
     because this one is pressed in the dark, mid-sentence, by somebody
     looking at a room rather than at their hand. */
  [slides-remote-commands] {
    display: grid;
    gap: var(--rst-sp-3);
    grid-template-columns: 1fr 1fr;
  }
  [slides-remote-commands] form {
    margin: 0;
  }
  [slides-remote-commands] button {
    inline-size: 100%;
    min-height: 56px;
  }
  [slides-remote-preview] {
    display: grid;
    gap: var(--rst-sp-3);
    grid-template-columns: 2fr 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-tools] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
  }
  [slides-counter] {
    color: var(--rst-text-muted);
    margin: 0;
  }
</style>{{end}}
{{define "content"}}
{{template "page-header" dict "Title" .Title "Sub" .DeckTitle}}

<div slides-remote data-session="{{.Session}}" data-remote-token="{{.Controls.Token}}"
     data-slide="{{.Now}}"
     data-blackout="{{if .Blackout}}true{{else}}false{{end}}">
  <div slides-remote-preview>
    <div>
      <h2>{{.CurrentLabel}}</h2>
      {{.Current}}
    </div>
    <div>
      <h2>{{.NextLabel}}</h2>
      {{if .HasNext}}{{.Next}}{{end}}
    </div>
  </div>
  <p slides-counter>{{.Counter}}</p>
  {{if .Blackout}}
  {{template "status-pill" dict "Tone" "neutral" "Label" .BlackoutLabel}}
  {{end}}

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

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

  <nav slides-tools aria-label="{{.ToolsLabel}}">
    <a rst-btn href="{{.PresenterHref}}">{{.PresenterLabel}}</a>
  </nav>
</div>
{{end}}