@php
    /**
     * @var $notifications \Illuminate\Support\Collection
     */
@endphp
<div>
    <li class="nav-item navbar-dropdown dropdown-notifications @if($notifications->isNotEmpty())dropdown @endif" wire:poll.60s>
        <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" @if($notifications->isNotEmpty()) data-bs-auto-close="outside" data-bs-toggle="dropdown" @endif>
            <i class="bx bxs-bell-ring @if($notifications->isNotEmpty()) bx-flashing @endif bx-md me-3"><span><small>{{ $notifications->count() }}</small></span></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            @foreach($notifications as $notification)
                <li>
                    <div class="d-flex">
                        <div class="flex-grow-1 m-2">
                            <h6 class="mb-0">{{ $notification->data['title'] }}</h6>
                            <small class="text-muted">{!! $notification->data['text'] !!}</small>
                        </div>
                        <div class="m-2" wire:click="read('{{$notification->id}}')">
                            <button class="btn btn-icon btn-outline-secondary"><span class="icon-base bx bx-check icon-md"></span></button>
                        </div>
                    </div>
                </li>
            @endforeach
            <li>
                <div class="dropdown-divider my-1"></div>
            </li>
            <li class="d-flex me-3 justify-content-end">
                <button class="btn btn-outline-secondary" type="button" wire:click="readAll">Прочитать все</button>
            </li>
        </ul>
    </li>
</div>