@extends("layout.app")
@section("content")
    <section class="text-center mt-20">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-8">
                    <article>
                        <div class="article__title text-center">
                            <h1 class="h2">{{$blog->title}}</h1>
                            <span>{{$blog->created_at->format("d/m/Y")}} - </span>
                            <span>

                                        <a href="{{route("blog.index",['category'=>$blog->blog_category->slug])}}">{{$blog->blog_category->title}}</a>
                                    </span>
                            <span> - {{$blog->views}} <i class="fa fa-eye"></i></span>
                        </div>
                        <div class="article__body">
                            <img alt="{{$blog->title}}" src="{{$blog->image}}">
                        </div>
                        <div class="article__body">
                            {!! $blog->content !!}
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-8" style="margin: 0 auto;
    float: none;">
                    <div class="comments">
                        <h3>التعليقات</h3>
                        <div class="fb-comments" data-href="{{route("blog.details",$blog->id)}}" data-numposts="5" data-width="100%" data-order-by="reverse_time"></div>
                    </div>

                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=1455688594751236&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
@endsection