{{-- This component now uses a dropdown --}}
<div class="flex items-center">
    <x-filament::dropdown placement="bottom-end">
        <x-slot name="trigger">
            <button
                type="button"
                class="inline-flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-500/5 focus:outline-none focus:bg-gray-500/5 dark:hover:bg-gray-300/5 dark:focus:bg-gray-300/5"
            >
                <span class="sr-only">View notifications</span>
                <div class="relative mt-2">
                    {{-- Heroicon: bell --}}
                    <x-heroicon-o-bell class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
                    @if ($unreadCount > 0)
                        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-primary-500 rounded-full">
                            {{ $unreadCount }}
                        </span>
                    @endif
                </div>
            </button>
        </x-slot>

        {{-- Dropdown Content --}}
        <x-filament::dropdown.header
            color="primary"
            tag="div"
        >
            Notifications
        </x-filament::dropdown.header>
        <x-filament::dropdown.list>
        @forelse($notifications ?? [] as $notification)
            <x-filament::dropdown.list.item
                :href="route('filament.admin.resources.notifications.index')"
                tag="a"
                icon="heroicon-m-bell-alert"
            >
                <div class="flex flex-col">
                    {{-- Display Subject or fallback --}}
                    <span class="font-medium text-sm text-gray-900 dark:text-white truncate max-w-xs">
                        {{ $notification->data['subject'] ?? ($notification->data['message'] ?? 'Notification') }}
                    </span>
                    {{-- Display time --}}
                    <span class="text-xs text-gray-500 dark:text-gray-400">
                        {{ $notification->created_at->diffForHumans() }}
                    </span>
                    {{-- START: Change check from !empty to isset --}}
                    @if (isset($notification->data['share_message']) && $notification->data['share_message'] !== null)
                        <span class="mt-1 text-xs text-gray-500 dark:text-gray-400 italic">
                            Message: {{ $notification->data['share_message'] }}
                        </span>
                    @endif
                    {{-- END: Change check --}}
                </div>
            </x-filament::dropdown.list.item>
            @empty
                {{-- Simplified empty state message --}}
                <div class="px-4 py-2 text-sm text-center text-gray-500 dark:text-gray-400">
                    <p>No new notifications</p>
                </div>
            @endforelse
        </x-filament::dropdown.list>
        {{-- Footer Link to All Notifications --}}
         <x-filament::dropdown.list>
            <x-filament::dropdown.list.item
                :href="route('filament.admin.resources.notifications.index')"
                tag="a"
                icon="heroicon-m-arrows-pointing-out"
            >
                View all notifications
            </x-filament::dropdown.list.item>
        </x-filament::dropdown.list>
    </x-filament::dropdown>
</div>