@if(isset($zoznamBuducichUdalosti))
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <div>
                <span class="h6">Nadchádzajúce udalosti</span>
            </div>
            @if($zoznamBuducichUdalosti->isNotEmpty())
                <a href="{{ route('modul.terminy.frontend.udalosti.index') }}">Zobraziť všetky ›</a>
            @endif
        </div>

        <div class="card-body p-0">
            <ul class="list-group list-group-flush">
                @forelse($zoznamBuducichUdalosti as $udalost)
                    <li class="list-group-item list-group-item-action">
                        <a class="media" href="{{ route('modul.terminy.frontend.udalosti.udalost.show', $udalost) }}">
                            <div class="avatar m-0 mr-3 ">
                                <i class="icon-calendar text-indigo display-3 m-0"></i>
                            </div>
                            <div class="media-body" style="overflow: hidden;">
                                <span class="h6 mb-0 text-truncate">{{ $udalost->nazov }}</span>
                                <span class="badge badge-primary text-truncate">{{ $udalost->druh->label() }}</span>
                                <ul class="list-inline d-inline-block">
                                    <li class="list-inline-item text-muted">
                                        <small>
                                            <i class="icon-calendar mr-1"></i>od {{ $udalost->datum_od->format('d.m.Y H:i') }}
                                        </small>
                                    </li>
                                    <li class="list-inline-item text-muted">
                                        <small>
                                            <i class="icon-calendar mr-1"></i>do {{ $udalost->datum_do->format('d.m.Y H:i') }}
                                        </small>
                                    </li>
                                </ul>
                            </div>
                        </a>
                    </li>
                @empty
                    <li class="list-group-item list-group-item-action text-center text-muted">
                        žiadne nadchádzajúce udalosti
                    </li>
                @endforelse
            </ul>
        </div>
    </div>
@endif