<div class="pt-3 -pb-3">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 ">
        @if ( session('notification.secondary') )
            <div class="bg-theme-background">
            <x-alert title="{{ __(session('notification.secondary')) }}" secondary flat>
                <x-slot name="slot">
                    {{ __(session('notification.secondary.details')) }}
                </x-slot>
            </x-alert>
            </div>
        @endif

        @if ( session('notification.success') )
            <div class="bg-theme-background">
            <x-alert title="{{ __(session('notification.success')) }}" positive flat>
                <x-slot name="slot">
                    {{ __(session('notification.success.details')) }}
                </x-slot>
            </x-alert>
            </div>
        @endif

        @if ( session('notification.error') )
            <div class="bg-theme-background">
            <x-alert title="{{ __(session('notification.error')) }}" negative flat>
                <x-slot name="slot">
                    {{ __(session('notification.error.details')) }}
                </x-slot>
            </x-alert>
            </div>
        @endif


        @if ( session('notification.alert') )
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg mb-6">
                <div class="p-6 lg:pt-6 sm:px-20 bg-white text-sm text-theme-secondary">
                    <div class="flex items-start">
                        <svg class="w-6 h-6 text-theme-primary mr-3 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <div>
                            <div class="font-medium text-theme-primary">{{ __(session('notification.alert')) }}</div>
                            @if ( session('notification.alert.details') )
                                <div class="mt-2">{{ __(session('notification.alert.details')) }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ( session('notification.info') )
            <div class="bg-theme-background">
            <x-alert title="{{ __(session('notification.info')) }}" info flat>
                <x-slot name="slot">
                    {{ __(session('notification.info.details')) }}
                </x-slot>
            </x-alert>
            </div>
        @endif
        
    </div>
</div>