<div wire:poll.10000ms>
    @if ($notifications->count() == 0)
        <div class="d-flex justify-content-center align-items-center">
            <div class="d-grid gap-1 p-3">
                <i class="bi bi-inbox display-5 text-center"></i>
                <span class="fs-6 fw-semibold">{{ __('notifications.has no notifications') }}</span>
            </div>
        </div>
    @else
        <ul class="list-group gap-1">
            @foreach ($notifications as $notification)
                @if (array_key_exists('text', $notification->data))
                    <li href="#"
                        class="list-group-item list-group-item-action rounded {{ !$notification->read_at ? 'list-group-item-warning' : 'list-group-item-light' }}"
                        aria-current="true" wire:click="read({{ $notification }})">
                        <div class="small">
                            <p class="m-0">
                                {!! $notification->data['text'] !!}
                            </p>
                            <p class="m-0 d-flex flex-wrap justify-content-end align-items-center">
                                <span class="badge fw-light text-secondary">{{ $notification->created_at }}</span>
                                @if ($notification->read_at)
                                    <span class=" fs-5 text-success">
                                        <i class="bi bi-check-all"></i>
                                    </span>
                                @else
                                    <span class=" fs-5 text-secondary">
                                        <i class="bi bi-check"></i>
                                    </span>
                                @endif
                            </p>
                        </div>
                    </li>
                @endif
            @endforeach
        </ul>
    @endif
</div>
