@extends('web.template.master')

@section('content')

<!-- BLOG -->
<section class="gallery section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                @foreach($posts as $index => $post)
                <div class="card flex-md-row mb-4 border-light shadow-sm h-md-250">
                    <div class="text-center p-2">
                        <img class="card-img-left flex-auto align-center" style="border-radius: 5px;" height="275" width="325" src="{{url('/images/image').'/'.$post->image}}" alt="{{$post->title}}">
                    </div>
                    <div class="card-body d-flex flex-column align-items-start">

                        <h3 class="card-title mb-0">{{$post->title}}</h3>
                        <p class="card-text mb-auto">
                            {!! mb_strimwidth( $post->content, 0, 160, "...") !!}

                        </p>

                        <a href="{{url('/blog').'/'.$post->permalink}}">read</a>

                    </div>
                </div>
                @endforeach
            </div>
            <!-- Side widgets-->
            <div class="col-lg-4">
                <!-- Categories widget-->
                <div class="card mb-4">
                    <div class="card-header">Categories</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="#!">Web Design</a></li>
                                    <li><a href="#!">HTML</a></li>
                                    <li><a href="#!">Freebies</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-6">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="#!">JavaScript</a></li>
                                    <li><a href="#!">CSS</a></li>
                                    <li><a href="#!">Tutorials</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Side widget-->
                <div class="card mb-4">
                    <div class="card-header">Latest Post</div>
                    <div class="card-body">You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!</div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection