<li class="onclick-dropdown-notification" wire:click="markAllNotificationsAsRead()">
    <div class="notification-box"><i class="far fa-bell" style="font-size:1.1rem;"></i> @if(auth()->user()->notification) <span class="dot-animated"></span>@endif</div>
    <ul class="notification-dropdown onhover-show-div" wire:ignore.self>
        <li>
            @if ($count)
            <p class="f-w-700 mb-0">Tienes {{ $count }} Notificaci{{ $count == 1 ? "ón" : "ones" }} sin leer <span class="pull-right badge badge-primary badge-pill">{{ $count }}</span></p>
            @else
            <p class="f-w-700 mb-0">No tienes notificaciones</p>
            @endif
        </li>
        @foreach ( $notifications as $notification )
            <li class="{{ ! $notification->read_at ? 'noti-primary' : 'noti-success' }}" wire:click="markNotificationAsRead('{{ $notification->id }}')"
                onclick="location.href='{{ $notification->data['url'] }}'" style="cursor:pointer;">
                <div class="media">
                    <span class="notification-bg {{ ! $notification->read_at ? 'bg-light-primary' : 'bg-light-success' }}"><i class="fas {{ ! $notification->read_at ? 'fa-check' : 'fa-check-double'}} "></i></span>
                    <div class="media-body">
                        <p {{ $notification->read_at ? 'style=color:gray!important;' : '' }}>{{ $notification->data['message'] }}</p>
                        <span>{{ $notification->created_at->diffForHumans() }}</span>
                    </div>
                </div>
            </li>
        @endforeach
        @if ($count_all > 0)
            <li class="text-center p-10">
                <a href="{{ route('notificaciones') }}" class="btn btn-primary btn-sm btn-block">Ver todas las notificaciones</a>
            </li>
        @endif
    </ul>
</li>
