package components

// Modal renders a modal dialog.
//
// The <dialog> itself must never be an htmx swap target: swapping its
// innerHTML would replace the wrapper below (centering + close button) and
// break the layout. Content is swapped into the inner element with id
// "<id>-content" instead.
templ Modal(id string) {
	<dialog
		id={ id }
		class="m-auto backdrop:bg-black/90 bg-transparent p-0 w-full h-full max-w-none max-h-none"
		hx-on::after-swap="if (!this.open) this.showModal()"
	>
		<div class="relative w-full h-full flex items-center justify-center overflow-hidden">
			<button
				class="absolute right-5 top-5 z-10 p-2 text-white"
				hx-on:click="this.closest('dialog').close()"
			>
				X
			</button>
			<div id={ id + "-content" } class="w-full h-full flex items-center justify-center overflow-hidden">
				{ children... }
			</div>
		</div>
	</dialog>
}