<div id="modal-slot">
  <div class="fixed inset-0 z-[80] bg-black opacity-75 backdrop-blur-sm cursor-pointer"
       hx-get="/api/htmx/auth/close"
       hx-target="#modal-slot"
       hx-swap="outerHTML"
       aria-hidden="true"></div>
  <div class="fixed inset-0 z-[85] flex items-center justify-center p-4 pointer-events-none">
    <div role="dialog"
         aria-modal="true"
         aria-labelledby="login-modal-title"
         class="relative w-full max-w-md bg-base-100 rounded-2xl shadow-xl p-8 pointer-events-auto">
      <div class="flex justify-between items-center mb-6">
        <h2 id="login-modal-title" class="text-xl font-semibold ds-text">{{ title }}</h2>
        <button type="button"
                class="absolute top-4 right-4 btn btn-ghost btn-sm btn-circle"
                hx-get="/api/htmx/auth/close"
                hx-target="#modal-slot"
                hx-swap="outerHTML"
                aria-label="{{ close_label }}"
                title="{{ close_label }}">✕</button>
      </div>
      {{ form_html | safe }}
    </div>
  </div>
</div>
