@extends('layout')

@section('content')
    @include('pages._menu')
    <!--main content start-->
    <section class="site-section">
        <div class="container">
            <div class="row mb-4">
                <div class="col-md-6">
                    <h2 class="mb-4">Category:


                        @foreach($posts as $post)

                                @if($post->hasCategory())
                                    <span class="category" href="{{route('category.show', $post->category->slug)}}"> {{$post->getCategoryTitle()}}</span>
                                @endif

                                    @break
                        @endforeach



                    </h2>
                </div>
            </div>

            <div class="row blog-entries">
                <div class="col-md-12 col-lg-8 main-content">
                    <div class="row mb-5 mt-5">

                        <div class="col-md-12">
                            @foreach($posts as $post)
                                <div class="post-entry-horzontal">
                                    <a href="{{route('post.show', $post->slug)}}">
                                        <div class="image element-animate" data-animate-effect="fadeIn" style="background-image: url({{$post->getImage()}});"></div>
                                        <span class="text">
                          <div class="post-meta">
                              @if($post->hasCategory())
                                  <span class="category" href="{{route('category.show', $post->category->slug)}}"> {{$post->getCategoryTitle()}}</span>
                              @endif
                            <span class="mr-2">{{$post->getDate()}} </span> &bullet;
                          </div>
                          <h2>{{$post->title}}</h2>
                        </span>
                                    </a>
                                    <hr>
                                </div>

                                <!-- END post -->

                            @endforeach



                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center">
                            <nav aria-label="Page navigation" class="text-center">
                                {{$posts->links()}}
                            </nav>
                        </div>
                    </div>

                </div>

                <!-- END main-content -->

                @include('pages._sidebar')

            </div>
        </div>
    </section>
@endsection