@extends('layouts.sahitya')
@section('section')
<main class="primary-body">
    <section class="pagenav">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">गृह पृष्ठ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">पुस्तकहरु</li>
                </ol>
            </nav>
        </div>
    </section>

    <section class="blog-posts-area section no-gap">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 post-list blog-post-list">
                    <!-- Page heading -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="page-heading mb-4">
                                <h1>पुस्तकहरु</h1>
                            </div>
                        </div>
                    </div>

                    <!-- All books list -->
                    <div class="row">
                        @foreach($books as $book)
                            <div class="col-sm-6 col-md-4">
                                <div class="book">
                                    <img src="{{ $book->image() }}" alt="">
                                    <h4><a href="{{ url('book/' . $book->id) }}">{{ $book->title }}</a></h4>
                                    <p><span>लेखकको नाम:</span> {{ $book->author }}</p>
                                    <p><span>भाषा:</span> {{ $book->lang }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- end all books -->

                    <!-- Pagination -->
                    <div class="row mt-4">
                        <div class="col-md-12 d-flex justify-content-center">
                            {{ $books->links() }}
                    
                        </div>
                    </div>
					<br>
                    <!-- end pagination -->

                </div>

                <!-- Sidebar -->
                <div class="col-lg-4 sidebar">
                    <div class="single-widget recent-posts-widget">
                        <h4 class="title pb-1">पुस्तकहरु</h4>
                        <div class="blog-list">
                            @foreach($popular as $book)
                                <div class="single-recent-post d-flex flex-row">
                                    <div class="recent-thumb">
                                        <img src="{{ $book->image() }}" alt="">
                                    </div>
                                    <div class="recent-details">
                                        <a href="{{ url('book/' . $book->id) }}">
                                            <h4>{{ $book->title }}</h4>
                                        </a>
                                    </div>
                                </div>	
                            @endforeach
                        </div>								
                    </div>		
                </div>
            </div>
        </div>	
    </section>
</main>
@endsection


<style>
	.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.pagination li {
    display: inline-block;
}

.pagination li a,
.pagination li span {
    display: block;
    padding: 6px 12px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.pagination li a:hover {
    background-color: #e0e0e0;
    color: #000;
}

.pagination li.active span {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
}
.page-item.active .page-link {
	background-color: #2D2F93 !important;
	    border-color: #2D2F93 !important;
}

</style>