{{--
    Both panels' success/failure banners, in one place: the theme's alerts.

    Server-rendered for a flash that arrives with a page load (after a
    redirect), and filled from the `flash-banner` browser event for one set
    during a Livewire click - see AppServiceProvider, which is why this still
    works although the layout is never re-rendered by an action.
--}}
<div x-data="{ banner: null, timer: null }"
    x-on:flash-banner.window="banner = $event.detail; $el.closest('.content')?.scrollTo({ top: 0, behavior: 'smooth' }); clearTimeout(timer); timer = setTimeout(() => banner = null, 8000)"
    x-on:livewire:navigated.window="banner = null">
    <template x-if="banner">
        <div class="alert show mb-6 text-white flex items-start justify-between gap-4" role="alert"
            :class="banner.type === 'success' ? 'alert-success' : 'alert-danger'">
            <span x-text="banner.message"></span>
            <button type="button" class="opacity-70 hover:opacity-100" x-on:click="banner = null"
                aria-label="{{ __('Close') }}">&times;</button>
        </div>
    </template>

    @if (session('success'))
        <div x-show="!banner" class="alert alert-success show mb-6 text-white" role="alert">{{ session('success') }}</div>
    @endif

    @if (session('failed'))
        <div x-show="!banner" class="alert alert-danger show mb-6 text-white" role="alert">{{ session('failed') }}</div>
    @endif
</div>