@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h2 class="mb-4">All Notifications</h2>
    <div class="card">
        <div class="card-body p-0">
            <ul class="list-group list-group-flush">
                @forelse(auth()->user()->notifications as $notification)
                    <li class="list-group-item d-flex align-items-start {{ $notification->read_at ? 'bg-light' : '' }}">
                        <div class="me-3">
                            <i class="ri-user-3-line text-primary fs-4"></i>
                        </div>
                        <div class="flex-fill">
                            <div class="fw-bold">{{ $notification->data['title'] ?? 'Notification' }}</div>
                            <div class="text-muted small">{{ $notification->data['body'] ?? '' }}</div>
                            <div class="text-muted small mt-1">
                                <i class="mdi mdi-clock-outline"></i> {{ $notification->created_at->diffForHumans() }}
                                @if(!$notification->read_at)
                                    <a href="{{ route('notifications.read', $notification->id) }}" class="ms-3 text-success">Mark as read</a>
                                @endif
                            </div>
                        </div>
                    </li>
                @empty
                    <li class="list-group-item text-center text-muted">No notifications found.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection