@php $notifications = auth()->user()->notifications()->latest()->limit(10)->get(); @endphp

<div class="flex flex-col h-full p-4">
    <div class="flex-1 overflow-y-auto space-y-2">
        @forelse($notifications as $notification)
            <div class="p-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                <div class="text-xs text-gray-500 mb-1">
                    {{ $notification->created_at->diffForHumans() }}
                </div>
                <div class="text-sm text-gray-800">
                    {{ $notification->data['message'] ?? 'You have a new notification' }}
                </div>
                @if(isset($notification->data['context_url']))
                    <a href="{{ $notification->data['context_url'] }}" class="text-xs text-blue-600 hover:text-blue-800">View</a>
                @endif
            </div>
        @empty
            <div class="flex-1 flex items-center justify-center">
                <div class="text-center">
                    <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"></path>
                    </svg>
                    <p class="mt-2 text-sm text-gray-500">No notifications</p>
                </div>
            </div>
        @endforelse
    </div>
    <div class="pt-2 border-t border-gray-200 flex-shrink-0 mt-3">
        <div class="flex items-center justify-between">
            <a href="{{ route('notifications.index', [], false) }}" class="text-xs text-blue-600 hover:text-blue-800">View All</a>
            <span class="text-xs text-gray-500">{{ auth()->user()->unreadNotifications()->count() }} unread</span>
        </div>
    </div>
</div>