@extends('layouts.app')
@section('title', 'Notifications - ICMIS')
@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold mb-0">Notifications</h2>
        <form method="POST" action="{{ route('probation.notifications.read-all') }}">@csrf<button class="btn btn-outline-secondary btn-sm">Mark all as read</button></form>
    </div>
    <div class="card"><div class="list-group list-group-flush">
        @forelse($items as $n)
            <a href="{{ route('probation.notifications.read', $n->id) }}" class="list-group-item list-group-item-action {{ $n->read_at ? '' : 'fw-semibold bg-light' }}">
                <div class="d-flex justify-content-between"><span>{{ $n->title }}</span><small class="text-muted">{{ $n->created_at->diffForHumans() }}</small></div>
                @if($n->body)<div class="small text-muted">{{ $n->body }}</div>@endif
            </a>
        @empty<div class="list-group-item text-muted">No notifications.</div>@endforelse
    </div></div>
    <div class="mt-2">{{ $items->links('pagination::bootstrap-4') }}</div>
</div>
@endsection