@php
    $initialMessage = session('success') ?? session('error');
    $initialType = session('error') ? 'error' : 'success';
@endphp
<div
    x-data="{ show: @js((bool) $initialMessage), message: @js($initialMessage), type: @js($initialType) }"
    @notify.window="message = $event.detail.message; type = $event.detail.type; show = true"
    aria-live="polite"
    class="mb-4"
>
    <div x-cloak x-show="show" :class="type === 'error' ? 'border-red-200 bg-red-50 text-red-800' : 'border-emerald-200 bg-emerald-50 text-emerald-800'" class="flex items-start justify-between gap-4 rounded-xl border p-4 text-sm font-semibold">
        <span x-text="message"></span>
        <button type="button" @click="show = false" aria-label="Fechar alerta">×</button>
    </div>
</div>