{#- The Copy page's controls: the two buttons, the live region that reports what
    happened, the document as it will be pasted, the no-JavaScript escape hatch
    and the rich-HTML payload.

    **One pair of buttons, on one page.** Every document — the tree's, a node's,
    a line's — is offered here, on its Copy page, so a reader learns the pair
    once: the same two labels, in the same order, doing the same two things. No
    other page carries them (ADR-0115 decision 7).

    The labels say what the clipboard actually receives. **Copy Rich HTML** writes
    a `text/html` member (with the Markdown as its `text/plain` fallback) — never
    RTF, which is what "rich text" claims — and **Copy Markdown** writes the
    Markdown alone.

    Context: `copy_markdown` (the canonical document), `copy_html` (the same
    document rendered by the hardened renderer, which the preview shows) and
    `copy_html_text` (that rendering as a string, which the payload carries).

    `copy.js` binds to the ids below and is event-delegated on this container, so
    it needs no per-page wiring beyond the script tag. -#}
<div id="ls-copy-page">
    <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
        <button class="btn btn-primary" type="button" data-copy-format="markdown">
            Copy Markdown
        </button>
        <button class="btn btn-outline-secondary" type="button" data-copy-format="rich">
            Copy Rich HTML
        </button>
        <span id="ls-copy-status" class="small" role="status"
              aria-live="polite" aria-atomic="true"></span>
    </div>

    <section class="card mb-3" aria-labelledby="ls-copy-preview-heading">
        <div class="card-body">
            <h2 class="h6 text-muted text-uppercase" id="ls-copy-preview-heading">
                Preview
            </h2>
            <div class="md-body ls-copy__preview">{{ copy_html }}</div>
        </div>
    </section>

    {# A no-JavaScript and permission-denied escape hatch. It is real page
        content rather than a hidden clipboard staging node, so a user can
        always select the exact Markdown by hand. #}
    <details class="mb-3" id="ls-copy-source-details">
        <summary>Markdown source</summary>
        <label class="visually-hidden" for="ls-copy-source">Markdown status snapshot</label>
        <textarea class="form-control font-monospace mt-2" id="ls-copy-source"
                  rows="12" readonly spellcheck="false">{{ copy_markdown }}</textarea>
    </details>

    {# JSON encoding protects the script boundary (`<` becomes `\u003c`). The
        preview above is already safe Markup from the hardened renderer; this
        is the same byte string for ClipboardItem's text/html member. #}
    <script type="application/json" id="ls-copy-html">{{ copy_html_text | tojson }}</script>
</div>