@include('kpi::public.kpi.partial.header')
<section class="listing-page-wrap">
    <div class="container">
        <div class="row">
            @include('kpi::public.kpi.partial.aside')

            <div class="col-12 col-lg-9 left-sidebar" id="listing_data">
                @forelse($kpis as $kpi)
                @php 
                $kpi = $kpi->toArray([]);
                @endphp
                <div class="listing-single-item d-flex align-items-center flex-wrap">
                    <div class="col-12 col-lg-5 p-0 listing-image">
                        <a href="{{trans_url('kpi')}}/{{$kpi['slug']}}">
                        <img src="{{url($kpi['image']['main'])}}" class="img-fluid" alt="">
                        </a>
                    </div>
                    <div class="col-12 col-lg-6 p-0 listing-text">
                        <div class="listing-content">
                            <h3><a href="{{trans_url('kpi')}}/{{$kpi['slug']}}">{{$kpi['title']}}</a></h3>
                            <div class="listing-metas">
                                <span>By <a
                                        href="{{trans_url('kpi')}}/{{$kpi['slug']}}">User</a></span>
                                <span><a
                                        href="{{trans_url('kpi')}}/{{$kpi['slug']}}">Category</a></span>
                            </div>
                            <p>{{ Str::limit($kpi['description'], 300 )}}</p>
                        </div>
                        <a href="{{trans_url('kpi')}}/{{$kpi['slug']}}" class="btn btn-theme">Continue Reading</a>
                    </div>
                </div>
                <nav class="pagination-wrap mb-50" aria-label="Page navigation example">
                    <ul class="pagination">
                        @php 
                        $meta = $kpi['meta'];
                        @endphp
                        {!!view('paginator', compact('meta'))!!}
                    </ul>
                </nav>
                @empty
                @endif
            </div>
        </div>
    </div>
</section>