@extends('front-end.inc.layout')

@section('content')

<!-- Page Title #4
============================================= -->
<section id="page-title" class="page-title bg-overlay bg-parallax bg-overlay-gradient">
    <div class="bg-section">
        <img src="{{asset('images/background/mybg.jpeg')}}" alt="Background" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="title title-4 text-center">
                    <div class="title--content">
                        <div class="title--heading">
                            <h1>{{__('main.Blogs')}}</h1>
                        </div>
                    </div>
                    <div class="divider--shape-1down divider--shape-gray"></div>
                </div>
                <!-- .title end -->
            </div>
            <!-- .col-md-12 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
</section>
<!-- #page-title end -->




<!-- Blog Carousel
============================================= -->
<section id="blogCarousel" class="blog blog-carousel bg-gray pb-90">
    <div class="container">
        {{-- <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
                <div class="heading heading-1 mb-50 text--center">
                    <h2 class="heading--title mb-0">{{__('main.Blogs')}}</h2>
                    <div class="divider--shape-4"></div>
                </div>
            </div>
            <!-- .col-md-8 end -->
        </div> --}}
        <!-- .row end -->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="carousel carousel-dots" data-slide="3" data-slide-rs="2" data-autoplay="true" data-nav="false" data-dots="true" data-space="0" data-loop="true" data-speed="800">
                    <!-- Blog Entry #1 -->
                    @forelse ($activities as $activity)
                    <div class="blog-entry">
                        <div class="entry--img">
                            <a href="#">
								<img src="{{asset('storage/'.$activity->banner)}}" alt="entry image"/>
							</a>
                        </div>
                        <div class="entry--content">
                            <div class="entry--title">
                                <h4 class="mb-0"><a href="{{route('activity_detail',$activity->id)}}">{{$activity->title}}</a></h4>
                            </div>
                            <div class="entry--bio">
                            </div>
                            <div class="entry--footer">
                                <div class="entry--date">
                                    <i class="fa fa-calendar"></i>  {{date('Y-m-d',strtotime($activity->created_at))}}
                                </div>

                            </div>
                        </div>
                        <!-- .entry-content end -->
                    </div>
                    <!-- .blog-entry end -->
                    @empty
                    {{__('main.empty')}}
                @endforelse
                </div>
                <!-- .carousel end -->
            </div>
            <!-- .col-md-6 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
    <div class="center">
        {!! $activities->links() !!}
    </div>
</section>
<!-- #blogCarousel end -->

@endsection