{{/* present — GET /p/{session}, the fullscreen surface, and the
     audience's follow view (GET /s/{token}?follow=1), which is the
     same page with nothing to press.

     One template for both because they ARE the same screen: a slide
     filling the viewport, where in the deck it is, and a way to move —
     forms for whoever holds the remote, links for whoever is only
     watching, nothing at all for an audience following along.

     Nothing here needs the script. With it, static/present.js swaps
     the slide when the session moves; without it, the follow view has
     a meta refresh and the presenter has next and previous. */}}
{{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}">
{{if .Refresh}}{{/* The scriptless heartbeat: an audience with no
     JavaScript still moves with the presenter, five seconds behind.
     Only on the follow view — a refresh on the presenter's own screen
     would blink the projector mid-sentence. */}}
<meta http-equiv="refresh" content="5">{{end}}
<script defer src="{{asset "static/present.js"}}"></script>
<style>
  /* The projector is a bounded black stage, never a document that can
     push its remote controls underneath the fold. The controls live on
     the stage so the slide can use every pixel behind them. */
  [slides-surface] {
    background: #000;
    block-size: 100dvh;
    box-sizing: border-box;
    display: flex;
    inline-size: 100%;
    overflow: hidden;
    position: relative;
  }
  /* The projector is its own full-screen stage, not a document inside
     the ordinary constrained rst-page wrapper. Its capability is what
     makes it safe to omit the app bar and account menu. */
  [slides-present-stage] {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 100dvh;
    padding: 0;
  }
  [slides-stage] {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    inline-size: 100%;
    justify-content: center;
    margin: 0;
    min-block-size: 0;
    min-inline-size: 0;
  }
  [slides-stage] > [slides-slide] {
    block-size: min(100dvh, calc(100vw * 9 / 16));
    inline-size: min(100vw, calc(100dvh * 16 / 9));
    max-block-size: 100%;
    max-inline-size: 100%;
  }
  [slides-bar] {
    align-items: center;
    background: color-mix(in srgb, #000 72%, transparent);
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-3);
    inset-inline: 0;
    justify-content: center;
    padding: var(--rst-sp-3);
    position: absolute;
  }
  [slides-bar] form {
    display: inline;
    margin: 0;
  }
  [slides-counter] {
    color: var(--rst-text-muted);
    margin: 0;
  }
  [slides-progress] {
    block-size: var(--rst-sp-1);
    inline-size: min(100%, 24rem);
  }
  /* Blacking out hides the slide and says so in words. Never colour
     alone: the sentence below the stage is what tells somebody using a
     screen reader — or looking at a projector that is simply off —
     that this is deliberate. */
  [slides-surface][data-blackout="true"] [slides-stage] {
    visibility: hidden;
  }
  [slides-blackout] {
    align-self: center;
    color: #fff;
    font-weight: 600;
    margin: 0;
    position: absolute;
    text-align: center;
    z-index: 1;
  }
</style>{{end}}
{{define "main"}}<main id="main" slides-present-stage>{{template "content" .}}</main>{{end}}
{{define "content"}}
{{/* The two URLs the script reads come DOWN rather than being built up
     there: which capability this surface reads under is the handler's
     decision (presentation.go's surfaceOptions), and the audience's
     follow view deliberately carries no session sqid at all. */}}
<div slides-surface
     {{- if .Session}} data-session="{{.Session}}"{{end}}
     {{- if .StreamHref}} data-stream="{{.StreamHref}}"{{end}}
     {{- if .FragmentHref}} data-fragment="{{.FragmentHref}}"{{end}}
     data-slide="{{.Now}}"
     data-blackout="{{if .Blackout}}true{{else}}false{{end}}"
     {{- if .Token}} data-remote-token="{{.Token}}"{{end}}
     {{- if .NotesHref}} data-notes="{{.NotesHref}}"{{end}}>
{{if .HasSlide}}
  <div slides-stage>{{.Slide}}</div>
  <p slides-blackout{{if not .Blackout}} hidden{{end}}>{{.BlackoutLabel}}</p>
  <div slides-bar>
    {{if .Controls}}{{template "present-controls" .Controls}}{{end}}
    {{if .PrevHref}}<a rst-btn href="{{.PrevHref}}" rel="prev">{{.PrevLabel}}</a>{{end}}
    {{if .NextHref}}<a rst-btn href="{{.NextHref}}" rel="next">{{.NextLabel}}</a>{{end}}
    {{/* "3 / 12" alone is terse read aloud, so the counter carries what
         the number means in a line only a screen reader gets. The bar
         beside it is the same fact as a picture, and is hidden from
         assistive tech rather than announced twice. */}}
    <p slides-counter><span class="rst-sr-only">{{.ProgressLabel}}</span> {{.Counter}}</p>
    <progress slides-progress value="{{.Now}}" max="{{.Total}}" aria-hidden="true"></progress>
    {{if .NotesHref}}<a rst-btn href="{{.NotesHref}}">{{.NotesLabel}}</a>{{end}}
    {{if .BackHref}}<a rst-btn href="{{.BackHref}}">{{.BackLabel}}</a>{{end}}
  </div>
{{else}}
  <div rst-box>
    {{template "empty-state" dict "Title" .EmptyTitle "Body" .EmptyBody}}
  </div>
{{end}}
</div>
{{end}}