@extends('layouts.pages')

@section('content')

	<!-- Hero Start -->
        <section class="bg-half bg-light d-table w-100" style="background: url('{{ asset('images/kosmic-organic-hydroponic-vegetable.jpg') }}');">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12 text-center">
                        <div class="page-next-level">
                            <h4 class="title"> Blog </h4>
                            <div class="page-next">
                                <nav aria-label="breadcrumb" class="d-inline-block">
                                    <ul class="breadcrumb bg-white rounded shadow mb-0">
                                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Kosmic Farms</a></li>
                                        <li class="breadcrumb-item"><a href="{{ url('/blog')  }}">Blog</a></li>
                                        @if(isset($category))
                                        	<li class="breadcrumb-item active" aria-current="page"><a href="#">{{ $category->name }}</a></li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>  <!--end col-->
                </div><!--end row-->
            </div> <!--end container-->
        </section><!--end section-->
        <!-- Hero End -->

        <!-- Shape Start -->
        <div class="position-relative">
            <div class="shape overflow-hidden text-white">
                <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
                </svg>
            </div>
        </div>
        <!--Shape End-->

        <!-- Blog Start -->
        <section class="section">
            <div class="container">
                <div class="row">
                    <!-- BLog Start -->
                    <div class="col-lg-8 col-md-6">
                        <div class="row">
                        
                        @if(isset($articles))
                        @foreach($articles as $article)
                            <div class="col-lg-6 col-md-12 mb-4 pb-2">
                                <div class="card blog rounded border-0 shadow">
                                    <div class="position-relative">
                                        <img src="{{ asset('/media/images/'.$article->banner_url) }}" class="card-img-top rounded-top" alt="{{ $article->title }}">
                                    <div class="overlay rounded-top bg-dark"></div>
                                    </div>
                                    <div class="card-body content">
                                        <h5><a href="{{ url('/blog/article/'.$article->short_url) }}" class="card-title title text-dark">{{ $article->title }}</a></h5>
                                        <p class="text-muted mb-0">{{ $article->description }}</p>
                                        <div class="post-meta d-flex justify-content-between mt-3">
                                            <a href="{{ url('/blog/article/'.$article->short_url) }}" class="text-muted readmore">Read More <i class="mdi mdi-chevron-right"></i></a>
                                        </div>
                                    </div>
                                    <div class="author">
                                        <small class="text-light user d-block"><i class="mdi mdi-account"></i> {{ $article->author->name }}</small>
                                        <small class="text-light date"><i class="mdi mdi-calendar-check"></i> {{ $article->created_at }}</small>
                                    </div>
                                </div>
                            </div><!--end col-->
                        @endforeach
                        @else
                        <h4 class="heading font-weight-bold mt-4 mb-3">Down for <span class="element text-primary" data-elements=" Maintenance"> Maintenance</span><span class="typed-cursor">|</span></h4>
                        @endif
                            
        				@if(isset($pagination))
                            <!-- PAGINATION START -->
                            <div class="col-12">
                                <ul class="pagination justify-content-center mb-0">
                                    <li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
                                    <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                    <li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Next">Next</a></li>
                                </ul>
                            </div><!--end col-->
                            <!-- PAGINATION END -->
                         @endif  
                            
                        </div><!--end row-->
                    </div><!--end col-->
                    <!-- BLog End -->

                    <!-- START SIDEBAR -->
                    <div class="col-lg-4 col-md-6 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
                        <div class="card border-0 sidebar sticky-bar rounded shadow">
                            <div class="card-body">
                                @include('blog.column')
                            </div>
                        </div>
                    </div><!--end col-->
                    <!-- END SIDEBAR -->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Blog End -->
@endsection