@extends('layouts.site')

@section('meta_title')
    {{ locale_field($item, 'title') }} — {{ __('site.nav_news') }}
@endsection

@section('title')
    {{ locale_field($item, 'title') }}
@endsection

@section('content')
    @php
        $locale = app()->getLocale();
        $title = locale_field($item, 'title');
        $cover = site_media_url($item->image);
        $blocks = \App\Support\NewsBody::forDisplay($item);
        $datetime = optional($item->published_at)?->toIso8601String();
    @endphp

    <x-site.engage-shell :engage-type="$engageType" :engage-id="$engageId" :engagement="$engagement" class="news-detail-page site-container pb-24">
        <div class="news-detail-page__card" data-reveal="page">
            <nav class="news-detail-page__breadcrumb" aria-label="{{ __('site.news_breadcrumb') }}">
                <a class="news-detail-page__breadcrumb-link" href="{{ route('site.news.index', ['locale' => $locale]) }}">{{ __('site.nav_news') }}</a>
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" class="news-detail-page__breadcrumb-icon">
                    <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="news-detail-page__breadcrumb-current">{{ $title }}</span>
            </nav>

            <article class="news-detail-page__article" data-search-item="true" data-search-title="{{ $title }}">
                @if ($cover)
                    <img
                        alt="{{ $title }}"
                        class="news-detail-page__image"
                        loading="eager"
                        draggable="false"
                        src="{{ $cover }}"
                    >
                @endif
                <div class="news-detail-page__content">
                    <h1 class="news-detail-page__title">{{ $title }}</h1>
                    <div class="news-detail-page__meta">
                        <time datetime="{{ $datetime }}">{{ $item->formattedPublishedAt() }}</time>
                    </div>
                    @if (brand_content_stats_bar_enabled())
                        <div class="mt-4">
                            <x-site.engagement.stats-bar :engagement="$engagement" variant="news" />
                        </div>
                    @endif
                    <div class="news-detail-page__text">
                        @foreach ($blocks as $block)
                            @if (($block['type'] ?? '') === 'image' && ! empty($block['url']))
                                <img
                                    alt="{{ $block['alt'] ?? '' }}"
                                    class="my-4 max-w-full rounded-lg mx-auto"
                                    src="{{ $block['url'] }}"
                                >
                            @elseif (($block['type'] ?? '') === 'text')
                                <p>{{ $block['content'] }}</p>
                            @endif
                        @endforeach
                    </div>
                </div>
            </article>
        </div>

        @if ($related->isNotEmpty())
            <section class="news-detail-page__related" data-reveal="soft">
                <h2>{{ __('site.news_related') }}</h2>
                <ul class="news-list news-list--compact">
                    @foreach ($related as $relatedItem)
                        <x-site.cards.news :news="$relatedItem" />
                    @endforeach
                </ul>
            </section>
        @endif
    </x-site.engage-shell>
@endsection