{{--
    Transient toasts pushed from Livewire with:

        $this->dispatch('toast', type: 'success', message: 'Saved');

    Kept out of the session so a Livewire action can confirm itself without a
    full page navigation.
--}}
<div
    x-data="{
        toasts: [],
        push(detail) {
            const id = Date.now() + Math.random();
            this.toasts.push({ id, ...detail });
            setTimeout(() => this.remove(id), detail.duration || 4000);
        },
        remove(id) { this.toasts = this.toasts.filter(t => t.id !== id); },
    }"
    @toast.window="push($event.detail)"
    class="no-print pointer-events-none fixed bottom-5 right-5 z-[60] flex w-80 flex-col gap-2"
>
    <template x-for="toast in toasts" :key="toast.id">
        <div
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 translate-y-2"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-end="opacity-0"
            class="pointer-events-auto flex items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-lg"
            :class="{
                'border-emerald-200 bg-white text-emerald-800': toast.type === 'success',
                'border-red-200 bg-white text-red-800': toast.type === 'error',
                'border-amber-200 bg-white text-amber-800': toast.type === 'warning',
                'border-slate-200 bg-white text-slate-800': !['success','error','warning'].includes(toast.type),
            }"
        >
            <div class="min-w-0 flex-1">
                <p class="font-semibold" x-show="toast.title" x-text="toast.title"></p>
                <p x-text="toast.message"></p>
            </div>

            <button type="button" @click="remove(toast.id)" class="opacity-50 hover:opacity-100" aria-label="Dismiss">&times;</button>
        </div>
    </template>
</div>