@extends('layouts.app')

@section('title', 'Notifications · ' . config('app.name'))
@section('page-title', 'Notifications')

@section('content')
    <div class="card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold">All Notifications</span>
            <form method="POST" action="{{ route('notifications.read-all') }}">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-check2-all"></i> Mark all as read</button>
            </form>
        </div>
        <ul class="list-group list-group-flush">
            @forelse($notifications as $notification)
                <li class="list-group-item d-flex justify-content-between align-items-start {{ $notification->read_at ? '' : 'bg-primary-subtle' }}">
                    <div>
                        <a href="{{ $notification->data['url'] ?? '#' }}" class="text-decoration-none text-reset">
                            {{ $notification->data['message'] ?? 'Notification' }}
                        </a>
                        <div class="text-secondary small">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>
                    @if(! $notification->read_at)
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-link"><i class="bi bi-check2"></i> Mark read</button>
                        </form>
                    @endif
                </li>
            @empty
                <li class="list-group-item text-secondary text-center py-4">No notifications.</li>
            @endforelse
        </ul>
    </div>

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