{{/* report-sheet — "Report a problem" (spec §15.26, 2026-10-03): a
     modal <dialog> that report.js opens, from the room (More, Devices,
     and the words saying the call is over) and from the holding screen
     for ten minutes after leaving. The browser's own modal brings the
     focus trap, Escape and the inert page behind it.

     Script only, like the call itself: it is never open without script,
     and a closed <dialog> renders nothing.

     The note is the vendored field envelope written out rather than
     called, as chat's is: ui's field-textarea has no Maxlength key, and
     the server takes a thousand characters. The hint under it is the
     count left, and is named in aria-describedby with the sentence
     saying what is sent, so both are read with the field.

     data-calls-version is the server's build, the version a web report
     carries (protocol.ReportClient), where the page has it. */}}
{{define "report-sheet"}}<dialog id="report-sheet" class="calls-report" aria-labelledby="report-title"{{with .Version}} data-calls-version="{{.}}"{{end}}>
  <form id="report-form" class="calls-report-form" novalidate>
    <h2 id="report-title" class="calls-report-title">Report a problem</h2>
    <div id="report-ask" class="calls-report-part">
      <div rst-field>
        <label rst-field-label for="report-note">What went wrong?</label>
        <textarea rst-textarea id="report-note" name="note" rows="4" maxlength="1000" aria-describedby="report-note-hint report-disclosure"></textarea>
        <small rst-field-hint id="report-note-hint">Optional. Up to 1,000 characters.</small>
      </div>
      <p id="report-disclosure" class="calls-report-disclosure">Sends this call’s connection diagnostics to the Calls server log. No audio or video.</p>
      <p id="report-error" class="calls-report-error" role="alert" hidden></p>
      <div class="calls-report-actions">
        <button type="button" id="report-cancel" rst-btn>Cancel</button>
        <button type="submit" id="report-send" rst-btn="primary">Send</button>
      </div>
    </div>
    <div id="report-done" class="calls-report-part" hidden>
      {{/* Focused when it appears, so the thanks and the reference are
           read together. */}}
      <div id="report-done-title" class="calls-report-done" tabindex="-1">
        <p class="calls-report-thanks">Sent — thank you</p>
        <p class="calls-report-reference">Reference <strong id="report-ref" class="calls-report-ref"></strong></p>
      </div>
      <p id="report-copied" class="calls-report-copied" role="status"></p>
      <div class="calls-report-actions">
        <button type="button" id="report-copy" rst-btn>Copy reference</button>
        <button type="button" id="report-close" rst-btn="primary">Close</button>
      </div>
    </div>
  </form>
</dialog>{{end}}