<div class="m-0 p-0">
    @if(empty($udalosti))
        <div class="row justify-content-center">
            <div class="card card-lg text-center">
                <div class="card-body">
                    <i class="fa fa-list-alt fa-8x opacity-20 p-2"></i>
                    <h1 class="h5">Neexistujú žiadne udalosti.</h1>
                </div>
            </div>
        </div>
    @else
        <div class="card card-sm shadow">
            <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
                <a href="{{ route($createPath) }}" class="btn btn-primary">
                    <span class="icon-plus"></span>
                    Vytvoriť novú udalosť
                </a>
                <span wire:loading class="spinner-grow spinner-grow-sm" role="status"></span>
                <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">od najstarších</option>
                        <option value="0">od najnovších</option>
                    </select>
                </form>
            </div>
            <div class="list-group list-group-flush">
                @forelse($udalosti as $udalost)
                    <a class="list-group-item" href="{{ route($editPath, $udalost) }}">
                        <span class="container">
                            <div class="row justify-content-between align-items-center mb-2">
                                <div class="col">
                                    <h3 class="h4 text-truncate">{{ $udalost->nazov }}</h3>
                                </div>
                                <div class="col-auto">
                                    <x-badge class="text-truncate" :text="$udalost->druh->label" :color="$udalost->druh->color()"></x-badge>
                                    <x-badge class="text-truncate" :text="$udalost->stav->label" :color="$udalost->stav->color()"></x-badge>
                                    @if($udalost->trashed())
                                        <div class="badge badge-danger">ZNEPLATNENÁ</div>
                                    @endif
                                    @if($udalost->maVytvoreneMoznosti())
                                        <div class="badge badge-info">MOŽNOSTI</div>
                                    @endif
                                </div>
                            </div>
                            <div class="row justify-content-between align-items-center">
                                <div class="col">
                                    <div class="justify-content-between">
                                        <div class="text-small">
                                            <ul class="list-unstyled text-muted">
                                                <li class="list-item">
                                                    <span class="icon-calendar"></span>
                                                    Začiatok: {{ $udalost->datum_od->format('d.m.Y H:i') }}
                                                </li>
                                                <li class="list-item">
                                                    <span class="icon-calendar"></span>
                                                    Koniec: {{ $udalost->datum_do->format('d.m.Y H:i') }}
                                                </li>
                                                <li class="list-item">
                                                    <span class="icon-users"></span>
                                                    Dostupných {{ $udalost->pocet_volnych_miest }} miest z {{ $udalost->kapacita }} miest
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="align-items-center">
                                        <div class="text-small">
                                            <ul class="list-unstyled text-muted">
                                                <li class="list-item">
                                                    <span class="icon-user"></span>
                                                    Vytvoril: {{ $udalost->vytvoril->cele_meno }}
                                                </li>
                                                <li class="list-item">
                                                    <span class="icon-calendar"></span>
                                                    Vytvorená: {{ $udalost->created_at->longRelativeDiffForHumans() }}
                                                </li>
                                                <li class="list-item">
                                                    <span class="icon-calendar"></span>
                                                    Aktualizovaná: {{ $udalost->updated_at->longRelativeDiffForHumans() }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </a>
                @empty
                    <div class="list-group-item bg-light d-flex justify-content-center disabled py-4">
                        <span class="text-muted h5">Žiadne udalosti sa nenašli...</span>
                    </div>
                @endforelse
            </div>
        </div>
    @endif

    @if(!$udalosti->isEmpty() && $udalosti->hasPages())
        <div class="d-flex justify-content-center">
            {{ $udalosti->links() }}
        </div>
    @endif
</div>