@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>
<!-- end bread crumb -->

<!-- Start about info Area -->
<section class="blog-posts-area section no-gap">
    <div class="container">
        <div class="row">
            <div class="col-md-12 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>
                <!-- end page heading -->

                <!-- Activities row -->
                <div class="row pb-40">
                    @foreach($activities as $post)
                        <div class="col-sm-6 col-md-4">
                            <div class="dept">
                                <a href="{{ url('activities/' . $post->id) }}">
                                    <div class="img-box">
                                        <img src="{{ $post->url() }}" alt="{{ $post->title }}">
                                    </div>
                                    <h3>{{ $post->title }}</h3>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- end activities row -->

                <!-- Pagination -->
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center">
                        {{ $activities->links() }}
                        {{-- For Bootstrap 5 styling, use:
                        {{ $activities->links('pagination::bootstrap-5') }} --}}
                    </div>
                </div>
				<br>
                <!-- end pagination -->

            </div>
        </div>
    </div>    
</section>
<!-- End about info Area -->
</main>
@endsection

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

.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: #d2d2d2;
    color: #000;
}

.pagination li.active span {
    background-color: #444;
    color: #fff;
    border-color: #444;
}

.page-item.active .page-link {
	background-color: #2D2F93 !important;
	    border-color: #2D2F93 !important;
}

</style>