{{-- Session flash messages (success / error with optional detail list). --}}
@foreach (['success' => ['bg-emerald-50 text-emerald-800 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/20', 'check-circle'],
           'error' => ['bg-red-50 text-red-800 border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/20', 'x-circle']] as $key => [$classes, $icon])
    @if (session($key))
        <div x-data="{ show: true }" x-show="show" x-transition class="mb-6 flex gap-3 rounded-xl border p-4 text-sm {{ $classes }}" role="alert">
            <x-dynamic-component :component="'heroicon-o-'.$icon" class="size-5 shrink-0" />
            <div class="flex-1">
                <p class="font-medium">{{ session($key) }}</p>
                @if ($key === 'error' && session('error_details'))
                    <ul class="mt-2 list-disc space-y-0.5 ps-5">
                        @foreach (session('error_details') as $detail)
                            <li>{{ $detail }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>
            <button type="button" @click="show = false" class="opacity-60 hover:opacity-100" aria-label="{{ __('Dismiss') }}"><x-heroicon-o-x-mark class="size-4" /></button>
        </div>
    @endif
@endforeach