{# 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>

   Anatomía: cabecera (tile opcional + título + subtítulo + cerrar), cuerpo
   con scroll propio y, si el contenido lo trae, pie tintado.

     icon      → nombre del registro de iconos; pinta un icon_tile en la cabecera.
     tone      → tono del tile (neutral | brand | action | success | warning | danger | info).
     subtitle  → línea bajo el título; el diálogo la usa como descripción accesible.
     wrap_body → true (por defecto): el contenido va dentro de .dg-dialog-body.
                 false: el contenido trae sus propias secciones, para que el pie
                 quede fijo fuera del scroll y dentro del <form>:

       {% call modal("alta", title="Añadir usuario", icon="user-plus", tone="brand",
                     subtitle="Decide qué carpetas verá.", wrap_body=false) %}
       <form method="post" class="dg-dialog-form">
         <div class="dg-dialog-body">…campos…</div>
         <div class="dg-dialog-foot">
           <button type="button" class="btn-ghost" onclick="closeModal('alta')">Cancelar</button>
           <button type="submit" class="btn-primary">Añadir</button>
         </div>
       </form>
       {% endcall %}

   `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 la misma anatomía), o `dgConfirm(mensaje, opts)`
   desde JS, que devuelve Promise<boolean>:

     const ok = await dgConfirm("¿Borrar este registro?", { danger: true });
     if (!ok) return;
#}
{% from "core/components/icon.html" import icon as _icon, icon_tile as _icon_tile %}

{% macro modal(id, title="", max_width="max-w-lg", icon=none, tone="neutral", subtitle="", wrap_body=true) %}
<dialog id="{{ id }}" class="dg-dialog dg-dialog-flush hidden w-full {{ max_width }}"
        aria-labelledby="{{ id }}-title"{% if subtitle %} aria-describedby="{{ id }}-subtitle"{% endif %}>
  <div class="dg-dialog-head">
    {%- if icon %}
    {{ _icon_tile(icon, tone=tone) }}
    {%- endif %}
    <div class="dg-dialog-titles">
      <h2 id="{{ id }}-title" class="dg-dialog-title">{{ title }}</h2>
      {%- if subtitle %}
      <p id="{{ id }}-subtitle" class="dg-dialog-subtitle">{{ subtitle }}</p>
      {%- endif %}
    </div>
    <button type="button" class="btn-icon dg-dialog-close" aria-label="Cerrar" onclick="closeModal('{{ id }}')">
      {{ _icon("x") }}
    </button>
  </div>
  {%- if wrap_body %}
  <div class="dg-dialog-body">
    {{ caller() if caller else "" }}
  </div>
  {%- else %}
  {{ caller() if caller else "" }}
  {%- endif %}
</dialog>
{%- endmacro %}