@extends('layouts.app')

@section('title', __('news.page_title'))
@section('meta_description', __('news.meta_description'))

@section('content')
<div class="edu-breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('news.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('news.breadcrumb_home') }}</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('news.breadcrumb_news') }}</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1"><span></span></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="" loading="lazy"></li>
        <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt="" loading="lazy"></li>
        <li class="shape-4"><span></span></li>
        <li class="shape-5 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt="" loading="lazy"></li>
    </ul>
</div>

<section class="section-gap-equal">
    <div class="container">
        <div class="row row--30">
            <div class="col-lg-8">
                @forelse($news as $item)
                @php
                    $thumb = $item->image_list_url ?: asset('assets/images/no-photo.png');
                    $detailUrl = route('news.show', ['slug' => $item->slug]);
                @endphp
                <div class="edu-blog blog-style-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <div class="inner">
                        <div class="thumbnail">
                            <a href="{{ $detailUrl }}">
                                <img src="{{ $thumb }}" alt="{{ $item->title }}" width="300" height="230" loading="lazy">
                            </a>
                        </div>
                        <div class="content">
                            @if($item->is_currently_important)
                            <div class="category-wrap">
                                <span class="blog-category">{{ __('news.category_important') }}</span>
                            </div>
                            @endif
                            <h5 class="title"><a href="{{ $detailUrl }}">{{ $item->title }}</a></h5>
                            <ul class="blog-meta">
                                <li><i class="icon-27"></i>{{ optional($item->published_at)->locale(app()->getLocale())->isoFormat('LL') }}</li>
                            </ul>
                            @if($item->summary)
                                <p>{{ Str::limit(strip_tags($item->summary), 180) }}</p>
                            @endif
                            <div class="read-more-btn">
                                <a class="edu-btn btn-border btn-medium" href="{{ $detailUrl }}">{{ __('news.read_more') }} <i class="icon-4"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="alert alert-info" role="status">{{ __('news.empty') }}</div>
                @endforelse

                {{ $news->withQueryString()->links('layouts.custom-pagination', ['paginationUlClass' => 'edu-pagination top-space-30 justify-content-start']) }}
            </div>
            <div class="col-lg-4">
                @include('news.partials.sidebar', ['latestSidebar' => $latestSidebar])
            </div>
        </div>
    </div>
</section>
@endsection