{# Macro modal — diálogo del design system sobre <dialog> nativo.

   Uso (declarativo):
     {% from "core/components/modal.html" import modal %}
     {% call modal("mi-modal", title="Editar registro") %}
       ...contenido...
     {% endcall %}
     <button class="btn btn-primary" onclick="openModal('mi-modal')">Abrir</button>

   `openModal(id)` / `closeModal(id)` viven en htmx-events.js. El
   <dialog> nativo aporta gratis: focus trap, cierre con Escape y
   ::backdrop (estilado como .dg-dialog en el CSS del paquete).

   Para CONFIRMACIONES de acciones destructivas no declares un modal:
   usa `hx-confirm="¿Seguro?"` en el elemento HTMX (el shell lo
   intercepta y pinta este mismo diálogo), o `dgConfirm(mensaje, opts)`
   desde JS, que devuelve Promise<boolean>:

     const ok = await dgConfirm("¿Borrar este registro?", { danger: true });
     if (!ok) return;
#}

{% macro modal(id, title="", max_width="max-w-lg") %}
<dialog id="{{ id }}" class="dg-dialog hidden w-full {{ max_width }}"
        aria-labelledby="{{ id }}-title">
  <div class="flex items-start justify-between gap-4 mb-4">
    <h2 id="{{ id }}-title" class="text-base font-semibold text-fg">{{ title }}</h2>
    <button type="button" class="btn-icon text-fg-muted hover:bg-surface-subtle"
            aria-label="Cerrar" onclick="closeModal('{{ id }}')">
      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 6 6 18M6 6l12 12"/>
      </svg>
    </button>
  </div>
  {{ caller() if caller else "" }}
</dialog>
{%- endmacro %}