@extends('layouts.app')

@section('title', 'Notifications')
@section('heading', 'Notifications')

@section('content')
    @if (auth()->user()->unreadNotifications->isNotEmpty())
        <form method="POST" action="{{ route('notifications.read-all') }}" class="mb-1">
            @csrf
            <button type="submit" class="btn btn-ghost btn-sm">Mark all read</button>
        </form>
    @endif

    <div class="card">
        @forelse ($notifications as $n)
            <div class="flex-between" style="padding:0.75rem 0;border-bottom:1px solid var(--border)">
                <div>
                    <div style="font-size:0.85rem">{{ $n->data['title'] ?? class_basename($n->type) }}</div>
                    @if (! empty($n->data['message']))
                        <div style="font-size:0.9rem">{{ $n->data['message'] }}</div>
                    @endif
                    <div style="font-size:0.8rem;color:var(--muted)">{{ $n->created_at->diffForHumans() }}</div>
                    @if (isset($n->data['due_at']))
                        <div style="font-size:0.8rem">Due: {{ $n->data['due_at'] }}</div>
                    @endif
                </div>
                <div class="flex gap">
                    @if ($n->unread())
                        <form method="POST" action="{{ route('notifications.read', $n->id) }}">
                            @csrf
                            <button type="submit" class="btn btn-ghost btn-sm">Mark read</button>
                        </form>
                    @endif
                </div>
            </div>
        @empty
            <p>No notifications.</p>
        @endforelse
    </div>
    @include('partials.pagination', ['paginator' => $notifications])
@endsection
