<dialog id="body_modal" class="modal">
  <div
    class="modal-box relative rounded-none border-2 border-neutral bg-base-100 shadow-[8px_8px_0_0_#000] p-6 {% block modal_class %}max-w-lg{% endblock %}">
    
    <!-- Close control (always visible; does not depend on form submit/cancel) -->
    <button type="button" 
            class="btn btn-sm btn-square btn-ghost absolute right-2 top-2 z-10" 
            hx-on:click="document.getElementById('body_modal').close()"
            aria-label="Close modal">
      {% include "icons/x_icon.html" %}
    </button>

    {# Default: one outer #modal_form. Modals with multiple forms (scratchpad editor)
       override modal_form_open / modal_form_close — nested <form> is invalid HTML. #}
    {% block modal_form_open %}<form id="modal_form" hx-on::after-request="if(event.detail.successful && event.detail.elt === event.currentTarget) document.getElementById('body_modal').close()" {% block form_attributes %}{% endblock %}>{% endblock %}
      <div class="flex flex-col flex-1 gap-5">
        {% block modal_content %}{% endblock %}
      </div>

      <div class="mt-8 pt-2 flex flex-col gap-2 sm:flex-row sm:justify-end sm:items-center">
        <!-- Dismiss without submitting -->
        <button type="button" class="btn btn-ghost rounded-none w-full sm:w-auto hover:bg-neutral/10" hx-on:click="document.getElementById('body_modal').close()">
          Cancel
        </button>

        <!-- Primary actions block -->
        {% block primary_actions %}{% endblock %}
      </div>
    {% block modal_form_close %}</form>{% endblock %}
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>