@php
    $onOrNot = $unreadNotifications ? 'fa-bell-on' : 'fa-bell';
@endphp

<i class="fal {{$onOrNot}}" class="dropdown-toggle" id="notifications-dropdown" data-bs-toggle="dropdown" aria-expanded="false"></i>

<div class="dropdown-menu dropdown-notifications animate__animated animate__fadeIn animate__faster" aria-labelledby="notification-dropdown" >

    <div class="dropdown-inner">
        
        <div class="dropdown-header">

            <div class="title">
                <div>Notificações</div>
            </div>

        </div>

        <ul class="dropdown-body" id="notifications-list">

            @if (count($notifications))

                @foreach ($notifications as $uNotitfication)

                    <div class="notification-card {{ $uNotitfication->readed_at ? 'read' : 'not-read' }}" id="notification-details" data-id="{{ $uNotitfication->id }}" data-notification-id="{{ $uNotitfication->notification->id }}">

                        <div class="main-info">
                            <div class="description">
                                <div class="title">{{ $uNotitfication->notification->name }}</div>
                                <div class="message">{{ $uNotitfication->notification->message }}</div>
                            </div>
                            <div class="read-status">
                                <i class="fas fa-circle"></i>
                            </div>
                        </div>

                        <div class="more-info">
                            <div class="days-ago"><i class="fas fa-history"></i>{{ Carbon\Carbon::parse($uNotitfication->created_at)->diffForHumans();  }}</div>
                            <div class="more">Ver mais</div>
                        </div>

                    </div>
                    
                @endforeach

            @else

                <div class="empty-content">

                    <div class="quote medium">
                        Sem dados para apresentar
                    </div>

                    <div class="icon">
                        <i class="fal fa-clouds"></i>
                    </div>

                </div>

            @endif

        </ul>

        @if (count($notifications))
            <div class="dropdown-footer">

                <div id="loadingSpinner" class="d-none m-auto" >
                    <div class="spinner-border text-primary" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                </div>

                <div class="load" id="load-more-btn" data-page="1">
                    <i class="fa fa-plus-circle"></i> Visualizar Mais
                </div>
            </div>
        @endif

    </div>
</div>