@extends('layouts.applicant')

@section('title', 'Notifications')

@section('content')

    <h1 class="mb-6 font-display text-3xl tracking-tight text-slate-900">Notifications</h1>

    @if ($notifications->isEmpty())
        <x-empty-state title="No notifications yet"
                       description="We will let you know here whenever there is an update on your application." />
    @else
        <ul class="space-y-3">
            @foreach ($notifications as $notification)
                <li @class([
                    'rounded-xl border bg-white p-5',
                    'border-brand-200 bg-brand-50/50' => is_null($notification->read_at),
                    'border-slate-200' => ! is_null($notification->read_at),
                ])>
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-semibold text-slate-900">
                                {{ $notification->data['title'] ?? 'Update' }}
                            </p>
                            <p class="mt-1 text-sm leading-relaxed text-slate-600">
                                {{ $notification->data['message'] ?? '' }}
                            </p>
                            <p class="mt-2 text-xs text-slate-500">
                                {{ $notification->created_at->format('j F Y \a\t g:i A') }}
                            </p>
                        </div>

                        <div class="flex shrink-0 items-center gap-2">
                            @if (! empty($notification->data['url']))
                                <x-button :href="$notification->data['url']" variant="outline" size="sm">View</x-button>
                            @endif

                            @if (is_null($notification->read_at))
                                <form method="POST" action="{{ route('applicant.notifications.read', $notification->id) }}">
                                    @csrf
                                    <x-button type="submit" variant="ghost" size="sm">Mark read</x-button>
                                </form>
                            @endif
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>

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

@endsection
