<section class="flush-with-above bg-gradient text-white p-0">
    <svg class="decorative-divider" preserveAspectRatio="none" viewbox="0 0 100 100">
        <polygon fill="#F8F9FB" points="0 0 0 100 100 0"></polygon>
    </svg>
    <div class="container pt-5">
        <div class="row justify-content-center mb-5">
            <div class="col-auto">
                <h3 class="h4">Moje záložky</h3>
            </div>
        </div>
        <div class="feature-list feature-list-sm row justify-content-center">
            @foreach($oblubenePolozky as $ucebnica)
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="text-truncate">
                            <i class="fa fa-book text-muted mr-1"></i>
                            <span class="h6">{{ $ucebnica->nazov }}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled list-spacing-sm">
                            @foreach($ucebnica->oblubene as $oblubene)
                            <li>
                                <a class="text-truncate d-inline-block" style="width: 70%" href="{{ route('vzdelavanie.kniznica.ucebnica.sekcia.show', [$ucebnica, $oblubene]) }}">
                                    <i class="icon-bookmark text-muted mr-1"></i>
                                    {{ $oblubene->nazov }}
                                </a>
                                <span class="badge badge-light text-wrap float-right" style="width: 4rem;" title="Dátum vytvorenia">{{ $oblubene->created_at->diffForHumans() }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
            @if($oblubenePolozky->isEmpty())
                <div class="alert alert-primary text-small">
                    <i class="icon-info mr-2"></i>
                    Zatiaľ nemáte vytvorenú žiadnu záložku...
                </div>
            @endif
        </div>
    </div>
    <svg class="decorative-divider" preserveAspectRatio="none" viewBox="0 0 100 100">
        <polygon fill="#F8F9FB" points="0 100 100 100 100 0"></polygon>
    </svg>
</section>