<div class="space-y-3">
    @if($unread > 0)
        <button type="button" wire:click="markAllRead"
                class="w-full rounded-xl px-4 py-2.5 text-xs font-bold"
                style="background: var(--brand-500); color: var(--brand-fg);">
            {{ __('تعليم الكل كمقروء') }} ({{ $unread }})
        </button>
    @endif

    @forelse($logs as $log)
        <article @class(['portal-card px-4 py-3'])
                 style="{{ $log->read_at ? '' : 'border-color: color-mix(in oklab, var(--brand-500) 45%, var(--portal-border));' }}"
                 @if(! $log->read_at) wire:click="markRead({{ $log->id }})" @endif>
            <div class="flex items-start justify-between gap-2">
                <p class="min-w-0 text-sm font-bold">{{ $log->subject ?: __('إشعار') }}</p>
                @unless($log->read_at)
                    <span class="mt-1 h-2 w-2 shrink-0 rounded-full" style="background: var(--brand-500);" aria-label="{{ __('غير مقروء') }}"></span>
                @endunless
            </div>
            @if($log->body)
                <p class="mt-1 text-xs leading-relaxed" style="color: var(--portal-muted);">{{ $log->body }}</p>
            @endif
            <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ $log->created_at?->diffForHumans() }}
            </p>
        </article>
    @empty
        <x-portal.card><x-portal.empty :title="__('لا توجد إشعارات')" /></x-portal.card>
    @endforelse

    <div>{{ $logs->links() }}</div>
</div>
