{{/* editor — GET /d/{sqid}/edit, the editor (editor.go, spec §3.1).

     The three panes, server-rendered: the strip (every slide as a
     server-drawn SVG thumbnail, each with its menu), the
     stage (the switcher, the current slide's section, then its notes),
     and the inspector (three sections of real form controls: the deck,
     the slide, the selected block). The bundle (fixtures/editor-entry.js)
     binds ProseMirror to the text blocks on the stage, fills the
     inspector for the selection and turns every change into one drive
     operation, keeps the strip current, and saves — it adds editing to
     a page that already reads correctly, and it never renders a slide
     of its own.

     Everything the bundle needs is a data attribute on [slides-editor]:
     the deck, the log's seq, the current slide, the person's name and
     colour, and every string the bundle will ever show. The bundle
     carries no copy: a state changes which of these texts is on screen,
     and nothing else. Everything the bundle builds more than once (a
     strip item) is cloned from a <template> here, so its markup and
     its words are this file's too.

     The inspector's controls are hidden and shown by the bundle
     (hidden on a field whose block type or slide layout does not have
     it); every one of them is a labelled control whether or not it is
     on screen, and TestEditorInspectorMarkupIsFormsWithLabels holds it
     to that.

     The <noscript> is spec §8's floor said out loud — the editor is
     the one surface that needs scripts — and it points at the viewer,
     which does not. */}}
{{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}">
<link rel="stylesheet" href="{{asset "static/editor.css"}}">
<link rel="stylesheet" href="{{asset "static/estilo/save-status.css"}}">
<script type="module" src="{{.BundleSrc}}"></script>{{end}}
{{define "content"}}
<div slides-editor
  data-deck="{{.DeckSqid}}"
  data-seq="{{.Seq}}"
  data-slide="{{.SlideID}}"
  data-client-name="{{.ClientName}}"
  data-client-colour="{{.ClientColour}}"
  data-save-status-module="{{asset "static/estilo/save-status.mjs"}}"
  data-text-error="{{.L "status.error"}}"
  data-text-current="{{.CurrentLabel}}"
  data-text-slide="{{.SlideLabel}}"
  data-text-phone-override="{{.L "block.phone.override"}}"
  data-text-canvas-selected="{{.L "canvas.selected"}}"
  data-text-presence-slide="{{.L "presence.slide"}}"
  data-text-presence-block="{{.L "presence.block"}}"
  data-text-presence-more="{{.L "presence.more"}}"
  data-text-presence-joined="{{.L "presence.joined"}}"
  data-text-presence-left="{{.L "presence.left"}}"
  data-store="{{if .HasStore}}1{{else}}0{{end}}"
  data-text-upload-uploading="{{.L "block.image.uploading"}}"
  data-text-upload-checking="{{.L "block.image.checking"}}"
  data-text-upload-done="{{.L "block.image.done"}}"
  data-text-upload-failed="{{.L "block.image.failed"}}"
  data-text-upload-toolarge="{{.L "block.image.toolarge"}}"
  data-text-upload-type="{{.L "block.image.type"}}"
  data-text-upload-altfirst="{{.L "block.image.altfirst"}}"
  data-text-asset-remove="{{.L "assets.remove"}}"
  {{- range .BlockTypes}}
  data-type-{{.}}="{{$.L (printf "type.%s" .)}}"
  {{- end}}>
<noscript>
  <div rst-callout rst-tone="warning">
    <div rst-callout-body>
      <p>{{.NoScriptBody}}</p>
      <p><a rst-btn href="{{.BackHref}}">{{.NoScriptLink}}</a></p>
    </div>
  </div>
</noscript>

<header slides-editor-bar>
  {{template "back-nav" dict "Href" .BackHref "Label" .BackLabel}}
  <h1 slides-editor-title>{{.Title}}</h1>
  {{/* Every keyboard shortcut has a menu item: Ctrl+Enter, Ctrl+D,
       Ctrl+Z and Shift+Ctrl+Z are all here as buttons, so somebody who
       does not know the keys — or cannot press them — finds the same
       commands by name. Present is a form, as it is on the viewer,
       because pressing it writes (presentation.go). */}}
  <details rst-dropdown slides-menu name="rst-menus">
    <summary rst-btn>{{.MenuLabel}} <span rst-caret aria-hidden="true">{{icon "chevron-down"}}</span></summary>
    <div rst-dropdown-menu>
      <button type="button" data-command="new-slide">{{.NewSlideLabel}}</button>
      <button type="button" data-command="duplicate-slide"{{if not .HasSlides}} disabled{{end}}>{{.DuplicateLabel}}</button>
      <button type="button" data-command="undo">{{.UndoLabel}}</button>
      <button type="button" data-command="redo">{{.RedoLabel}}</button>
    </div>
  </details>
  <form method="post" action="{{.PresentAction}}" slides-present-form>
    <button rst-btn="primary" type="submit">{{.PresentLabel}}</button>
  </form>
  {{/* The save line is estilo's savestatus (save_status.go): text,
       always, "Saved" at rest, and the bundle moves it through
       "Saving…", "Offline, retrying" and the dropped-batch line with
       estilo's own module. A slide that would not load is not a save
       state, so it is said in a line of its own beside it, from
       data-text-error above. Both are role="status": a change is read
       out without stealing focus. */}}
  {{template "estilo-save-status" .SaveStatus}}
  <span slides-load-error role="status" aria-live="polite" aria-atomic="true"></span>
  {{/* Presence's one announcement (spec §3.3): somebody arriving in
       the deck or leaving it, said once and politely. Where each of
       them IS shows on the strip and on the stage and is never spoken
       — a live region that followed a colleague's cursor would make
       the editor unusable with a screen reader. */}}
  <p slides-presence-live class="rst-sr-only" aria-live="polite" aria-atomic="true"></p>
</header>

{{/* One strip item, the shape the bundle clones for a slide it adds:
     the thumbnail (an <img> of the server's SVG — inert, because it is
     a picture of the slide and never a second copy of it in the tab
     order; the src is left empty here, because strip.mjs fills it once
     the slide exists on the server), the link that is the one control
     for opening it, and the item's own menu. The menu's five commands are
     the Slide section's, so a slide can be reordered, copied or
     removed from where it is listed; the drag handle is the item
     itself (draggable), with Alt+arrows and the menu as the keyboard's
     equivalents. */}}
<template slides-strip-item-template>
  <li slides-strip-item draggable="true">
    <div slides-thumb inert><img slides-thumb-img alt="" width="1920" height="1080"></div>
    <a slides-strip-link href="#">
      <span slides-strip-label></span>
      <span slides-strip-current>{{.CurrentLabel}}</span>
    </a>
    <details rst-dropdown slides-strip-menu name="rst-menus">
      <summary rst-btn="sm" aria-label="{{.L "strip.actions"}}"><span aria-hidden="true">{{icon "kebab"}}</span></summary>
      <div rst-dropdown-menu>
        <button type="button" data-slide-command="add-after">{{.L "slide.add"}}</button>
        <button type="button" data-slide-command="duplicate">{{.DuplicateLabel}}</button>
        <button type="button" data-slide-command="move-up">{{.L "slide.move.up"}}</button>
        <button type="button" data-slide-command="move-down">{{.L "slide.move.down"}}</button>
        <button type="button" data-slide-command="delete" class="rst-danger">{{.L "slide.delete"}}</button>
      </div>
    </details>
  </li>
</template>

<nav slides-strip-nav aria-label="{{.StripLabel}}">
  <p id="slides-strip-help" class="rst-sr-only">{{.L "strip.reorder"}}</p>
  <ol slides-strip aria-describedby="slides-strip-help">
    {{range .Strip}}
    <li slides-strip-item draggable="true" data-slide-id="{{.ID}}"{{if .Current}} data-current="true"{{end}}>
      <div slides-thumb inert><img slides-thumb-img src="{{.Thumb}}" alt="{{.Label}}" width="1920" height="1080" loading="lazy"></div>
      <a slides-strip-link href="#{{.ID}}"{{if .Current}} aria-current="true"{{end}}>
        <span slides-strip-label>{{.Label}}</span>
        <span slides-strip-current>{{$.CurrentLabel}}</span>
      </a>
      <details rst-dropdown slides-strip-menu name="rst-menus">
        <summary rst-btn="sm" aria-label="{{$.L "strip.actions"}}"><span aria-hidden="true">{{icon "kebab"}}</span></summary>
        <div rst-dropdown-menu>
          <button type="button" data-slide-command="add-after">{{$.L "slide.add"}}</button>
          <button type="button" data-slide-command="duplicate">{{$.DuplicateLabel}}</button>
          <button type="button" data-slide-command="move-up">{{$.L "slide.move.up"}}</button>
          <button type="button" data-slide-command="move-down">{{$.L "slide.move.down"}}</button>
          <button type="button" data-slide-command="delete" class="rst-danger">{{$.L "slide.delete"}}</button>
        </div>
      </details>
    </li>
    {{end}}
  </ol>
</nav>

<section slides-stage-pane aria-label="{{.StageLabel}}" data-view="desktop">
  {{/* The switcher (spec §3.2): three real radios with visible words.
       Which one is on decides where a layout edit lands — the desktop
       block, or its phone override map — so it is never an icon. */}}
  <div slides-stage-bar>
    <fieldset slides-switcher>
      <legend class="rst-sr-only">{{.L "view"}}</legend>
      <label><input type="radio" name="slides-view" value="desktop" checked> {{.L "view.desktop"}}</label>
      <label><input type="radio" name="slides-view" value="phone"> {{.L "view.phone"}}</label>
      <label><input type="radio" name="slides-view" value="both"> {{.L "view.both"}}</label>
    </fieldset>
    <label rst-switch slides-notes-toggle><input type="checkbox" name="slides-notes" checked><span rst-switch-track aria-hidden="true"></span> {{.L "slide.notes.show"}}</label>
  </div>
  {{/* The stage and the notes are always here, an empty deck's
       included: the bundle's New slide loads the first slide INTO
       [slides-stage], so the element has to exist before there is a
       slide to put in it. The empty state sits inside the stage and is
       replaced by the first slide's section. The phone stage beside it
       is the "both" view's read-only preview, empty until then. */}}
  <div slides-stages>
    <div slides-stage data-vp="desktop">{{if .HasSlides}}{{.Stage}}{{else}}<div rst-box slides-stage-empty>
      {{template "empty-state" dict "Title" .EmptyTitle "Body" .EmptyBody}}
    </div>{{end}}</div>
    <div slides-stage-phone role="region" aria-label="{{.L "view.phone.readonly"}}" hidden></div>
  </div>
  <section slides-notes-pane aria-labelledby="slides-notes-heading"{{if not .HasSlides}} hidden{{end}}>
    <h2 id="slides-notes-heading" slides-notes-heading>{{.NotesLabel}}</h2>
    <div slides-notes>{{.Notes}}</div>
  </section>
</section>

<details slides-inspector open>
  <summary>{{.InspectorLabel}}</summary>

  {{/* Deck: title, theme, accent, fonts — each control one set_meta. */}}
  <div rst-box-head><h2>{{.L "inspector.deck"}}</h2></div>
  <form rst-form rst-box slides-inspector-form data-section="deck">
    {{template "field-text" dict "Name" "rst-deck-title" "Label" (.L "deck.title") "Value" .Title}}
    {{template "field-select" dict "ID" "rst-deck-theme" "Name" "rst-deck-theme" "Label" (.L "deck.theme") "Options" .Themes "Plain" true}}
    <div rst-field>
      <label rst-field-label for="rst-deck-accent">{{.L "deck.accent"}}</label>
      <input rst-input="short" id="rst-deck-accent" name="rst-deck-accent" type="color">
    </div>
    <p><button rst-btn="sm" type="button" data-command="accent-reset">{{.L "deck.accent.reset"}}</button></p>
    <div rst-field-row>
      <div rst-field>
        <label rst-field-label for="rst-deck-font-heading">{{.L "deck.font.heading"}}</label>
        <select rst-input id="rst-deck-font-heading" name="rst-deck-font-heading">
          <option value="">{{.L "font.theme"}}</option>
          <option value="system-ui, sans-serif">{{.L "font.system"}}</option>
          <option value="Georgia, serif">{{.L "font.serif"}}</option>
          <option value="ui-monospace, monospace">{{.L "font.mono"}}</option>
        </select>
      </div>
      <div rst-field>
        <label rst-field-label for="rst-deck-font-body">{{.L "deck.font.body"}}</label>
        <select rst-input id="rst-deck-font-body" name="rst-deck-font-body">
          <option value="">{{.L "font.theme"}}</option>
          <option value="system-ui, sans-serif">{{.L "font.system"}}</option>
          <option value="Georgia, serif">{{.L "font.serif"}}</option>
          <option value="ui-monospace, monospace">{{.L "font.mono"}}</option>
        </select>
      </div>
    </div>
    {{/* Unused images (spec §2.7): the assets no image block on any
         slide refers to any more. Deleting the last block that used one
         leaves the registration behind on purpose — an undo has to be
         able to put the block back — so this is where a person clears
         them out. The bundle fills the list from the document on every
         change; each Remove is one remove_asset. */}}
    <fieldset slides-unused-assets>
      <legend>{{.L "assets.unused"}}</legend>
      <p rst-text-muted slides-unused-none>{{.L "assets.unused.none"}}</p>
      <ul slides-unused-list></ul>
    </fieldset>
  </form>

  {{/* Slide: layout, template, background, transition, phone
       behaviour, the structure commands, and the Blocks list a
       keyboard selects from. Hidden until there is a slide. */}}
  <div rst-box-head slides-when-slide{{if not .HasSlides}} hidden{{end}}><h2>{{.L "inspector.slide"}}</h2></div>
  <form rst-form rst-box slides-inspector-form data-section="slide" slides-when-slide{{if not .HasSlides}} hidden{{end}}>
    {{template "choice-field" dict "Legend" (.L "slide.layout") "Name" "rst-slide-layout" "Options" (list
      (dict "Value" "flow" "Title" (.L "layout.flow") "Desc" (.L "layout.flow.desc") "Checked" true)
      (dict "Value" "canvas" "Title" (.L "layout.canvas") "Desc" (.L "layout.canvas.desc")))}}
    <div rst-field data-layout="flow">
      <label rst-field-label for="rst-slide-template">{{.L "slide.template"}}</label>
      <select rst-input id="rst-slide-template" name="rst-slide-template">
        <option value="title">{{.L "template.title"}}</option>
        <option value="title-body">{{.L "template.title-body"}}</option>
        <option value="two-column">{{.L "template.two-column"}}</option>
        <option value="section">{{.L "template.section"}}</option>
        <option value="image-full">{{.L "template.image-full"}}</option>
        <option value="quote">{{.L "template.quote"}}</option>
        <option value="blank">{{.L "template.blank"}}</option>
      </select>
    </div>
    <div rst-field-row>
      <div rst-field>
        <label rst-field-label for="rst-slide-background">{{.L "slide.background"}}</label>
        <select rst-input id="rst-slide-background" name="rst-slide-background">
          <option value="theme">{{.L "background.theme"}}</option>
          <option value="color">{{.L "background.color"}}</option>
        </select>
      </div>
      <div rst-field data-background="color" hidden>
        <label rst-field-label for="rst-slide-background-color">{{.L "slide.background.color"}}</label>
        <input rst-input="short" id="rst-slide-background-color" name="rst-slide-background-color" type="color">
      </div>
    </div>
    <div rst-field>
      <label rst-field-label for="rst-slide-transition">{{.L "slide.transition"}}</label>
      <select rst-input id="rst-slide-transition" name="rst-slide-transition">
        <option value="none">{{.L "transition.none"}}</option>
        <option value="fade">{{.L "transition.fade"}}</option>
      </select>
    </div>
    <div rst-field data-layout="canvas" hidden>
      <label rst-field-label for="rst-slide-phone">{{.L "slide.phone"}}</label>
      <select rst-input id="rst-slide-phone" name="rst-slide-phone">
        <option value="inherit">{{.L "slide.phone.inherit"}}</option>
        <option value="reflow">{{.L "slide.phone.reflow"}}</option>
      </select>
    </div>
    <div slides-inspector-actions>
      <button rst-btn="sm" type="button" data-command="slide-move-up">{{.L "slide.move.up"}}</button>
      <button rst-btn="sm" type="button" data-command="slide-move-down">{{.L "slide.move.down"}}</button>
      <button rst-btn="sm" type="button" data-command="slide-add-after">{{.L "slide.add"}}</button>
      <button rst-btn="sm" type="button" data-command="duplicate-slide">{{.DuplicateLabel}}</button>
      <button rst-btn="sm" type="button" data-command="slide-delete-ask">{{.L "slide.delete"}}</button>
    </div>
    {{/* The delete confirm lives here, in the section, rather than in a
         window.confirm the catalog cannot word and a keyboard cannot
         always reach. */}}
    <div rst-callout rst-tone="warning" slides-confirm hidden>
      <div rst-callout-body>
        <p>{{.L "slide.delete.confirm"}}</p>
        <p slides-inspector-actions>
          <button rst-btn="danger sm" type="button" data-command="slide-delete">{{.L "slide.delete"}}</button>
          <button rst-btn="sm" type="button" data-command="slide-delete-cancel">{{.L "slide.delete.cancel"}}</button>
        </p>
      </div>
    </div>
    <fieldset slides-blocks-list>
      <legend>{{.L "inspector.blocks"}}</legend>
      <p rst-text-muted slides-blocks-none>{{.L "inspector.blocks.none"}}</p>
      <div slides-blocks-buttons role="group"></div>
    </fieldset>
    <details rst-dropdown slides-add-block name="rst-menus">
      <summary rst-btn="sm">{{.L "block.add"}} <span rst-caret aria-hidden="true">{{icon "chevron-down"}}</span></summary>
      <div rst-dropdown-menu>
        {{range .BlockTypes}}<button type="button" data-add-block="{{.}}">{{$.L (printf "type.%s" .)}}</button>
        {{end}}
      </div>
    </details>
  </form>

  {{/* Block: the selected block's props (each field marked with the
       types that have it), its placement (region on a flow slide, a
       box and layer on a canvas one), its order, and its phone layer.
       Hidden until a block is selected. */}}
  {{/* The heading is the slide's, not the selection's: with a slide on
       stage and nothing selected there is a Block section saying how to
       get one, rather than a section that has silently vanished. The
       bundle shows the line when a slide is on and no block is. */}}
  <div rst-box-head slides-when-slide{{if not .HasSlides}} hidden{{end}}><h2>{{.L "inspector.block"}} <span slides-block-type></span></h2></div>
  <p rst-text-muted slides-inspector-empty{{if .HasSlides}}{{else}} hidden{{end}}>{{.InspectorEmpty}}</p>
  <form rst-form rst-box slides-inspector-form data-section="block" slides-when-block hidden>
    <p slides-phone-badge hidden><span rst-status rst-tone="warning">{{.L "block.phone.override"}}</span>
      <button rst-btn="sm" type="button" data-command="phone-reset">{{.L "block.phone.reset"}}</button></p>
    <div rst-field data-types="heading">
      <label rst-field-label for="rst-block-level">{{.L "block.level"}}</label>
      <select rst-input="short" id="rst-block-level" name="rst-block-level" data-prop="level" data-kind="int">
        <option value="1">1</option><option value="2">2</option><option value="3">3</option>
      </select>
    </div>
    <div rst-field data-types="text list code">
      <label rst-field-label for="rst-block-size">{{.L "block.size"}}</label>
      <select rst-input="short" id="rst-block-size" name="rst-block-size" data-prop="size">
        <option value="s">{{.L "size.s"}}</option><option value="m">{{.L "size.m"}}</option><option value="l">{{.L "size.l"}}</option>
      </select>
    </div>
    <div rst-field data-types="text">
      <label rst-field-label for="rst-block-align">{{.L "block.align"}}</label>
      <select rst-input="short" id="rst-block-align" name="rst-block-align" data-prop="align">
        <option value="start">{{.L "align.start"}}</option><option value="center">{{.L "align.center"}}</option><option value="end">{{.L "align.end"}}</option>
      </select>
    </div>
    <div rst-field data-types="list">
      <label rst-field-label for="rst-block-style">{{.L "block.style"}}</label>
      <select rst-input="short" id="rst-block-style" name="rst-block-style" data-prop="style">
        <option value="bullet">{{.L "style.bullet"}}</option><option value="number">{{.L "style.number"}}</option>
      </select>
    </div>
    <div rst-field data-types="quote">
      <label rst-field-label for="rst-block-cite">{{.L "block.cite"}}</label>
      <input rst-input id="rst-block-cite" name="rst-block-cite" type="text" data-prop="cite">
    </div>
    {{/* The image's own upload (assets.go, spec §2.7). A real labelled
         file input, with the accept list the endpoint validates
         against; the hint is its description, so a screen reader hears
         the limits before the picker opens. The status line is text
         with role="status" — progress and every failure are read out
         and are never colour alone.

         With no object store bound the input is disabled and the
         no-store line replaces the hint. The page says so, rather than
         the bundle finding out from a 503 after somebody has chosen a
         file. */}}
    <div rst-field data-types="image">
      <label rst-field-label for="rst-block-image">{{.L "block.image.file"}}</label>
      <input rst-input id="rst-block-image" name="rst-block-image" type="file" slides-asset-input
        accept="{{.AcceptTypes}}" aria-describedby="slides-asset-hint"{{if not .HasStore}} disabled{{end}}>
      <p rst-field-hint id="slides-asset-hint">{{if .HasStore}}{{.L "block.image.hint"}}{{else}}{{.L "block.image.nostore"}}{{end}}</p>
      <p rst-text-muted slides-asset-status role="status" aria-live="polite"></p>
    </div>
    <div rst-field data-types="image">
      <label rst-field-label for="rst-block-fit">{{.L "block.fit"}}</label>
      <select rst-input="short" id="rst-block-fit" name="rst-block-fit" data-prop="fit">
        <option value="cover">{{.L "fit.cover"}}</option><option value="contain">{{.L "fit.contain"}}</option>
      </select>
    </div>
    <div rst-field data-types="image">
      <label rst-field-label for="rst-block-alt">{{.L "block.alt"}}</label>
      <input rst-input id="rst-block-alt" name="rst-block-alt" type="text" data-prop="alt">
    </div>
    <div rst-field data-types="image">
      <label rst-switch><input type="checkbox" name="rst-block-decorative" data-prop="decorative" data-kind="bool"><span rst-switch-track aria-hidden="true"></span> {{.L "block.decorative"}}</label>
    </div>
    <div rst-field data-types="image shape">
      <label rst-field-label for="rst-block-radius">{{.L "block.radius"}}</label>
      <input rst-input="short" id="rst-block-radius" name="rst-block-radius" type="number" min="0" max="50" step="1" data-prop="radius" data-kind="int">
    </div>
    <div rst-field data-types="columns">
      <label rst-field-label for="rst-block-count">{{.L "block.count"}}</label>
      <select rst-input="short" id="rst-block-count" name="rst-block-count" data-prop="count" data-kind="int">
        <option value="2">2</option><option value="3">3</option>
      </select>
    </div>
    <div rst-field data-types="code">
      <label rst-field-label for="rst-block-language">{{.L "block.language"}}</label>
      <input rst-input="short" id="rst-block-language" name="rst-block-language" type="text" data-prop="language">
    </div>
    <div rst-field data-types="shape">
      <label rst-field-label for="rst-block-kind">{{.L "block.kind"}}</label>
      <select rst-input="short" id="rst-block-kind" name="rst-block-kind" data-prop="kind">
        <option value="rect">{{.L "kind.rect"}}</option><option value="ellipse">{{.L "kind.ellipse"}}</option>
        <option value="line">{{.L "kind.line"}}</option><option value="arrow">{{.L "kind.arrow"}}</option>
      </select>
    </div>
    <div rst-field-row data-types="shape">
      <div rst-field>
        <label rst-field-label for="rst-block-fill">{{.L "block.fill"}}</label>
        <input rst-input="short" id="rst-block-fill" name="rst-block-fill" type="color" data-prop="fill">
      </div>
      <div rst-field>
        <label rst-field-label for="rst-block-stroke">{{.L "block.stroke"}}</label>
        <input rst-input="short" id="rst-block-stroke" name="rst-block-stroke" type="color" data-prop="stroke">
      </div>
      <div rst-field>
        <label rst-field-label for="rst-block-strokeWidth">{{.L "block.strokeWidth"}}</label>
        <input rst-input="short" id="rst-block-strokeWidth" name="rst-block-strokeWidth" type="number" min="0" max="50" step="1" data-prop="strokeWidth" data-kind="int">
      </div>
    </div>
    <div rst-field data-types="shape">
      <label rst-field-label for="rst-block-label">{{.L "block.label"}}</label>
      <input rst-input id="rst-block-label" name="rst-block-label" type="text" data-text="label">
    </div>
    <div rst-field-row data-types="table">
      <div rst-field>
        <label rst-field-label for="rst-block-rows">{{.L "block.rows"}}</label>
        <input rst-input="short" id="rst-block-rows" name="rst-block-rows" type="number" min="1" max="100" step="1" data-prop="rows" data-kind="int">
      </div>
      <div rst-field>
        <label rst-field-label for="rst-block-cols">{{.L "block.cols"}}</label>
        <input rst-input="short" id="rst-block-cols" name="rst-block-cols" type="number" min="1" max="100" step="1" data-prop="cols" data-kind="int">
      </div>
    </div>
    <div rst-field data-types="table">
      <label rst-switch><input type="checkbox" name="rst-block-header" data-prop="header" data-kind="bool"><span rst-switch-track aria-hidden="true"></span> {{.L "block.header"}}</label>
    </div>
    <div rst-field data-types="spacer">
      <label rst-field-label for="rst-block-spacer-size">{{.L "block.size"}}</label>
      <select rst-input="short" id="rst-block-spacer-size" name="rst-block-spacer-size" data-prop="size">
        <option value="s">{{.L "size.s"}}</option><option value="m">{{.L "size.m"}}</option><option value="l">{{.L "size.l"}}</option>
      </select>
    </div>
    <div rst-field data-layout="flow">
      <label rst-field-label for="rst-block-region">{{.L "block.region"}}</label>
      <select rst-input="short" id="rst-block-region" name="rst-block-region" data-place="region">
        <option value="heading">{{.L "region.heading"}}</option><option value="body">{{.L "region.body"}}</option>
        <option value="aside">{{.L "region.aside"}}</option><option value="media">{{.L "region.media"}}</option>
      </select>
    </div>
    <fieldset rst-field-range data-layout="canvas">
      <legend>{{.L "block.box"}}</legend>
      <div rst-field-row>
        <div rst-field>
          <label rst-field-label for="rst-block-x">{{.L "box.x"}}</label>
          <input rst-input="short" id="rst-block-x" name="rst-block-x" type="number" min="0" max="100" step="0.1" data-box="x">
        </div>
        <div rst-field>
          <label rst-field-label for="rst-block-y">{{.L "box.y"}}</label>
          <input rst-input="short" id="rst-block-y" name="rst-block-y" type="number" min="0" max="100" step="0.1" data-box="y">
        </div>
        <div rst-field>
          <label rst-field-label for="rst-block-w">{{.L "box.w"}}</label>
          <input rst-input="short" id="rst-block-w" name="rst-block-w" type="number" min="1" max="100" step="0.1" data-box="w">
        </div>
        <div rst-field>
          <label rst-field-label for="rst-block-h">{{.L "box.h"}}</label>
          <input rst-input="short" id="rst-block-h" name="rst-block-h" type="number" min="1" max="100" step="0.1" data-box="h">
        </div>
      </div>
    </fieldset>
    <div slides-inspector-actions data-layout="canvas">
      <button rst-btn="sm" type="button" data-command="block-forward">{{.L "block.forward"}}</button>
      <button rst-btn="sm" type="button" data-command="block-back">{{.L "block.back"}}</button>
    </div>
    <div slides-inspector-actions>
      <button rst-btn="sm" type="button" data-command="block-move-up">{{.L "block.move.up"}}</button>
      <button rst-btn="sm" type="button" data-command="block-move-down">{{.L "block.move.down"}}</button>
      <button rst-btn="sm" type="button" data-command="block-delete">{{.L "block.delete"}}</button>
    </div>
    <fieldset rst-field-range slides-phone-fields>
      <legend>{{.L "block.phone"}}</legend>
      <div rst-field>
        <label rst-switch><input type="checkbox" name="rst-block-phone-hidden" data-phone="hidden"><span rst-switch-track aria-hidden="true"></span> {{.L "block.phone.hidden"}}</label>
      </div>
      <div rst-field-row>
        <div rst-field>
          <label rst-field-label for="rst-block-phone-order">{{.L "block.phone.order"}}</label>
          <input rst-input="short" id="rst-block-phone-order" name="rst-block-phone-order" type="number" step="1" data-phone="order">
        </div>
        <div rst-field>
          <label rst-field-label for="rst-block-phone-size">{{.L "block.phone.size"}}</label>
          <select rst-input="short" id="rst-block-phone-size" name="rst-block-phone-size" data-phone="size">
            <option value="">{{.L "block.phone.same"}}</option>
            <option value="s">{{.L "size.s"}}</option><option value="m">{{.L "size.m"}}</option><option value="l">{{.L "size.l"}}</option>
          </select>
        </div>
      </div>
    </fieldset>
  </form>
</details>

{{/* The link dialog (Ctrl+K): a labelled field, three named buttons.
     A <dialog> rather than window.prompt because a prompt has no label
     the catalog controls and no way to remove a link. Closed until the
     bundle opens it. */}}
<dialog slides-link-dialog aria-labelledby="slides-link-title">
  <form method="dialog" rst-form>
    <h2 id="slides-link-title">{{.LinkTitle}}</h2>
    <div rst-field>
      <label rst-field-label for="slides-link-url">{{.LinkURLLabel}}</label>
      <input rst-input id="slides-link-url" name="href" type="url" inputmode="url" autocomplete="off" spellcheck="false">
    </div>
    <div rst-form-actions>
      <button rst-btn="primary" type="submit" value="insert">{{.LinkInsert}}</button>
      <button rst-btn type="submit" value="remove" formnovalidate>{{.LinkRemove}}</button>
      <button rst-btn type="submit" value="cancel" formnovalidate>{{.LinkCancel}}</button>
    </div>
  </form>
</dialog>
</div>
{{end}}