{#
  Modal for an action. Rendered into #tw-modal (#tw-modal-1, #tw-modal-2 for modals opened from a modal).
  vars: m (modal view data), form (optional Form), hidden (dict of hidden inputs), records (list of keys)
#}
{% import "tungsten/components/ui.html" as ui %}
{% set widths = {'sm': 'max-w-sm', 'md': 'max-w-md', 'lg': 'max-w-lg', 'xl': 'max-w-xl', '2xl': 'max-w-2xl', '3xl': 'max-w-3xl', '4xl': 'max-w-4xl', '5xl': 'max-w-5xl'} %}
{% set level = m.level or 0 %}
{% set target = m.target or '#tw-modal' %}
{% set close = "open = false; $nextTick(() => { const box = document.querySelector('" ~ target ~ "'); box && (box.innerHTML = ''); })" %}
<div x-data="{ open: true }" x-show="open" x-init="$nextTick(() => { const f = $el.querySelector('input:not([type=hidden]),select,textarea'); f && f.focus(); })"
     @keydown.escape.window="if (document.querySelector('#tw-modal-{{ level + 1 }}')?.childElementCount) return; {{ close }}"
     @tw-close-modal.window="if ($event.detail && $event.detail.from !== undefined && $event.detail.from > {{ level }}) return; {{ close }}"
     class="fixed inset-0 z-50 flex {{ 'justify-end' if m.slide_over else 'items-end justify-center p-4 sm:items-center' }}" {% if level %}style="z-index: {{ 50 + level * 10 }}"{% endif %} role="dialog" aria-modal="true">
  <div class="fixed inset-0 bg-gray-950/50 backdrop-blur-[1px] dark:bg-gray-950/75" @click="{{ close }}"></div>
  <form class="relative flex max-h-full w-full {{ widths.get(m.width, 'max-w-lg') }} flex-col {{ 'h-full rounded-none' if m.slide_over else 'rounded-2xl' }} bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10"
        hx-post="{{ m.endpoint }}" hx-target="{{ target }}" hx-swap="innerHTML" {% if m.multipart %}hx-encoding="multipart/form-data"{% endif %}>
    {% for key, value in hidden.items() %}<input type="hidden" name="{{ key }}" value="{{ value if value is not none else '' }}">{% endfor %}
    {% for key in records %}<input type="hidden" name="records" value="{{ key }}">{% endfor %}
    <button type="button" class="absolute end-3 top-3 tw-icon-btn text-gray-400" @click="{{ close }}" aria-label="{{ __('Close') }}">{{ icon('x', 'h-5 w-5') }}</button>
    {% set footer %}
    {# submit comes first in the markup so Enter runs the main action; flex-row-reverse keeps it on the right #}
    <div class="flex flex-row-reverse flex-wrap {{ 'justify-center' if m.confirm_only else 'justify-start border-t border-gray-100 dark:border-white/10' }} gap-3 px-6 py-4">
      {% if m.submit_label %}
      <button type="submit" class="{{ ui.button_classes(m.color) }} {{ 'flex-1' if m.confirm_only }}">
        <svg class="htmx-indicator h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity=".25"/><path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3"/></svg>
        {{ m.submit_label }}
      </button>
      {% endif %}
      {% if m.create_another_label %}
      <button type="submit" name="_tw_another" value="1" class="{{ ui.button_classes('gray') }}">{{ m.create_another_label }}</button>
      {% endif %}
      {% for s in (m.footer.submits if m.footer else []) %}
      <button type="submit" name="_tw_submit" value="{{ s.name }}" class="{{ ui.button_classes(s.color) }}">{{ s.label }}</button>
      {% endfor %}
      <button type="button" class="{{ ui.button_classes('gray') }} {{ 'flex-1' if m.confirm_only }}" @click="{{ close }}">{{ m.cancel_label }}</button>
      {% for a in (m.footer.actions if m.footer else []) %}
      {% include "tungsten/actions/button.html" %}
      {% endfor %}
    </div>
    {% endset %}
    {% if m.confirm_only %}
    <div class="flex flex-col items-center px-6 pb-2 pt-8 text-center">
      {% if m.icon %}<span class="mb-4 flex h-12 w-12 items-center justify-center rounded-full {{ colors.pick(colors.SOFT_ICON, m.icon_color) }}">{{ icon(m.icon, 'h-6 w-6') }}</span>{% endif %}
      <h2 class="text-lg font-semibold text-gray-950 dark:text-white">{{ m.heading }}</h2>
      {% if m.description %}<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ m.description }}</p>{% endif %}
      {% if m.content %}<div class="mt-3 w-full text-start">{{ m.content }}</div>{% endif %}
    </div>
    {{ footer }}
    {% else %}
    {% set header %}
    <div class="flex items-start gap-x-4 border-b border-gray-100 px-6 py-4 pe-12 dark:border-white/10">
      {% if m.icon %}<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full {{ colors.pick(colors.SOFT_ICON, m.icon_color) }}">{{ icon(m.icon, 'h-5 w-5') }}</span>{% endif %}
      <div>
        <h2 class="text-lg font-semibold text-gray-950 dark:text-white">{{ m.heading }}</h2>
        {% if m.description %}<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ m.description }}</p>{% endif %}
      </div>
    </div>
    {% endset %}
    {% if m.sticky_header is not sameas false %}{{ header }}{% endif %}
    <div class="flex-1 overflow-y-auto">
      {% if m.sticky_header is sameas false %}{{ header }}{% endif %}
      <div class="px-6 py-5">
        {% if m.content %}<div class="mb-4">{{ m.content }}</div>{% endif %}
        {% if form %}{{ form.render() }}{% endif %}
      </div>
      {% if m.sticky_footer is sameas false %}{{ footer }}{% endif %}
    </div>
    {% if m.sticky_footer is not sameas false %}{{ footer }}{% endif %}
    {% endif %}
  </form>
</div>