@section('page-title', $categorylist->title)
{{-- @section('page-description', $detail->description) --}}
@section('page-image', $categorylist->image)


@extends('site.master')
@section('main-content')
    @php
        $currentlang = app()->getLocale();
    @endphp
    <section class="af-hdr" style="">
        <div class="container position-relative">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">


                        {{ $categorylist->title ?? '' }}</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ URL::to('/') }}"
                                        class="text-decoration-none text-white"><i class="fas fa-home mr-2"></i>
                                        @lang('language.home')</a>
                                </li>
                                <li class="breadcrumb-item text-white" aria-current="page">{{ $categorylist->title ?? '' }}
                                </li>
                            </ol>
                        </nav>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-light">

        <div class="container py-5">
            <div class="row g-4">

                <div class="col-lg-10 offset-lg-1">
                    {{$list}}
                    <div>
                        @if ($list->isNotEmpty())
                            <ul class="d-flex gap-3 w-100 flex-column">


                                @forelse ($list as $key => $item)
                                    <li
                                        class="position-relative py-3 px-2 d-flex align-items-between justify-content-start gap-4 border-bottom rounded flex-grow-1 text-hover-danger hover-shadow">
                                        <div class="img-section-l bg-white d-flex align-items-center justify-content-center flex-grow-1"
                                            style="width: 350px; height:200px;">


                                        @if ($key <= 3)
                                        <img src="{{ asset($item->image ?? 'site/img/default.png') }}"
                                        alt="" class="w-100 h-100 object-fit-cover"
                                        style="object-fit: cover; width: 200px;">
@else
<img class="lazy"
data-src="{{ asset($item->image ?? 'site/img/default.png') }}"
alt="" class="w-100 h-100 object-fit-cover"
style="object-fit: cover; width: 200px;">
                                        @endif


                                        </div>
                                        <div
                                            class="cotnent-section-relative flex-grow-1 d-flex align-items-start justify-content-between flex-column py-4 w-75">
                                            <span class="fw-bold fs-5 fwc-600">
                                                {{ $item->title }}
                                            </span>
                                            @isset($item->published_date)
                                                <div class="mt-2">
                                                    <span
                                                        class="fw-bold fs-7 text-custom-blue-dark2">{{ getNepaliDate($item->published_date) }}</span>
                                                </div>
                                            @endisset


                                        </div>
                                        <a href="{{ route('post.detailwithcategory', ['postcategory' => $categorylist->slug, 'slug' => $item->slug]) }}"
                                            class="stretched-link"></a>
                                    </li>
                                @empty
                                    <p>No items found.</p>
                                @endforelse
                            </ul>

                            {{ $list->links() }}
                        @else
                            <div class="no-data-container">
                                <!-- SVG Illustration -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="no-data-icon">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="8" y1="15" x2="16" y2="15"></line>
                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                </svg>

                                <!-- No Data Message -->
                                <p class="no-data-text">No Data Available</p>
                            </div>

                        @endif
                    </div>

                </div>





            </div>
        </div>
        </div>
    </section>
@endsection
@push('scripts')
    <style>
        .no-data-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
        }

        .no-data-icon {
            color: #ccc;
            margin-bottom: 20px;
        }

        .no-data-text {
            font-size: 18px;
            color: #555;
            font-weight: bold;
        }
    </style>
@endpush