<x-app-layout>
    <x-slot:heading>Notifications</x-slot:heading>
    <x-page-header title="Notifications" description="All alerts and system messages." />

    @if($notifications->isEmpty())
        <x-empty-state title="No notifications" description="You're all caught up.">
            <x-slot:icon><svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <div class="rounded-xl border border-gray-100 bg-white shadow-sm divide-y divide-gray-50">
        @foreach($notifications as $n)
        <div class="px-5 py-4 @if(!$n->read_at) bg-blue-50 @endif">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-900">
                        {{ $n->data['message'] ?? class_basename($n->type) }}
                    </p>
                    @if(!empty($n->data['details']))
                    <p class="text-xs text-gray-500 mt-0.5">{{ $n->data['details'] }}</p>
                    @endif
                </div>
                <p class="text-xs text-gray-400 ml-4 shrink-0">{{ $n->created_at->diffForHumans() }}</p>
            </div>
        </div>
        @endforeach
    </div>
    <div class="mt-4">{{ $notifications->links() }}</div>
    @endif
</x-app-layout>
