<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">
                <a href="{{ route($createPath) }}" class="btn btn-primary">
                    <span class="icon-plus"></span>
                    Vytvoriť novú udalosť
                </a>
                <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) }}">
                        <div class="media item-align-center">
                            <div class="media-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h3 class="h4 text-truncate">
                                            {{ $udalost->nazov }}
                                            @if($udalost->miestoKonania)
                                            <small class="text-muted lead text-truncate" style="max-width: 400px;">Miesto konania: {{ $udalost->miestoKonania->adresa }}</small>
                                            @endif
                                            <div class="d-flex justify-content-between">
                                                <div class="text-small">
                                                    <ul class="list-inline text-muted">
                                                        <li class="list-inline-item">
                                                            <span class="icon-calendar"></span>
                                                            Začiatok: {{ $udalost->datum_od->format('d.m.Y H:i') }}
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="icon-calendar"></span>
                                                            Koniec: {{ $udalost->datum_do->format('d.m.Y H:i') }}
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="icon-users"></span>
                                                            Dostupných {{ $udalost->pocet_volnych_miest }} miest z {{ $udalost->kapacita }} miest
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </h3>
                                    </div>
                                    <div>
                                        <x-badge :text="$udalost->druh->label" :color="$udalost->druh->color()"></x-badge>
                                        <x-badge :text="$udalost->stav->label" :color="$udalost->stav->color()"></x-badge>
                                    @if($udalost->trashed())
                                        <div class="badge badge-danger">ZNEPLATNENÁ</div>
                                    @endif
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="text-small">
                                        <ul class="list-inline text-muted">
                                            <li class="list-inline-item">
                                                <span class="icon-user"></span>
                                                Vytvoril: {{ $udalost->vytvoril->meno }}
                                            </li>
                                            <li class="list-inline-item">
                                                <span class="icon-calendar"></span>
                                                Vytvorená: {{ $udalost->created_at->longRelativeDiffForHumans() }}
                                            </li>
                                            <li class="list-inline-item">
                                                <span class="icon-calendar"></span>
                                                Aktualizovaná: {{ $udalost->updated_at->longRelativeDiffForHumans() }}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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>