@php
    $nestItems = app(\Theme\Nest\Services\NestNotificationService::class)->recent(null, 4);
    $nestNotifUrl = route('public.nest.notifications');
@endphp
{{--
    Content only. The wrapper (.cart-dropdown-wrap) is reused from the cart
    dropdown in header.blade.php, so positioning + hover behaviour stay identical
    to the cart — only the data differs.
--}}
<div class="nest-notif-dd">
    <h5 class="nest-notif-dd-title">{{ __('Notifications') }}</h5>

    <ul class="nest-notif-dd-list">
        @forelse ($nestItems as $item)
            <li>
                <a href="{{ $nestNotifUrl }}" class="nest-notif-dd-item {{ $item->is_read ? '' : 'is-unread' }}">
                    <span class="nest-notif-dd-ic"><i class="{{ $item->icon ?: 'fi fi-rs-bell' }}"></i></span>
                    <span class="nest-notif-dd-tx">
                        <strong>{{ $item->title }}</strong>
                        @if ($item->message)
                            <small>{{ \Illuminate\Support\Str::limit($item->message, 55) }}</small>
                        @endif
                    </span>
                </a>
            </li>
        @empty
            <li class="nest-notif-dd-empty">{{ __('No notifications') }}</li>
        @endforelse
    </ul>

    <a href="{{ $nestNotifUrl }}" class="nest-notif-dd-more">{{ __('View all notifications') }}</a>
</div>

<style>
    .cart-dropdown-wrap .nest-notif-dd { text-align: start; }
    .nest-notif-dd-title { font-size: 15px; font-weight: 700; color: #253d4e; margin: 0 0 14px; }
    .nest-notif-dd-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 300px; overflow-y: auto; }
    .nest-notif-dd-list li { display: block; margin: 0; }
    .nest-notif-dd-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #f4f6f8; }
    .nest-notif-dd-item.is-unread { background: rgba(var(--color-brand-rgb, 29,135,81), .05); border-radius: 6px; padding: 10px 8px; }
    .nest-notif-dd-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--color-brand-rgb, 29,135,81), .1); color: var(--color-brand, #1d8751); display: flex; align-items: center; justify-content: center; }
    .nest-notif-dd-tx { display: flex; flex-direction: column; min-width: 0; }
    .nest-notif-dd-tx strong { color: #253d4e; font-size: 13px; line-height: 1.3; }
    .nest-notif-dd-tx small { color: #7e879a; font-size: 12px; }
    .nest-notif-dd-empty { padding: 20px 0; text-align: center; color: #9aa4b2; font-size: 13px; }
    .nest-notif-dd-more { display: block; text-align: center; padding-top: 12px; font-weight: 700; color: var(--color-brand, #1d8751); border-top: 1px solid #eef0f2; }
</style>