{#- The card pin control's dialog (ADR-0014): ONE body-level form shared by
    every card-head control, opened by pin.js — the maintenance popover's
    machinery (Floating UI anchor, Escape / outside click, swap-safe) carrying a
    small form instead of a list. It lives outside #status-grid so the ~10s poll
    never swaps an open form out from under the admin — and pin.js re-anchors it
    to the replacement control after each swap, without touching the fields,
    because living outside the grid is only half of that promise. pin.js fills the
    path and picks the promise sentence for the clicked card (subtree vs leaf).
    `next` returns the admin to the page the dialog was opened on (validated
    server-side by _safe_next); the view query string rides along, so filters
    survive the round trip.

    On an **already-pinned** card the dialog opens in read mode: safe rendered
    Markdown, who last set it and until when, with explicit Edit and Clear
    actions. Edit reveals the raw prefilled source; extending a window is still
    an in-place set, never a clear and a re-set (ADR-0014 / ADR-0018 amendments).
    Duration or expiry stays unfilled: blank is the configured default everywhere.

    Both forms carry a `set_at` token that pin.js copies off the card's control —
    the write names the pin it believes it is replacing, and a mismatch is
    refused whole and answered by the conflict page. -#}
{% from '_maintenance_fields.html' import maintenance_fields with context %}
<div id="pin-card" class="maintenance-pop pin-card" role="dialog" aria-label="set maintenance" hidden>
    <h3 class="pin-card__title h6 mb-1">Maintenance — <span id="pin-card-name"></span></h3>
    <p class="pin-card__path text-muted mb-2" id="pin-card-path"></p>
    <div id="pin-card-read" hidden>
        <p class="pin-card__pinned mb-2" id="pin-card-pinned">Pinned<span id="pin-card-by"></span><span id="pin-card-expires"></span>.</p>
        <div class="maintenance-explanation md-body mb-2" id="pin-card-reason" hidden></div>
        <div class="pin-card__actions">
            <button class="btn btn-primary btn-sm" type="button"
                    id="pin-card-edit">Edit maintenance</button>
            <form method="post" action="{{ url_for('maintenance') }}">
                <input type="hidden" name="path" id="pin-card-clear-input">
                <input type="hidden" name="action" value="clear">
                <input type="hidden" name="set_at" id="pin-card-clear-token">
                <input type="hidden" name="next" value="{{ request.full_path }}">
                <button class="btn btn-outline-secondary btn-sm" type="submit">Clear maintenance</button>
            </form>
        </div>
    </div>
    <div id="pin-card-set" hidden>
        <p class="pin-card__promise mb-2" data-variant="branch" hidden>Silences this node and
            everything beneath it: nothing under here will alarm before the pin expires. Its
            checks keep running — their colors stay visible on the card — and count again
            when the pin clears.</p>
        <p class="pin-card__promise mb-2" data-variant="leaf" hidden>Silences this node: it
            will not alarm before the pin expires. The check keeps running and counts again
            when the pin clears.</p>
        <form method="post" action="{{ url_for('maintenance') }}">
            <input type="hidden" name="path" id="pin-card-input">
            <input type="hidden" name="action" value="set">
            <input type="hidden" name="set_at" id="pin-card-token">
            <input type="hidden" name="next" value="{{ request.full_path }}">
            {{ maintenance_fields('', '', 'pin', maintenance_default,
                                  maintenance_timezone, true) }}
            <div class="maintenance-editor-form__actions">
                <button class="btn btn-primary btn-sm" type="submit"
                        id="pin-card-submit">Set maintenance</button>
                <button class="btn btn-link btn-sm" type="button"
                        id="pin-card-cancel">Cancel</button>
            </div>
        </form>
    </div>
</div>
<script src="{{ url_for('static', filename='js/pin.js') }}"></script>