@extends('layouts.master')
@section('content')
    @section('page_title')
        Blog
    @endsection
    @section('current_path')
        Blog
    @endsection
    @include('pages.partials.header')
    <section class="blog-area-two pt-100">
        <div class="container">
            <div class="row"> 
                <div class="col-lg-9">
                    <div class="row">
                        @foreach ($posts as $post)
                            <div class="col-sm-6 col-lg-4 wow fadeInUp" data-wow-delay=".3s">
                                <div class="blog-item">
                                    <div class="blog-top">
                                        <a href="{{ route('post', [ 'slug' => $post->slug ]) }}">
                                            <img src="{{ Voyager::image($post->image) }}" alt="Blog">
                                        </a>
                                    </div>
                                    <div class="blog-bottom">
                                        <h3>
                                            <a href="{{ route('post', [ 'slug' => $post->slug ]) }}">
                                                {{ $post->title }}
                                            </a>
                                        </h3>
                                        <p>{{ \Str::substr($post->excerpt, 0, 120) }}...</p>
                                        <ul>
                                            <li>
                                                <a href="{{ route('post', [ 'slug' => $post->slug ]) }}">
                                                    Lire plus
                                                    <i class="icofont-long-arrow-right"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <i class="icofont-calendar"></i>
                                                {{ \date('d-m-Y', strtotime($post->date)) }}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div> 
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-3">
                    <h3>Facebook</h3>
                    <div class="fb-page" data-href="{{ setting('site.facebook') }}" data-tabs="timeline" data-width="600" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="{{ setting('site.facebook') }}" class="fb-xfbml-parse-ignore"><a href="{{ setting('site.facebook') }}">Facebook</a></blockquote></div>
                    <br>
                    <h3>Twitter</h3>
                    <a class="twitter-timeline" data-width="400" data-height="250" href="{{ setting('site.twitter') }}?ref_src=twsrc%5Etfw">Tweets by midefehops-asbl</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('specific_scripts')
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v14.0" nonce="wqyie0x1"></script>
@endsection