@extends('layouts.app')

@section('body')
<section class="page-header page-header-modern bg-color-grey page-header-md">
    <div class="container">
        <div class="row">
            <div class="col-md-12 align-self-center p-static order-2 text-center">
                <h1 class="text-dark font-weight-bold text-8">News</h1>
                <span class="sub-title text-dark">Check out our Latest News!</span>
            </div>
            <div class="col-md-12 align-self-center order-1">
                <ul class="breadcrumb d-block text-center">
                    <li><a href="#">Home</a></li>
                    <li class="active">News</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<div class="container py-4">

    <div class="row">
        <div class="col">
            <div class="blog-posts">

                <div class="masonry-loader masonry-loader-showing">
                    <div class="masonry row" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
                        @foreach ($posts as $item)
                        <div class="masonry-item no-default-style col-md-4 col-lg-3">
                            <article class="post post-medium border-0 pb-0 mb-5">
                                <div class="post-image">
                                    <a href="javascript:void(0)">
                                        <img src="{{ env('APP_FILE_LOCATION_LOCAL').'uploads/media/'.$item->img }}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="" />
                                    </a>
                                </div>

                                <div class="post-content">

                                    <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="{{ url('single-post/'.$item->id) }}">{{ $item->title }}</a></h2>
                                    <p>{{ $item->title }}</a></h2>
                                        <p>{{ strlen($item->description) > 150 ? substr($item->description, 0, 150). '...' : $item->description}}</p>

                                    <div class="post-meta">
                                        <span><i class="far fa-folder"></i> <a href="{{ url('single-post/'.$item->id) }}">{{ $item->type }}</a></span>
                                        <span class="d-block mt-2"><a href="javascript:void(0)" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
                                    </div>

                                </div>
                            </article>
                        </div>  
                        @endforeach
                        

                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <ul class="pagination float-end">
                            <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>
@endsection

@section('scripts')
    <script>$('.navMedia').addClass('active')</script>
@endsection