{# General-purpose server-loaded modal — native <dialog> element. #}
{# Contract: ~/.claude/skills/ux-architect/components/modal.md #}
{# Parameters: modal_id (str, default: 'dz-modal'), title (str), size (str: sm|md|lg|xl, default: md) #}
{# Usage: server returns this template via hx-get; caller triggers .showModal() on the element. #}
{# v0.62 CSS refactor: inline Tailwind → semantic .dz-modal-* family
   (components/fragments.css). Size moves to data-dz-modal-size attribute,
   close-button chrome shares the .dz-icon-button primitive from app_shell. #}
{% set modal_id = modal_id | default('dz-modal') %}
{% set size = size | default('md') %}
<dialog
  id="{{ modal_id }}"
  aria-labelledby="{{ modal_id }}-title"
  data-dz-modal-size="{{ size }}"
  class="dz-modal"
  x-data
  x-effect="document.body.style.overflow = $el.open ? 'hidden' : ''"
  @close="document.body.style.overflow = ''">
  <div class="dz-modal-panel">
    {% if title %}
    <div class="dz-modal-header">
      <h3 id="{{ modal_id }}-title" class="dz-modal-title">{{ title }}</h3>
      <form method="dialog" class="dz-modal-close-form">
        <button type="submit" aria-label="Close" class="dz-icon-button">
          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </form>
    </div>
    {% else %}
    {# No title — close button still present in top-right #}
    <form method="dialog" class="dz-modal-close-form-floating">
      <button type="submit" aria-label="Close" class="dz-icon-button">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </form>
    {% endif %}

    {# Body — caller fills this #}
    <div class="dz-modal-body">
      {% block modal_content %}
      {{ content | safe if content else '' }}
      {% endblock %}
    </div>
  </div>

  {# Backdrop click closes the dialog (native dialog semantics) #}
  <form method="dialog" class="dz-modal-backdrop-form">
    <button type="submit" class="dz-modal-backdrop-button" aria-label="Close">&nbsp;</button>
  </form>
</dialog>