<section class="flush-with-above bg-gradient text-white p-0 pb-5">
    <svg class="decorative-divider" preserveAspectRatio="none" viewbox="0 0 100 100">
        <polygon fill="#F8F9FB" points="0 0 100 0 100 100"></polygon>
    </svg>
    <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>Zatiaľ nebola vytvorená žiadna kategória učebného materiálu.</span>
        </div>
        @else
        <div class="feature-list feature-list-sm row">
            @foreach($kategorieSUcebnymMaterialom as $_kategoria)
            <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->nazov }}</span>
                            <span class="badge badge-secondary">{{ $_kategoria->ucebnice_count }}</span>
                        </div>
                        <a href="{{ route('vzdelavanie.kniznica.kategoria.ucebnice.index', ['kategoriaId' => $_kategoria->getKey()]) }}">Zobraziť všetko ›</a>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled list-spacing-sm">
                            @forelse($_kategoria->ucebnice as $_ucebnyMaterial)
                            <li>
                                <i class="fa fa-book text-muted mr-1"></i>
                                <a href="{{ route('vzdelavanie.kniznica.ucebnica.show', ['id' => $_ucebnyMaterial->getKey()]) }}">{{ $_ucebnyMaterial->nazov }}</a>
                            </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 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>