<section>
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-auto">
                <h3 class="h4">Najpopulárnejšie učebné materiály podľa kategórie</h3>
            </div>
        </div>
        @if($kategorieSUcebnymMaterialom->isEmpty())
        <div class="alert alert-info justify-content-center">
            <span>Popularita učebných materiálov nie je zatiaľ dostupná.</span>
        </div>
        @else
        <div class="feature-list feature-list-sm row justify-content-center">
            @foreach($kategorieSUcebnymMaterialom as $kategoria => $ucebneMaterialy)
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div>
                            <span class="h6">{{ $kategoria }}</span>
                        </div>
                        <a href="{{ route('vzdelavanie.kniznica.kategoria.ucebnice.index', $ucebneMaterialy->first()->kategoria_id) }}">Zobraziť všetko ›</a>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled list-spacing-sm">
                            @forelse($ucebneMaterialy as $ucebnyMaterial)
                            <li>
                                <a class="text-truncate d-inline-block" style="width: 80%" href="{{ route('vzdelavanie.kniznica.ucebnica.show', $ucebnyMaterial->ucebnica_id) }}">
                                    <i class="fa fa-book text-muted mr-1"></i>
                                    {{ $ucebnyMaterial->ucebnica_nazov }}
                                </a>
                                <span class="badge badge-light text-wrap float-right" style="width: 2rem;" title="Počet zobrazení">{{ $ucebnyMaterial->cnt }}</span>
                            </li>
                            @empty
                            <li>
                                <h6 class="title-decorative text-center">žiadny učebný materiál</h6>
                            </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>

<section class="flush-with-above bg-gradient text-white p-0">
    <div class="container py-5">
        <div class="row justify-content-center text-center section-outro">
            <div class="col-lg-4 col-md-5">
                <h5>Nenašli ste čo ste hľadali?</h5>
                <p>Neustále sa snažíme rozširovať obsah našeho online vzdelávacieho systému, Vaša spätná väzba je vítaná.</p>
                <a class="btn btn-outline-light" href="mailto:{{ config('vzdelavanie.podpora.email') }}">Kontaktujte nás ›</a>
            </div>
        </div>
    </div>
</section>