@extends('layouts.frontend.app')

@section('content')
    <!-- Start Page Title Area -->
    <div class="page-title-area bg-21">
        <div class="container">
            <div class="page-title-content">
                <h2>أخبارنا</h2>

            </div>
        </div>
    </div>
    <!-- End Page Title Area -->

    <!-- Start Blog Column Three Area -->
    <div class="blog-column-three-area ptb-100" data-aos='fade-up' data-aos-duration='1000' data-aos-delay='1000'>
        <div class="container">
            <div class="row">
                @foreach ($posts as $post)

                <div class="col-lg-4 col-md-6 offset-md-3 offset-lg-0">
                    <div class="single-blog-post">
                        <a href="{{ route('singleblog',$post->id) }}">
                            <img src="{{ $post->getFirstMediaUrl('post','thumb') }}" alt="Image">
                        </a>

                        <div class="news-content">
                            <a href="{{ route('singleblog',$post->id) }}">
                                <h3>{{ $post->name }}</h3>
                            </a>

                            <a href="{{ route('singleblog',$post->id) }}" class="read-more">
                                إقرا المزيد
                            </a>
                        </div>
                    </div>
                </div>

                @endforeach

{{ $posts->links() }}
                {{-- <div class="col-lg-12 col-md-12">
                    <div class="pagination-area">
                        <a href="#" class="prev page-numbers">
                            <i class="bx bx-chevron-left"></i>
                        </a>

                        <a href="#" class="next page-numbers">
                            <i class="bx bx-chevron-right"></i>
                        </a>
                    </div>
                </div> --}}


            </div>
        </div>
    </div>
    <!-- End Blog Column Three Area -->
    @endsection