@props(['notifications' => null])

@php
    $unreadCount = $notifications['unreadCount'] ?? 0;
    $items = $notifications['items'] ?? [];
@endphp

<div class="dropdown"
     data-notifications-poll
     data-poll-url="{{ route('notifications.poll') }}"
     data-unread-count="{{ $unreadCount }}">
    <button type="button"
            class="app-topbar__icon-btn"
            id="notificationsDropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            aria-label="Notifiche{{ $unreadCount ? ', '.$unreadCount.' non lette' : '' }}">
        <x-icon name="bell" />
        @if ($unreadCount)
            <span class="app-topbar__count" aria-hidden="true">{{ $unreadCount > 99 ? '99+' : $unreadCount }}</span>
        @endif
    </button>

    <div class="dropdown-menu dropdown-menu-end notification-menu p-0 shadow" aria-labelledby="notificationsDropdown">
        <div class="d-flex align-items-center justify-content-between px-3 py-3 border-bottom">
            <span class="fw-semibold">Notifiche</span>
            @if ($unreadCount)
                <span class="badge rounded-pill text-bg-primary">{{ $unreadCount }} nuove</span>
            @endif
        </div>
        @forelse ($items as $notification)
            <form method="POST" action="{{ $notification['openUrl'] ?? route('notifications.read-many') }}"
                  class="notification-menu__item {{ $notification['isUnread'] ? 'is-unread' : '' }}">
                @csrf
                @method('PATCH')
                <button type="submit" class="border-0 bg-transparent p-0 text-start w-100">
                <strong>{{ $notification['title'] }}</strong>
                @if ($notification['body'])
                    <span>{{ $notification['body'] }}</span>
                @endif
                <small>{{ $notification['date'] }}</small>
                </button>
            </form>
        @empty
            <x-empty-state icon="bi-bell-slash" title="Nessuna notifica" class="py-4 px-3" />
        @endforelse
        <div class="border-top p-2 text-center">
            <a class="btn btn-sm btn-link" href="{{ route('notifications.index') }}">Apri centro notifiche</a>
        </div>
    </div>
</div>