@extends('layouts.app')
@section('title', 'Notifications')
@section('immersive-account', '1')
@section('content')
<div class="member-shell">@include('account._sidebar')<main class="member-content">
    <header class="member-page-head"><div><h1>Notifications</h1><p>Gérez vos alertes et restez informé de l’activité de la communauté.</p></div>@if($unreadCount)<form method="POST" action="{{ route('account.notifications.read-all') }}">@csrf<button class="member-read-all">✓ Tout marquer comme lu</button></form>@endif</header>
    <nav class="notification-filters" aria-label="Filtrer les notifications"><a href="{{ route('account.notifications') }}" @class(['active' => !$kind])>Toutes</a><a href="{{ route('account.notifications',['kind'=>'donations']) }}" @class(['active' => $kind === 'donations'])>Dons</a><a href="{{ route('account.notifications',['kind'=>'assistance']) }}" @class(['active' => $kind === 'assistance'])>Demandes</a><a href="{{ route('account.notifications',['kind'=>'orders']) }}" @class(['active' => $kind === 'orders'])>Commandes</a></nav>
    <section class="member-notification-list">@forelse($notifications as $notification)<form method="POST" action="{{ route('account.notifications.read',$notification->id) }}">@csrf<button @class(['member-notification','unread'=>$notification->read_at===null])><span class="member-notification-icon">{{ match($notification->data['resource_type']??null){'order'=>'□','donation'=>'♡','assistance_request'=>'◇',default=>'•'} }}</span><div><strong>{{ $notification->data['title']??'Information FreeGive' }}</strong><p>{{ $notification->data['message']??'' }}</p>@if($notification->read_at===null)<small>Ouvrir les détails</small>@endif</div><time datetime="{{ $notification->created_at->toISOString() }}">{{ $notification->created_at->diffForHumans() }}</time></button></form>@empty<div class="member-empty"><span>✓</span><h2>Vous êtes à jour</h2><p>Aucune notification dans cette catégorie.</p></div>@endforelse</section><div class="catalog-pagination">{{ $notifications->links() }}</div>
</main></div>
@endsection