{#
  Confirm gate rendered as a real modal <dialog> (not a toast): a blocking,
  focus-trapping prompt the user must act on. On the htmx path it renders
  closed and app.js calls dialog.showModal() after the swap; the no-JS
  full-page fallback has no JS to open it, so it renders ``open`` (visible
  inline) when ``is_htmx`` is false. Submitting posts stage=execute and
  *appends* the result toast to #toast-stack (so it coexists with other
  in-flight results); app.js closes this dialog on beforeSend and clears
  #action-slot on afterRequest, so the modal never lingers.
#}
<dialog class="modal confirm-modal" id="action-confirm" aria-labelledby="confirm-title"
        data-action-label="{{ action_label }}" {% if not is_htmx %}open{% endif %}>
  <div class="modal-card">
    <h3 id="confirm-title">Confirm: {{ action_label }}</h3>
    <p>Target: <code>{{ target }}</code></p>
    <p>{{ summary }}</p>
    {% if warning %}
    <p class="notice notice-warn" role="alert">{{ warning }}</p>
    {% endif %}
    <form method="post" action="{{ action_url }}" hx-post="{{ action_url }}"
          hx-target="#toast-stack" hx-swap="beforeend">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <input type="hidden" name="stage" value="execute">
      {% for key, value in extra_fields.items() %}
      <input type="hidden" name="{{ key }}" value="{{ value }}">
      {% endfor %}
      <div class="modal-actions">
        <button type="button" class="btn" data-modal-cancel
                aria-label="Cancel: {{ action_label }}">Cancel</button>
        <button type="submit" class="btn btn-primary"
                aria-label="Confirm: {{ action_label }}">Confirm</button>
      </div>
    </form>
  </div>
</dialog>