@php
    $rows = collect($pageData ?? []);
    $listenerOk = ($device->device_info['services']['notification_listener'] ?? null) === true;
@endphp

<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 mb-4 text-sm text-slate-700">
    <p class="font-medium text-slate-900">{{ __('devices.notifications.title') }}</p>
    <p class="mt-1 text-xs text-slate-600">{{ __('devices.notifications.hint') }}</p>
    @if(! $listenerOk)
        <p class="mt-2 text-xs text-amber-700 font-medium">{{ __('devices.notifications.permission_off') }}</p>
    @endif
</div>

@if($rows->isEmpty())
    <p class="text-sm text-gray-500">{{ __('devices.notifications.empty') }}</p>
@else
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 text-left text-xs text-gray-500 uppercase">
                    <th class="py-2 pr-4">{{ __('devices.notifications.col_app') }}</th>
                    <th class="py-2 pr-4">{{ __('devices.notifications.col_title') }}</th>
                    <th class="py-2 pr-4">{{ __('devices.notifications.col_text') }}</th>
                    <th class="py-2">{{ __('devices.notifications.col_time') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $n)
                    <tr class="border-b border-gray-100 align-top">
                        <td class="py-2 pr-4 font-medium text-gray-800">{{ $n->app_name }}</td>
                        <td class="py-2 pr-4 text-gray-700">{{ $n->title ?: '—' }}</td>
                        <td class="py-2 pr-4 text-gray-600 whitespace-pre-wrap break-words">{{ $n->content }}</td>
                        <td class="py-2 text-xs text-gray-500 whitespace-nowrap">{{ $n->posted_at?->format('d/m/Y H:i') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif