{{--
    Flash messages. Rendered as Bootstrap alerts, but hidden on first paint:
    public/js/learnify-toast.js turns each one into a SweetAlert2 toast (top
    right) and removes it. If SweetAlert never loads, the JS un-hides them, so
    the message is still read as an inline alert.

    data-lf-flash = the toast type; data-lf-flash-text / -item = the copy.
--}}
@php($lfFlashes = collect([
    'success' => [session('success'), 'bi-check-circle-fill', 'alert-success'],
    'error' => [session('error'), 'bi-exclamation-triangle-fill', 'alert-danger'],
    'warning' => [session('warning'), 'bi-exclamation-circle-fill', 'alert-warning'],
    'info' => [session('status'), 'bi-info-circle-fill', 'alert-info'],
])->filter(fn ($f) => filled($f[0])))

@if ($lfFlashes->isNotEmpty() || $errors->any())
    <div class="{{ ($bare ?? false) ? '' : 'container mt-3' }} lf-flash-wrap">
        @foreach ($lfFlashes as $type => [$message, $icon, $class])
            <div class="alert {{ $class }} alert-dismissible fade show d-flex align-items-center gap-2 lf-flash-pending" role="alert" data-lf-flash="{{ $type }}">
                <i class="bi {{ $icon }} fs-5" aria-hidden="true"></i><div data-lf-flash-text>{{ $message }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('Close') }}"></button>
            </div>
        @endforeach
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show lf-flash-pending" role="alert" data-lf-flash="error">
                <div class="d-flex gap-2">
                    <i class="bi bi-x-circle-fill fs-5" aria-hidden="true"></i>
                    <ul class="mb-0 ps-3">
                        @foreach ($errors->all() as $error)
                            <li data-lf-flash-item>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('Close') }}"></button>
            </div>
        @endif
    </div>
    <noscript><style>.lf-flash-pending { display: flex !important; }</style></noscript>
@endif