{#
  Modal for an action. Rendered into #tw-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'} %}
<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="open = false; $nextTick(() => $el.parentElement.innerHTML = '')"
     @tw-close-modal.window="open = false; $nextTick(() => $el.parentElement && ($el.parentElement.innerHTML = ''))"
     class="fixed inset-0 z-50 flex {{ 'justify-end' if m.slide_over else 'items-end justify-center p-4 sm:items-center' }}" role="dialog" aria-modal="true">
  <div class="fixed inset-0 bg-gray-950/50 backdrop-blur-[1px] dark:bg-gray-950/75" @click="open = false; $nextTick(() => $el.closest('#tw-modal').innerHTML = '')"></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="#tw-modal" 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="open = false; $nextTick(() => $el.closest('#tw-modal').innerHTML = '')" aria-label="{{ __('Close') }}">{{ icon('x', 'h-5 w-5') }}</button>
    {% 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>
    {% else %}
    <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>
    <div class="flex-1 overflow-y-auto px-6 py-5">
      {% if m.content %}<div class="mb-4">{{ m.content }}</div>{% endif %}
      {% if form %}{{ form.render() }}{% endif %}
    </div>
    {% endif %}
    <div class="flex {{ 'justify-center' if m.confirm_only else 'justify-end border-t border-gray-100 dark:border-white/10' }} gap-3 px-6 py-4">
      <button type="button" class="{{ ui.button_classes('gray') }} {{ 'flex-1' if m.confirm_only }}" @click="open = false; $nextTick(() => $el.closest('#tw-modal').innerHTML = '')">{{ m.cancel_label }}</button>
      {% 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 %}
    </div>
  </form>
</div>