{# Macro modal — dialog accesible via <dialog> nativo
   Uso:
     {% from "core/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.
   El elemento nativo <dialog> provee focus trap e inert automático en el resto.
#}

{% macro modal_open(id, title, size="md") %}
{%- set _max = "sm:max-w-md" if size == "sm" else ("sm:max-w-2xl" if size == "lg" else "sm:max-w-lg") -%}
<dialog id="{{ id }}"
        aria-labelledby="{{ id }}-title"
        class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-transparent"
        style="max-width:none; max-height:none; width:100%; height:100%; padding:0; border:none; background:transparent;"
        onclick="if(event.target===this) closeModal('{{ id }}')">
  <div class="bg-black/50 fixed inset-0 -z-10" aria-hidden="true"></div>
  <div class="bg-panel rounded-xl shadow-modal w-[calc(100vw-2rem)] {{ _max }} overflow-hidden"
       onclick="event.stopPropagation()">
    <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-border">
      <h2 id="{{ id }}-title" class="text-base font-semibold text-fg">{{ title }}</h2>
      <button type="button"
              class="inline-flex items-center justify-center min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 sm:w-8 sm:h-8 rounded-md text-fg-muted hover:text-fg hover:bg-surface-subtle transition-colors"
              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-4 sm:px-6 py-4 sm:py-5">
      {{ caller() }}
    </div>
  </div>
</dialog>
{%- endmacro %}