@extends('layout')

@section('page-title', 'Blog')

@section('content')
    <div class="bg-subpage"></div>
    <div class="heading-title pt-60">
        <div class="container text-center">
            <div class="title heading2 text-center">Blog</div>
            <div class="desc body2 text-on-surface-variant1 mt-12">
                Discover latest technologies and development.
            </div>
        </div>
    </div>

    <div class="blog-list-page pt-80 pb-80">
        <div class="container">
            <div class="row row-gap-40">
                <div class="col-12 ">
                    @if(count($posts))
                        @foreach($posts as $post)
                            <a href="{{ route('blog.post', $post->slug) }}"
                               class="blog-item-filter item-main bora-16 overflow-hidden display-block border-outline mb-4">
                                <div class="row bg-white">
                                    <div class="col-md-6">
                                        <div class="bg-img w-100 h-100">
                                            <!--
                                        <img class="w-100 h-100 display-block object-fit-cover" src="{{ asset('blog/'.$post->id.'/'.$post->hero_image) }}" alt="{{ $post->title }}"/>
                                        -->
                                            <img class="w-100 h-100 display-block object-fit-cover"
                                                 src="{{ asset('blog/1/'.$post->hero_image) }}" alt="{{ $post->title }}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6 flex-item-center">
                                        <div class="infor">
                                            @foreach($post->categories as $category)
                                                <div
                                                    class="category caption1 fw-700 text-blue bg-blue-surface display-inline-block pt-4 pb-4 pl-10 pr-10 bora-8 mb-12">
                                                    {{ $category->name }}
                                                </div>
                                            @endforeach
                                            <div class="title heading5">{{ $post->title }}</div>
                                            <div class="desc text-on-surface-variant1 mt-12">
                                                {{ $post->excerpt }}
                                            </div>
                                            <div class="date text-label text-on-surface-variant1 mt-16">
                                                {{ date_format($post->updated_at, 'F d, Y') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    @else
                        <div style="height: 50vh; text-align: center" class="mt-5">
                            <h5>No posts available</h5>
                        </div>
                    @endif


                    <div class="mt-40">
                        {{ $posts->onEachSide(3)->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection