@section('meta')
<title>{{ $title != null?'លទ្ធផល៖ '.$title:'ស្វែងរកព័ត៌មាន' }}</title>
    <meta property="og:image" content="{{ asset('thumbnail.jpg') }}" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="search" />
    <meta name="theme-color" content="#ffffff">
@endsection

<div class="main-content search-page">
    <div class="article-desc mt-3 mb-5 px-3">
        <h2>ស្វែងរក៖</h2>
        <form action="#" method="get">
            <div class="row mb-3">
                <div class="col-sm-12">
                  <input type="text" wire:model.deboune.500ms="title" class="form-control" id="search" placeholder="បញ្ចូលពាក្យទាក់ទងចំណងជើងព័ត៌មាន..." autofocus>
                </div>
                {{-- <div class="col-sm-2 mt-2 mt-sm-0">
                    <button class="btn btn-success text-white d-flex align-items-center justify-content-center h-100" disabled><i class='bx bx-search-alt-2'></i></button>
                </div> --}}
            </div>
        </form>
        @if ($title != null)
        <h4 class="d-inline-block">លទ្ធផល៖ <span class="fs-5 fst-italic text-decoration-underline">{{ $title }}</span></h4>
        @endif
        <hr>
        <div class="row m-0" wire:init="loadPosts">
            <div class="col-12 px-1 my-1" wire:loading.delay>
                <div class="d-flex justify-content-center align-self-center my-4 py-4">
                    <i class="bx bx-loader bx-spin  bx-md"></i>
                </div>
                @for ($i = 0; $i < $perpage; $i++)
                <div class="row m-0 my-2 cat-grid border-bottom border-primary pb-1 rounded-start rounded-end">
                    <div class="col-sm-6 px-1">
                        <div  class="ratio ratio-16x9 overflow-hidden">
                            <div class="placeholder-glow">
                                <span class="placeholder card h-100 col-12"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 card-text px-1 align-self-center placeholder-glow">
                        <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-12"></a>
                        <span class="placeholder col-7"></span>
                        <span class="placeholder col-5"></span>
                        <span class="placeholder col-4"></span>
                        <span class="placeholder col-8"></span>
                        <span class="placeholder col-6"></span>
                        <span class="placeholder col-6"></span>
                        <span class="placeholder col-4"></span>
                    </div>
                </div>
                @endfor
            </div>
            @forelse ($posts as $post)
            <div class="col-12 px-1 my-1 tippy-tooltip" data-title="{{$post->title}}">
                <div wire:key="{{ $loop->index }}" wire:loading.class="d-none" class="row m-0 cat-grid border-bottom border-primary pb-1 rounded-start rounded-end">
                    <div class="col-sm-6 px-1">
                        <a href="{{route('single',$post->id)}}"  class="ratio ratio-16x9 d-block overflow-hidden position-relative">
                            <img  src="{{ asset($post->feature_image) }}" alt="thumbnail" class="img-thumbnail w-100 object-fit-cover bg-transparent">
                        </a>
                    </div>
                    <div class="col-sm-6 px-1 align-self-center">
                        <a href="{{route('single',$post->id)}}" class="font-text h5 pb-0 pb-md-1 text-decoration-none fw-bolder lh-base">{{ Str::limit($post->title, 70, '...') }}</a>

                        <p>{!! Str::limit(strip_tags($post->description), 100, '...') !!}</p>
                        
                        <div class="d-flex flex-wrap flex-sm-row justify-content-between">
                            <span class="opacity-75 mb-0"><i class='bx bx-calendar'></i> {{ $post->date }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            @if ($readyToLoad)
            <div class="col-12">
                <h4 class="py-4 mb-0 d-flex justify-content-center align-items-center text-danger">មិនមានព័ត៌មានទាក់ទង</h4>
            </div>
            @endif
            @endforelse
            @if ($posts != null)
            <div class="col-12">
                {{ $posts->links() }}
            </div>
            @endif
        </div>
    </div>
</div>