{{/* viewer — GET /d/{sqid} and GET /s/{token}, the paged viewer.

     One file for all three audiences (viewer.go's modeOwner,
     modeMember, modeLink). The mode decides what the handler PUTS in
     the view data — the notes, the owner's buttons, the filmstrip's
     links — and this template only ever asks whether a field is there.
     That is the whole reason it is not two templates: a second file is
     a second place for "does this reader get the speaker notes?" to be
     answered, and the two answers would drift.

     render.go builds it twice, as "viewer" (with the account menu) and
     as "viewer_link" (with a sign-in link instead), because nobody
     reading a deck over a share link has an account to show.

     Present is task 6's surface in its scriptless form: one slide, two
     links, nothing else on the page. §8's floor, and the thing the
     fullscreen presenter will be an enhancement OF rather than a
     replacement for. */}}
{{/* The slide's own stylesheet, on the screens that render a slide and
     nowhere else: it is a document's look, not the app's chrome, and
     every other screen would pay for it without using it. */}}
{{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}">
<style>
  /* The chrome around the slide. Everything a slide itself looks like
     is slides.css; these five rules only place the viewer's own parts,
     and each one is an app attribute (slides-*) so nothing here can
     collide with the rst-* vocabulary. */
  [slides-stage] {
    margin-block: var(--rst-sp-4);
  }
  [slides-tools] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
  }
  [slides-pager] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-3);
  }
  /* A pager end — the previous link on slide one — is plain text, not
     a disabled control: there is nowhere to go, so there is nothing to
     put in the tab order. */
  [slides-pager-end],
  [slides-counter] {
    color: var(--rst-text-muted);
    margin: 0;
  }
  [slides-film] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  [slides-film] a {
    display: inline-block;
    /* 24 by 24 is the floor a pointer target has to meet (WCAG 2.2 AA);
       the padding is what gets a one-word slide name there. */
    min-height: 24px;
    padding: var(--rst-sp-1) var(--rst-sp-2);
  }
  [slides-film] a[aria-current="true"] {
    background: var(--rst-accent-soft);
    border-radius: var(--rst-radius-sm);
    font-weight: 600;
  }
</style>{{end}}
{{define "content"}}
{{if .Present}}
<div slides-present data-vp="{{.VP}}">
  {{.Slide}}
  <nav slides-pager aria-label="{{.PagerLabel}}">
    {{if .PrevHref}}<a rst-btn href="{{.PrevHref}}" rel="prev">{{.PrevLabel}}</a>
    {{else}}<span slides-pager-end>{{.PrevLabel}}</span>{{end}}
    <p slides-counter>{{.Counter}}</p>
    {{if .NextHref}}<a rst-btn href="{{.NextHref}}" rel="next">{{.NextLabel}}</a>
    {{else}}<span slides-pager-end>{{.NextLabel}}</span>{{end}}
  </nav>
</div>
{{else}}
<div slides-viewer data-vp="{{.VP}}">
{{if .BackHref}}{{template "back-nav" dict "Href" .BackHref "Label" .BackLabel}}{{end}}
{{template "page-header" dict "Title" .Title}}
{{if or .EditHref .SettingsHref .ShareHref .NotesHref .ExportHref .PresentHref .PresentAction .FollowHref}}
<nav slides-tools aria-label="{{.ToolsLabel}}">
  {{if .EditHref}}<a rst-btn="primary" href="{{.EditHref}}">{{.EditLabel}}</a>{{end}}
  {{if .SettingsHref}}<a rst-btn href="{{.SettingsHref}}">{{.SettingsLabel}}</a>{{end}}
  {{if .ShareHref}}<a rst-btn href="{{.ShareHref}}">{{.ShareLabel}}</a>{{end}}
  {{if .NotesHref}}<a rst-btn href="{{.NotesHref}}">{{.NotesPageLabel}}</a>{{end}}
  {{/* Export is a LINK to a screen of its own, not a form button: it
       asks whether the speaker notes go in the file before it starts
       anything (exports.go). */}}
  {{if .ExportHref}}<a rst-btn href="{{.ExportHref}}">{{.ExportLabel}}</a>{{end}}
  {{/* Present is a FORM on the signed-in screens, because pressing it
       writes: it opens a session and mints the remote's capability
       (presentation.go). Over a share link it stays a link to the same
       capability with ?present=1 (spec §5) — a reader may present the
       deck on their own screen, and may not start a session on
       somebody else's deck. */}}
  {{if .PresentAction}}
  <form method="post" action="{{.PresentAction}}">
    <button rst-btn="primary" type="submit">{{.PresentLabel}}</button>
  </form>
  {{else if .PresentHref}}<a rst-btn href="{{.PresentHref}}">{{.PresentLabel}}</a>{{end}}
  {{/* Somebody is presenting this deck right now, and this is the
       offer to watch along (spec §3.4). Only ever on a share link. */}}
  {{if .FollowHref}}<a rst-btn="primary" href="{{.FollowHref}}">{{.FollowLabel}}</a>{{end}}
</nav>
{{end}}

{{if .HasSlides}}
<div slides-stage>{{.Slide}}</div>

<nav slides-pager aria-label="{{.PagerLabel}}">
  {{if .PrevHref}}<a rst-btn href="{{.PrevHref}}" rel="prev">{{.PrevLabel}}</a>
  {{else}}<span slides-pager-end>{{.PrevLabel}}</span>{{end}}
  <p slides-counter>{{.Counter}}</p>
  {{if .NextHref}}<a rst-btn href="{{.NextHref}}" rel="next">{{.NextLabel}}</a>
  {{else}}<span slides-pager-end>{{.NextLabel}}</span>{{end}}
</nav>

{{if .HasNotes}}
<details slides-notes>
  <summary>{{.NotesLabel}}</summary>
  {{.Notes}}
</details>
{{end}}

<nav slides-film-nav aria-label="{{.FilmLabel}}">
  <ol slides-film>
    {{range .Film}}
    <li><a href="{{.Href}}"{{if .Current}} aria-current="true"{{end}}>{{.Label}}</a></li>
    {{end}}
  </ol>
</nav>
{{else}}
<div rst-box>
  {{template "empty-state" dict "Title" .EmptyTitle "Body" .EmptyBody "ActionHref" .EditHref "ActionLabel" .EditLabel}}
</div>
{{end}}
</div>
{{end}}
{{end}}