<x-app-layout title="Notifications">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-lg font-semibold text-slate-900">Notifications</h1>

        <div class="mt-5 overflow-hidden rounded-2xl border border-slate-200 bg-white">
            @forelse ($notifications as $notification)
                <a href="{{ $notification->data['url'] ?? '#' }}" class="flex items-start gap-3 border-b border-slate-50 px-5 py-4 last:border-0 hover:bg-slate-50 {{ $notification->read_at ? 'opacity-70' : '' }}">
                    <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9a6 6 0 1 0-12 0v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.08 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-slate-900">{{ $notification->data['title'] ?? 'Notification' }}</p>
                        <p class="text-sm text-slate-600">{{ $notification->data['message'] ?? '' }}</p>
                        <p class="mt-1 text-xs text-slate-400">{{ $notification->created_at->diffForHumans() }}</p>
                    </div>
                </a>
            @empty
                <p class="px-5 py-12 text-center text-sm text-slate-400">No notifications yet.</p>
            @endforelse
        </div>

        <div class="mt-4">{{ $notifications->links() }}</div>
    </div>
</x-app-layout>
