@forelse($books as $book)
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
        <div class="blog-card shadow rounded-4 " style=" border-radius:20px 20px!important; overflow:hidden!important;">
            @if($book->thumbnail)
                <img src="{{ asset('storage/' . $book->thumbnail) }}"
                     alt="{{ $book->title }}"
                     class="img-fluid w-100"
                     style="height:180px; object-fit:cover;">
            @else
                <div class="d-flex align-items-center justify-content-center bg-light"
                     style="height:180px;">
                    <i class="fa fa-book fa-4x text-secondary"></i>
                </div>
            @endif
            <div class="p-3">
                <h6 class="fs-5 mb-0 pb-0">
                    {{ $book->title }}
                </h6>
                <p class="mb-3">
                    <strong>Language:</strong>
                    {{ \App\Enums\BookLanguage::options()[$book->language] ?? '-' }}
                </p>
                <div class="d-flex gap-2">
                    <a href="{{ route('front.library.files', $book->slug) }}"
                       class="vs-btn flex-fill"
                       style="padding:13px!important;font-weight:400!important;">
                        View Details
                    </a>
                    @if($book->files->count() == 0)
                        <button class="vs-btn flex-fill" disabled>
                            No Files
                        </button>
                    @elseif($book->files->count() == 1)
                        <a href="{{ route('front.library.file.download', $book->files->first()->id) }}"
                           class="vs-btn flex-fill" style="background-color: #18a166!important;">
                            Download
                        </a>
                    @else
                        <div class="dropdown flex-fill">
                            <button class="vs-btn dropdown-toggle w-100"
                                    type="button" style="background-color: #18a166!important;"
                                    data-bs-toggle="dropdown">
                                Download
                            </button>
                            <ul class="dropdown-menu w-100">
                                @foreach($book->files as $file)
                                    <li>
                                        <a class="dropdown-item"
                                           href="{{ route('front.library.file.download', $file->id) }}">
                                            {{ \Illuminate\Support\Str::limit($file->file_name, 15) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
@empty
    <div class="col-12 text-center">
{{--        <h4>No books found.</h4>--}}
    </div>
@endforelse