{#- The clipboard controls: the two buttons, the live region that reports what
    happened, the no-JavaScript escape hatch and the rich-HTML payload.

    **One partial, so one pair of buttons.** `/copy` hands over the tree and a
    leaf's detail page hands over one node, but a reader has to learn the pair
    once: the same two labels, in the same order, doing the same two things
    wherever they appear. Two copies of this markup is how "Copy rich text" on
    one page and something else on the other happens.

    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) and `copy_html_text` (the
    same document rendered by the hardened renderer, as a string). `copy_preview`
    additionally renders the document above the source, which is `/copy`'s whole
    page and would be noise on a detail page that already shows the node.

    `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>

    {% if copy_preview | default(false) %}
    <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>
    {% endif %}

    {# 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>