@extends('layouts.app')
@section('head')
    <style>
        div#content * {
            font-family: Cairo, sans-serif !important;
        }
    </style>
@endsection
@section('content')
    <!-- End Navbar Area -->
    <section class="services-area bg-f2f6f9 ptb-110">
        <div class=container>
            <div class=row>
                <div class="col-lg-12 col-md-12">
                    <a href="{{ ($component = $publicities->firstWhere('position', \App\Models\PublicityComponent::TYPE_Tp))->url }}" class=text-center target=_blank>
                        <img data-src="{{ $component->showUrl() }}" alt="{{ $component->title }}" title="{{ $component->title }}" class="img-fluid lazy" style="width: 100%;">
                    </a>
                </div>
            </div>
            <div class=row>
                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    {{--                    <article class="post-wrapper last-child mb-5 mt-4 post-1">
                                            <header class="post-info mb-0 text-right pb">
                                                <a class="" href="">
                                                  <b>  الدوري الإنجليزي الممتاز</b>
                                                </a>
                                            </header>
                                            <div class="post-info text-right">
                                                <header class=entry-header>
                                                    <h3 class="product_title blog-title entry-title"><a href="">Lorem Ipsum is simply dumm</a></h3>
                                                </header>
                                                <p>محمد مصطفى<br>
                                                آخر تحديث منذ يوم</p>
                                                <hr>
                                                <time><span><b>20:00</b></span> <span class=text-black-50>23 /1 /2020</span></time>
                                            </div>
                                            <footer data-sponsorship-slot=card data-sponsorship-slot-id=footer><i class=media></i>
                                                <a href="" class=category itemprop=articleSection title="الدوري الإسباني"> <b>الدوري الإسباني</b></a>
                                                <time>15د</time>
                                            </footer>
                                        </article>--}}
                    <div class="blog-details bg-white p-3 mt-4">
                        {{-- <a class="" href="">
                             <b> الدوري الإنجليزي الممتاز</b>
                         </a>--}}
                        <hr>
                        <div class=article-content>
                            <h3 class="product_title blog-title entry-title"><a>{{ $news->title }}</a></h3>
                            <p>كتب | {{ $news->creator->full_name }}
                                @if($news->editors->count())
                                    <br>آخر تحديث {{ $news->audits()->latest()->first()->created_at->diffForHumans() }}
                                @endif
                            </p>
                            <hr>
                            <div class="entry-meta display-flex">
                                <ul class="pl-3 mt-1">
                                    <li><span>{{ $news->published->format('H:i') }}</span> <a href="#">{{ $news->published->format('Y/m/d') }}</a></li>
                                </ul>
                                @if(0)
                                    <div class=article-share>
                                        <ul class=social>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fab fa-facebook-f"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fab fa-twitter"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fa fa-envelope"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fa fa-link"></i></a></li>
                                        </ul>
                                    </div>
                                @endif
                                {{--<a href="#" class="btn btn-transparent btn-sm mr-2 p13"><i class="fa fa-comment"></i> التعليقات (1)</a>--}}
                            </div>
                        </div>
                        <div class=article-image>
                            <img data-src="{{ $news->cover_url }}" class=lazy alt=image>
                        </div>

                        <div class="article-content widget-area">
                            <div class="tagcloud mb-4">
                                @foreach ($news->tags as $tag)
                                    <a href="{{ $tag->url }}">{{ $tag->name }}</a>
                                @endforeach
                            </div>
                            <div id=content>{!! $news->content !!}</div>
                            <div class="entry-meta text-center">
                                @if(0)
                                    <div class="article-share mb-3">
                                        <ul class=social>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fab fa-facebook-f"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fab fa-twitter"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fa fa-envelope"></i></a></li>
                                            <li class=ml-0><a href="#" target=_blank class=pl-0><i class="fa fa-link"></i></a></li>
                                        </ul>
                                    </div>
                                @endif
                                <post-share url="{{ $news->url }}" :big=true></post-share>
                                {{--<a href="#" class="btn btn-primary btn-sm"><i class="fa fa-comment"></i> التعليقات (1)</a>--}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                    <div class="sticky p-3 bg-white mt-4">
                        <h6 class="float-right text-muted"> إعلان</h6>
                        <a href="{{ ($component = $publicities->firstWhere('position', \App\Models\PublicityComponent::TYPE_LT))->url }}" target=_blank>
                            <img data-src="{{ $component->showUrl() }}" alt="{{ $component->title }}" title="{{ $component->title }}" class="img-fluid p-3 lazy" style="width: 100%;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section("js")
    <script>
        if ($.isFunction($.fn.owlCarousel))
            $('.owl-carousel').owlCarousel({
                rtl: true,
                loop: true,
                autoplay: true,
                nav: false,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 9
                    }
                }
            });
    </script>
@endsection