@extends('layouts.exat')
@section('title', 'Notifications')
@section('subtitle', $notifications->total().' notification(s)')

@section('actions')
    <div class="flex items-center gap-2">
        <a href="{{ route('notifications.preferences') }}" class="inline-flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Préférences</a>
        <form method="POST" action="{{ route('notifications.lues') }}">@csrf @method('PATCH')
            <button class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">Tout marquer comme lu</button>
        </form>
    </div>
@endsection

@section('content')
<div class="overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
    <ul class="divide-y divide-slate-100">
        @forelse($notifications as $n)
            <li class="{{ $n->lue ? '' : 'bg-emerald-50/40' }}">
                <form method="POST" action="{{ route('notifications.lire', $n) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-slate-50">
                        <span class="mt-1 h-2 w-2 shrink-0 rounded-full {{ $n->lue ? 'bg-transparent' : 'bg-emerald-500' }}"></span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm font-medium text-slate-800">{{ $n->titre }}</span>
                            @if($n->message)<span class="block text-xs text-slate-500">{{ $n->message }}</span>@endif
                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ $n->created_at?->diffForHumans() }}</span>
                        </span>
                        @if($n->demande_id)
                            <svg class="mt-1 h-4 w-4 shrink-0 text-slate-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
                        @endif
                    </button>
                </form>
            </li>
        @empty
            <li class="px-4 py-16 text-center text-sm text-slate-400">Aucune notification.</li>
        @endforelse
    </ul>
    @if($notifications->hasPages())<div class="border-t border-slate-100 px-4 py-3">{{ $notifications->links() }}</div>@endif
</div>
@endsection