{{/* The share screen. Scriptless throughout, per spec §6.2, which lists
     sharing among the working form posts: two plain <form>s, no token
     field (csrf.Protect reads Sec-Fetch-Site and falls back to Origin),
     and a 303 back here afterwards so a reload never re-posts.

     Bare attributes rather than the class vocabulary, per
     TestOurTemplatesUseTheAttributeGrammar — which greps raw bytes, so
     even naming that spelling in a comment fails it. This comment used
     to, and did.

     Each row's revoke is its own <form>, not a link: revoking is a
     mutation and a GET that changes state is one a prefetcher can fire.
     That is also why the address rides a hidden field rather than the
     URL — the row already names it in text, and a URL is copied,
     logged and pasted in a way a form body is not. */}}
{{define "content"}}<style>
  /* The share page on the design system's own vocabulary: fields, option
     cards, list rows and buttons. It was the audit's worst Docs finding —
     browser-default buttons, a bare fieldset, a bulleted list of grants,
     and a one-time link printed as <code> with no way to copy it. */
  [docs-share] {
    display: flex;
    flex-direction: column;
    gap: var(--rst-sp-5);
    max-inline-size: 44rem;
  }
  [docs-share] > [rst-page-header] {
    margin-block-end: 0;
  }
  [docs-share-list] [rst-row] {
    gap: var(--rst-sp-3);
  }
  [docs-share-who] {
    overflow-wrap: anywhere;
  }
  [docs-share-role] {
    flex: none;
    font-size: var(--rst-fs-sm);
  }
  [docs-share-list] form {
    flex: none;
    margin: 0;
  }
  [docs-share-public] {
    display: flex;
    flex-direction: column;
    gap: var(--rst-sp-3);
    padding-block-start: var(--rst-sp-5);
    border-block-start: 1px solid var(--rst-line);
  }
  [docs-share-public] h2,
  [docs-share-public] p {
    margin: 0;
  }
  [docs-share-url] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rst-sp-2);
  }
  [docs-share-url-input] {
    flex: 1 1 16rem;
    min-inline-size: 0;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: var(--rst-fs-sm);
  }
  /* Read-only, but a tap still focuses it (to select the link), and iOS
     zooms into anything under 16px: tokens.css's touch rule, restated at
     this selector's weight (TestNoZoomOnTap). */
  @media (pointer: coarse) {
    [docs-share-url-input] {
      font-size: max(1rem, 1em);
    }
  }
  /* The Copy button ships hidden until share-link.mjs mounts it, and
     [rst-btn]'s display: inline-flex beats the user agent's [hidden], so
     without this rule it showed with no script and did nothing. */
  [docs-share-copy][hidden] {
    display: none;
  }
  [docs-share-copy-status] {
    margin: 0;
    color: var(--rst-text-muted);
    font-size: var(--rst-fs-sm);
  }
  [docs-share-actions] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rst-sp-2);
  }
  [docs-share-actions] form {
    margin: 0;
  }
</style>
<article rst-stack docs-share>
  <header rst-page-header>
    <div rst-page-header-titles>
      <h1>{{.Heading}}</h1>
      <p rst-muted>{{.DocTitle}}</p>
    </div>
    <a rst-btn="ghost" href="/d/{{.Sqid}}">{{.BackLabel}}</a>
  </header>

  {{if .Error}}{{template "callout" (dict "Body" .Error "Tone" "negative" "Alert" true)}}{{end}}

  {{/* Who reaches it today. An empty list says so in words rather than
       rendering an empty table, because a table with no rows reads as a
       thing that failed to load.

       Each row's revoke is its own <form>, not a link: revoking is a
       mutation and a GET that changes state is one a prefetcher can fire.
       That is also why the address rides a hidden field rather than the
       URL. */}}
  {{if .Grants}}
  <div rst-list docs-share-list>
    {{range .Grants}}
    <div rst-row>
      <span rst-row-main><span docs-share-who>{{.Address}}</span></span>
      <span rst-muted docs-share-role>{{.Role}}</span>
      <form method="post" action="/d/{{$.Sqid}}/share/revoke">
        <input type="hidden" name="address" value="{{.Address}}">
        <button rst-btn="ghost" type="submit">{{$.RevokeButton}}</button>
      </form>
    </div>
    {{end}}
  </div>
  {{else}}
  <p rst-muted>{{.EmptyBody}}</p>
  {{end}}

  {{/* Adding somebody. The role is a pair of option cards rather than a
       select so both are visible without opening anything. Reader is
       checked by default: the safer of the two is the one a person gets
       by not choosing. Scriptless, per spec §6.2: a plain POST, and a 303
       back here afterwards so a reload never re-posts. */}}
  <form rst-form method="post" action="/d/{{.Sqid}}/share" docs-share-form>
    {{template "field" (dict "ID" "share-address" "Name" "address" "Type" "email" "Label" .AddressLabel "Autocomplete" "email" "Required" true)}}
    {{template "choice-field" (dict "Legend" .RoleLabel "Name" "role" "Options" .RoleChoices)}}
    <div rst-form-foot><button rst-btn="primary" type="submit">{{.ShareButton}}</button></div>
  </form>

  {{/* The third rung: a read-only link anyone can follow, signed in or
       not. One <form> whichever way the switch currently points, with the
       direction in a hidden field — so a page left open in a tab cannot
       turn publishing back on from a button that still says "off".

       The link appears only in the render that follows the publish that
       minted it — the database holds a SHA-256 and cannot produce a URL
       (suite ruling 16). It is a read-only field rather than a link: it
       is meant to be copied into a message, not followed from here. The
       Copy button is fixtures/share-link.mjs's, hidden until that script
       runs; without it the field selects on focus for a manual copy. */}}
  <section docs-share-public>
    <h2>{{.PublicHeading}}</h2>
    <p rst-muted>{{.PublicBody}}</p>
    {{if .Published}}
    {{if .PublicURL}}
    <div docs-share-once role="status">{{template "callout" (dict "Body" .OnceWarning "Tone" "warning")}}</div>
    <div docs-share-url>
      <input rst-input docs-share-url-input type="text" readonly value="{{.PublicURL}}" aria-label="{{.URLLabel}}">
      <button rst-btn="primary" type="button" docs-share-copy data-copied="{{.CopiedLabel}}" hidden>{{.CopyButton}}</button>
    </div>
    <p docs-share-copy-status role="status"></p>
    {{else}}
    <p rst-muted docs-share-state>{{.PublishedBody}}</p>
    {{end}}
    <p rst-muted>{{.CopyHint}}</p>
    <div docs-share-actions>
      <form method="post" action="/d/{{.Sqid}}/share/link">
        <input type="hidden" name="on" value="1">
        <button rst-btn type="submit">{{.ReplaceButton}}</button>
      </form>
      <form method="post" action="/d/{{.Sqid}}/share/link">
        <input type="hidden" name="on" value="0">
        <button rst-btn="ghost" type="submit">{{.UnpublishBtn}}</button>
      </form>
    </div>
    {{else}}
    <div docs-share-actions>
      <form method="post" action="/d/{{.Sqid}}/share/link">
        <input type="hidden" name="on" value="1">
        <button rst-btn="primary" type="submit">{{.PublishButton}}</button>
      </form>
    </div>
    {{end}}
  </section>
</article>
<script type="module" defer src="{{.ShareScript}}"></script>
{{end}}