{{--
    brafa Systems — notification dropdown (Livewire view).
    Markup restyled for the new topbar bell pill. All wire:* directives
    and property references are preserved exactly:
      $unreadCount, $notifications, wire:click="markAsRead(...)",
      wire:click="markAllAsRead".
--}}
<div class="dropdown brafa-bell-dropdown">
    <button type="button"
            id="dropdownNotification"
            class="brafa-topbar__bell"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            aria-label="Notifications">
        <x-lucide name="bell" size="16" />
        @if ($unreadCount > 0)
            <span class="brafa-bell-count">{{ $unreadCount > 99 ? '99+' : $unreadCount }}</span>
        @else
            <span class="brafa-bell-dot"></span>
        @endif
    </button>

    <div class="dropdown-menu dropdown-menu-end p-2 brafa-bell-menu"
         aria-labelledby="dropdownNotification"
         style="min-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);">
        @forelse ($notifications as $notification)
            <a class="dropdown-item border-radius-md d-flex align-items-start py-2"
               href="javascript:void(0)"
               wire:click="markAsRead('{{ $notification->id }}')"
               style="gap: 10px; white-space: normal;">
                <span style="margin-top: 2px; color: var(--fg-subtle);">
                    <x-lucide name="bell" size="16" />
                </span>
                <div class="flex-grow-1">
                    <div style="font-size: 13px; color: var(--fg); font-weight: 500; line-height: 1.35;">
                        {{ $notification->data['message'] ?? 'New notification' }}
                    </div>
                    <div style="font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-top: 2px;">
                        {{ $notification->created_at->diffForHumans() }}
                    </div>
                </div>
            </a>
        @empty
            <div class="text-center py-3" style="font-size: 13px; color: var(--fg-subtle);">
                No new notifications
            </div>
        @endforelse

        @if ($unreadCount > 0)
            <hr class="horizontal dark my-1">
            <a class="dropdown-item text-center"
               href="javascript:void(0)"
               wire:click="markAllAsRead"
               style="font-family: var(--font-wide); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brafa-black);">
                Mark all as read
            </a>
        @endif
    </div>
</div>