@extends('web.layouts.container')

@section('content')

<main>
    <!-- Start pg-header -->
    <section class="pg-header section">
        <div class="container">
            <div class="bread mb-4">
                <a href="{{ route('home') }}" class="pg_link"><img src="{{ asset('assets/web/images/icon.png')}}" alt="" class="icon"/></a> /
                <span class="pg_link active">{{ __('main.news') }}</span>
            </div>
            <h1 class="title text-white text-uppercase fw-bold text-center">{{ __('main.news') }}</h1>
        </div>
        <img src="{{ asset('assets/web/images/pg-header-3.png')}}" alt="" class="bg"/>
    </section>

    <!-- Start news-sec -->
    <section class="news-sec section">
        <div class="container">
            <div class="row">
                @foreach ($articles as $item)
                    
                <div class="col-lg-4">
                    <div class="news_card">
                        <div class="img-box">
                            <img src="{{ asset($item->main_photo)}}" alt="" class="sec-img"/>
                            <div class="date">
                                <span class="day color-primary">{{ date('d', strtotime($item->news_date)) }}</span>
                                <p class="month mb-0">{{ date('M', strtotime($item->news_date)) }} <br> {{ date('Y', strtotime($item->news_date)) }}</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="title mb-4">{{ $item->currentDescription->title }}</h5>
                            <a href="{{ $item->url }}" class="more_link d-block color-primary mt-4">
                                {{ __('main.learn_more') }} <i class="fa-solid fa-angle-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
                
            </div>
            <div class="pagination-wrapper wow zoomIn mt-5" style="visibility: visible; animation-name: zoomIn;">
                {{ $articles->links() }}
                
            </div>
        </div>
    </section>

   <!-- Start downloading-sec -->
   @include('web.layouts.downloading')
</main>
@endsection

@section('content_js')

@endsection