@extends('layouts.app')

@section('title', $news->title)
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags((string) $news->summary), 160))

@section('content')
<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
    <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"><a href="{{ route('news.index') }}">{{ __('news.breadcrumb_news') }}</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ \Illuminate\Support\Str::limit($news->title, 48) }}</li>
            </ul>
        </div>
    </div>
</div>

<div class="blog-details-area section-gap-equal">
    <div class="container">
        <div class="row row--30">
            <div class="col-lg-8">
                <div class="blog-details-content">
                    <div class="entry-content">
                        <span class="category">{{ $news->is_currently_important ? __('news.category_important') : __('news.category_default') }}</span>
                        <h3 class="title">{{ $news->title }}</h3>
                        <ul class="blog-meta">
                            <li><i class="icon-27"></i>{{ optional($news->published_at)->locale(app()->getLocale())->isoFormat('LL') }}</li>
                        </ul>
                        @if($news->image_detail_url)
                        <div class="thumbnail">
                            <img src="{{ $news->image_detail_url }}" alt="{{ $news->title }}" width="750" height="420" loading="lazy">
                        </div>
                        @endif
                    </div>

                    @if($news->summary)
                        <p class="lead">{{ $news->summary }}</p>
                    @endif

                    <div class="news-body">
                        @sanitized($news->description)
                    </div>
                </div>

                @if($prevNews || $nextNews)
                <div class="blog-pagination">
                    <div class="row g-5">
                        <div class="col-lg-6">
                            @if($prevNews)
                            <div class="blog-pagination-list prev-post">
                                <a href="{{ route('news.show', ['slug' => $prevNews->slug]) }}">
                                    <i class="icon-west"></i>
                                    <span>{{ \Illuminate\Support\Str::limit($prevNews->title, 60) }}</span>
                                </a>
                            </div>
                            @endif
                        </div>
                        <div class="col-lg-6">
                            @if($nextNews)
                            <div class="blog-pagination-list next-post">
                                <a href="{{ route('news.show', ['slug' => $nextNews->slug]) }}">
                                    <span>{{ \Illuminate\Support\Str::limit($nextNews->title, 60) }}</span>
                                    <i class="icon-east"></i>
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <div class="mt-4">
                    <a href="{{ route('news.index') }}" class="edu-btn btn-border btn-medium">
                        <i class="icon-west"></i> {{ __('news.back_to_list') }}
                    </a>
                </div>
            </div>

            <div class="col-lg-4">
                @include('news.partials.sidebar', ['latestSidebar' => $latestSidebar])
            </div>
        </div>
    </div>
</div>
@endsection