@extends('layouts.app')
@section('title', 'Notifications — InLynq')
@section('heading', 'Notifications')

@section('content')
<div class="iq-card app-narrow" style="overflow:hidden">
  <div class="iq-row" style="justify-content:space-between;padding:12px 16px"><span style="font-weight:600;font-size:14px">Notifications</span>
    <form method="POST" action="{{ route('notifications.read') }}">@csrf<button class="iq-link" style="font-size:13px;border:0;background:none;cursor:pointer">Mark all read</button></form></div>
  @forelse ($notifications as $n)
    <div class="iq-notif {{ $n->read_at ? '' : 'unread' }}"><span class="iq-avatar sm a3"><x-iq.icon :name="$n->data['icon'] ?? 'bell'" size="sm" /></span><div><div>{!! \App\Support\RichText::bold($n->data['text'] ?? '') !!}</div><div class="time">{{ $n->created_at->diffForHumans() }}</div></div></div>
  @empty
    <div class="iq-notif"><span class="iq-muted">You're all caught up.</span></div>
  @endforelse
</div>
{{ $notifications->links() }}
@endsection