@if (session('success'))
    <div
        {{$attributes->merge(['class' => 'p-4 my-3 bg-green-200 text-green-900 rounded flex justify-between items-center']) }}
        x-data="{ show: true }"
        x-show="show"
        x-transition
        x-init="setTimeout(() => show = false, 1000 * 5)">
        {{ session('success') }}

        <button type="button"
                class="text-red-900 hover:text-red-700"
                @click="show = false"
                aria-label="Close">
            <x-icons.cross/>
        </button>
    </div>
@endif

@if (session('error'))
    @php
        $errorBackgroundClass = match (session('error-type')) {
                'warning' => 'bg-yellow-200 text-yellow-900',
                default => 'bg-red-200 text-red-900',
            };

        $class = 'p-4 my-3 rounded flex justify-between items-center ' . $errorBackgroundClass;
    @endphp

    <div
        {{$attributes->merge(['class' => $class]) }}
        x-data="{ show: true }"
        x-show="show"
        x-transition
        x-init="setTimeout(() => show = false, 1000 * 30)">
        <span>{{ session('error') }}</span>
        <button type="button"
                class="text-red-900 hover:text-red-700"
                @click="show = false"
                aria-label="Close">
            <x-icons.cross/>
        </button>
    </div>
@endif