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

            <div class="col-12 col-lg-9 left-sidebar" id="listing_data">
                @forelse($data as $category)
                @php 
                $category = $category->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('story')}}/{{$story['slug']}}">
                        <img src="{{url($story['image'])}}" 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('story')}}/{{$story['slug']}}">{{$story['title']}}</a></h3>
                            <div class="listing-metas">
                                <span>By <a
                                        href="{{trans_url('story')}}/{{$story['slug']}}">{{$story['user']}}</a></span>
                                <span><a
                                        href="{{trans_url('story')}}/{{$story['slug']}}">{{$story['category']}}</a></span>
                            </div>
                            <p>{{ Str::limit($story['description'],300 )}}</p>
                        </div>
                        <a href="{{trans_url('story')}}/{{$story['slug']}}" class="btn btn-theme">Continue Reading</a>
                    </div>
                </div>
                @empty
                @endif
                <nav class="pagination-wrap mb-50" aria-label="Page navigation example">
                    <ul class="pagination">
                        {!!view('paginator', compact('meta'))!!}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>