<section class="space-sm">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-9 mb-1 order-md-2">
                <div class="card card-sm shadow">
                    <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
                        <div class="m-0 p-0">
                            <button class="btn btn-primary float-right" @if(!$unreaded) disabled="disabled"
                                    @endif wire:click.prevent="notificationsReaded()">
                                <i class="icon-check"></i>
                                Označiť všetko ako prečítané
                            </button>
                        </div>
                        <form class="d-flex align-items-center">
                            <span class="mr-2 text-muted text-small text-nowrap">Zoradiť:</span>
                            <select class="custom-select" wire:model="sort">
                                <option value="1">najstaršie</option>
                                <option value="0">najnovšie</option>
                            </select>
                        </form>
                    </div>
                    <div class="list-group list-group-flush">
                        @forelse($upozornenia as $upozornenie)
                            @foreach(array_filter(event(\App\Events\Notifications\GetViewForNotification::class, $upozornenie)) as $notificationView)
                                @includeIf($notificationView->name, ['notification' => $upozornenie, 'url' => $notificationView->url])
                            @endforeach
                        @empty
                            <div class="list-group-item bg-light d-flex justify-content-center disabled py-4">
                            <span class="text-muted h5">
                                Žiadne
                                <strong>
                                    @if(\App\Enums\UpozornenieStavEnum::from($status)->equals(\App\Enums\UpozornenieStavEnum::READ()))
                                        prečítané
                                    @endif
                                    @if(\App\Enums\UpozornenieStavEnum::from($status)->equals(\App\Enums\UpozornenieStavEnum::NOTREAD()))
                                        neprečítané
                                    @endif
                                </strong>
                                upozornenia sa nenašli...</span>
                            </div>
                        @endforelse
                    </div>
                </div>
                @if(!$upozornenia->isEmpty() && $upozornenia->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $upozornenia->links() }}
                    </div>
                @endif
            </div>

            <div class="col-12 col-md-3 mb-1 order-md-1">
                <div class="card shadow">
                    <div class="card-header">
                        <span class="h6 title-decorative">Filter notifikácií</span>
                    </div>
                    <div class="card-body">
                        <nav class="nav flex-md-column">
                            @foreach(\App\Enums\UpozornenieStavEnum::toArray() as $key => $label)
                                <a href="#" class="nav-link" wire:click.prevent="filterByReading('{{ $key }}')">
                                    <span class="badge badge-indicator badge-{{ \App\Enums\UpozornenieStavEnum::from($key)->color() }} ml-1"></span>
                                    {{ Str::ucfirst($label) }}
                                    <span class="badge badge-light">{{ $this->getCountbyType($key) }}</span>
                                </a>
                                @if(\App\Enums\UpozornenieStavEnum::from($key)->equals(\App\Enums\UpozornenieStavEnum::ALL()))
                                    <hr class="my-1">
                                @endif
                            @endforeach
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>