{# Macro modal — dialog accesible
   Uso:
     {% from "dg/components/modal.html" import modal_open %}
     <button type="button" onclick="openModal('my-modal')">Abrir</button>
     {% call modal_open(id="my-modal", title="Título del modal") %}
       <p>Contenido del modal</p>
     {% endcall %}

   Depende de window.openModal/closeModal definidos en static/js/htmx-events.js.
#}

{% macro modal_open(id, title, size="md") %}
{%- set _max = "max-w-md" if size == "sm" else ("max-w-2xl" if size == "lg" else "max-w-lg") -%}
<div id="{{ id }}"
     role="dialog"
     aria-modal="true"
     aria-labelledby="{{ id }}-title"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
     style="background: rgba(0,0,0,0.45);"
     onclick="if(event.target===this) closeModal('{{ id }}')">
  <div class="bg-panel rounded-xl shadow-modal w-full {{ _max }} overflow-hidden"
       onclick="event.stopPropagation()">
    <div class="flex items-center justify-between px-6 py-4 border-b border-border">
      <h2 id="{{ id }}-title" class="text-base font-semibold text-fg">{{ title }}</h2>
      <button type="button"
              class="btn-icon text-fg-muted hover:text-fg-muted"
              aria-label="Cerrar modal"
              onclick="closeModal('{{ id }}')">
        <svg xmlns="http://www.w3.org/2000/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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="px-6 py-5">
      {{ caller() }}
    </div>
  </div>
</div>
{%- endmacro %}