@extends('layouts.user', ['heading' => 'Notifications'])

@section('content')
    <div class="grid grid-cols-1 gap-3">
        @forelse($notifications as $notification)
            <div class="user-card p-4">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">{{ $notification->title ?? $notification->type }}</div>
                    <div class="text-xs text-[var(--user-muted)]">{{ optional($notification->created_at)->format('d M Y, h:i A') }}</div>
                </div>
                <div class="mt-1 text-sm text-[var(--user-muted)]">{{ $notification->message }}</div>
                @if($notification->link)
                    <a href="{{ $notification->link }}" class="mt-2 inline-block text-sm text-[var(--user-primary)]">Open</a>
                @endif
            </div>
        @empty
            <div class="user-card p-4 text-center text-[var(--user-muted)]">No notifications yet.</div>
        @endforelse
    </div>

    <div class="mt-4">{{ $notifications->links() }}</div>
@endsection