@extends('layouts.admin')
@section('title', 'Notifications')
@section('heading', 'Notifications')

@section('content')
    <div class="flex justify-end mb-5">
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf
            <button class="px-4 py-2 rounded-lg border border-slate-300 text-slate-600 text-sm hover:bg-slate-50">Mark all read</button>
        </form>
    </div>

    <div class="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
        @forelse ($notifications as $n)
            <div class="flex items-start justify-between px-5 py-4 {{ $n->read_at ? '' : 'bg-indigo-50/40' }}">
                <div class="flex items-start gap-3">
                    @unless ($n->read_at)<span class="mt-1.5 w-2 h-2 rounded-full bg-indigo-500 shrink-0"></span>@endunless
                    <div>
                        <div class="text-sm font-medium text-slate-800">{{ $n->title }}</div>
                        @if ($n->message)<div class="text-sm text-slate-500 mt-0.5">{{ $n->message }}</div>@endif
                        <div class="text-xs text-slate-400 mt-1">
                            {{ ucfirst(str_replace('_',' ', $n->type)) }} · {{ $n->created_at?->diffForHumans() }}
                            @if ($n->license) · <a href="{{ route('licenses.show', $n->license) }}" class="text-indigo-500 hover:underline">view license</a>@endif
                        </div>
                    </div>
                </div>
                @unless ($n->read_at)
                    <form method="POST" action="{{ route('notifications.read', $n) }}">
                        @csrf<button class="text-xs text-slate-400 hover:text-slate-600">Mark read</button>
                    </form>
                @endunless
            </div>
        @empty
            <div class="px-5 py-10 text-center text-slate-400 text-sm">No notifications.</div>
        @endforelse
    </div>

    <div class="mt-4">{{ $notifications->links() }}</div>
@endsection