@extends('layouts.frontend.app')

@section('content')

<section class="module paralax paallax-3 mt-1" style="background-image: url(''); background-position: 100% 120px; height: 120px;">
    <div class="container">
        <div class="row">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mt-4">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Posts</li>
                </ol>
            </nav>
        </div>
        <!-- <h3><span style="background-color: #dc3545; border-radius: 10px; padding: 10px;">Customize Your own PC. </span></h3> --}} -->
    </div>
</section>

          <!-- Start post Area -->
          <div class="post-wrapper pt-100">
              <!-- Start post Area -->
              <section class="post-area">


                <div class="container">
                    <div class="row">
                      <div class="col-md-8">
                            <div class="row">
                                @if($posts->count() > 0)
                                    @foreach ($posts as $post)
                                            <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <img class="card-img-top" src="{{ asset('storage/app/public/post/'.$post->image)}}">
                                                    <div class="card-block p-2">
                                                        <a href="{{ route('post', $post->slug) }}"> <h4 class="card-title mt-3">{{ $post->title}}</h4></a>
                                                        <div class="meta">
                                                            <a>{{ $post->user->name}}</a>
                                                            <hr>
                                                        </div>
                                                        <div class="card-text">      
                                                            {!! Str::limit($post->body, 100) !!}
                                                        </div>
                                                    </div>
                                                    <div class="card-footer">
                                                        <small>{{ $post->created_at->diffForHumans() }}</small>
                                                        <a href="{{ route('post', $post->slug) }}" class="btn btn-success float-right btn-sm">Read More</a>
                                                        <p class="footer">
                                                        <i class="fa fa-heart" aria-hidden="true"></i>
                                                        <a href="#">{{$post->likedUsers->count()}} Likes</a>
                                                        <i
                                                            class="ml-20 fa fa-comment"
                                                            aria-hidden="true"
                                                        ></i>
                                                        <a href="#">{{$post->comments->count()}} Comments</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                    @endforeach
                                    <div class="justify-content-center d-flex mb-5">
                                        {{ $posts->links() }}
                                    </div>
                                    @else
                                    <h4>No Post available</h4>
                                @endif
                            </div>
                      </div>
                
                      @include('layouts.frontend.partials.sidebar')
                      
                    </div>
                  </div>







































              </section>
              <!-- End post Area -->
          </div>
          <!-- End post Area -->



@endsection