@extends('layouts.app', ['title' => 'Notifications'])

@section('content')
<section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
    <h1 class="font-display text-3xl font-bold text-white">Notifications</h1>
    <div class="mt-6 space-y-4">
        @foreach ($notifications as $notification)
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                <div class="flex items-center justify-between gap-4">
                    <div><div class="font-medium text-white">{{ $notification->title }}</div><div class="text-sm text-slate-400">{{ $notification->channel }} • {{ $notification->status }}</div></div>
                    <div class="text-xs text-slate-500">{{ $notification->sent_at?->diffForHumans() }}</div>
                </div>
                <div class="mt-2 text-sm text-slate-300">{{ $notification->message }}</div>
            </div>
        @endforeach
    </div>
    <div class="mt-6">{{ $notifications->links() }}</div>
</section>
@endsection