@extends('web.layouts.container')

@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>{{$title}}</span>
                    </li>
                </ul>
            </div>
            <div class="section_head text-center">
                <h2>{{$title}}</h2>
            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">
    </section>
    <!--Start blog-sec -->
    <section class="blog-sec section-padding ">
        <div class="container">
            <div class="row">
                @if($latestArticle)
                    <div class="col-md-12">
                        <a class="d-block" href="{{route('article.show', $latestArticle->article_id)}}">
                            <div class="main-card">
                                <img src="{{asset($latestArticle->image)}}" class="main-img" alt="">
                                <div class="text-content">
                                    <h1>{{$latestArticle->title}}</h1>
                                    <span class="date">Date: {{date('d,m,Y', strtotime($latestArticle->created_at))}}</span>
                                </div>
                            </div>
                            <div class="info p-4 bg-light mb-5">
                                <div class="text mb-2">{!! stripText($latestArticle->description, 100) !!}</div>
                            </div>
                        </a>
                    </div>
                @endif
                @if(count($articles))
                    <div class="news_swiper">
                        <div class="swiper-wrapper">
                            @foreach($articles as $article)
                                <div class="swiper-slide">
                                    <a class="d-block" href="{{route('article.show', $article->article_id)}}">
                                        <div class="news-card">
                                            <img src="{{asset($article->image)}}" alt="" class="news-img">
                                            <div class="card-body">
                                                <h5>{{$article->title}}</h5>
                                                <p class="p">{{stripText($article->description, 100)}}</p>
                                                <span class="date">Date: {{date('d,m,Y', strtotime($article->created_at))}}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('main').addClass('news_page')
    </script>
@endsection