@extends('layouts.app')
@section('title','Notifications')
@section('breadcrumb')<li class="breadcrumb-item active">Notifications</li>@endsection
@section('content')
<div class="page-header"><h1 class="page-title"><i class="bi bi-bell me-2"></i>Notifications</h1></div>
<div class="card"><div class="card-body">
@forelse($notifications as $n)
<div class="d-flex align-items-start gap-3 p-3 border-bottom {{ $n->is_read ? '' : 'bg-light' }}">
    <div class="flex-grow-1">
        <div class="fw-600">{{ $n->title }}</div>
        <div class="text-muted" style="font-size:0.875rem;">{{ $n->message }}</div>
        <div class="text-muted" style="font-size:0.75rem;">{{ $n->created_at->diffForHumans() }}</div>
    </div>
    @if(!$n->is_read)
    <form method="POST" action="{{ route('notifications.read', $n->id) }}">@csrf<button class="btn btn-sm btn-outline-primary">Mark read</button></form>
    @endif
</div>
@empty
<div class="text-center py-5 text-muted"><i class="bi bi-bell-slash" style="font-size:3rem;"></i><p class="mt-2">No notifications</p></div>
@endforelse
{{ $notifications->links() }}
</div></div>
@endsection