@extends('theme::layouts.web')

{{--
    NewsCategory landing — Protera theme override (task-4 v17.85).

    Replaces the standalone Modules/NewsCategories/Resources/views/web/default.blade.php
    fallback. Inherits topbar + site-header + site-footer + Vite-built CSS
    from theme::layouts.web. Pagination renders as Bootstrap-5
    <nav><ul class="pagination">…</ul></nav> because AppServiceProvider::boot()
    calls Paginator::useBootstrapFive() — without that, Laravel's default
    Tailwind paginator would inject huge raw <svg> chevrons (no Tailwind
    sizing classes are bundled in this theme).

    Vars (passed by NewsCategorySlugResolver::resolve()):
      - $category       NewsCategory
      - $newsList       LengthAwarePaginator<News>
      - $currentLocale  string
      - $defaultLocale  string
      - $locales        Collection<Locale>

    Test markers preserved verbatim from the legacy standalone view so the
    existing news-category-landing / news-categories-crud specs keep
    passing:
      [data-news-category-title], [data-news-list], [data-news-list-empty],
      [data-news-card], [data-news-id], [data-news-pinned-badge],
      [data-news-pagination].

    Per Schema.org best practice, microdata wraps the category meta only —
    individual news cards on the landing are NOT wrapped (each article gets
    its own microdata article on its own URL).
--}}

@section('title', $category->getTitle())
@section('description', $category->getTranslation('excerpt', $currentLocale) ?: '')

@section('content')
<main class="container py-5">
    <x-microdata::attributes :for="$category" tag="section" class="cms-news-category">
        <header class="mb-4">
            <h1 class="mb-2" data-news-category-title>
                <x-microdata::property
                    name="name"
                    :for="$category"
                    :value="$category->getTitle()" />
            </h1>

            @if ($category->getTranslation('excerpt', $currentLocale))
                <p class="lead text-muted mb-0">
                    <x-microdata::property
                        name="description"
                        :for="$category"
                        :value="$category->getTranslation('excerpt', $currentLocale)" />
                </p>
            @endif
        </header>

        @if ($category->getTranslation('content', $currentLocale))
            <div class="cms-news-category-content mb-5">
                {!! $category->getTranslation('content', $currentLocale) !!}
            </div>
        @endif
    </x-microdata::attributes>

    <hr>

    <section class="news-list mt-4" data-news-list>
        <h2 class="h4 mb-3">{{ __('newscategories::messages.news_list_heading') }}</h2>

        @if ($newsList->isEmpty())
            <div class="alert alert-light text-center text-muted py-4 mb-0" data-news-list-empty>
                <i class="bi bi-newspaper" style="font-size:32px;opacity:0.4;"></i>
                <p class="mb-0 mt-2">{{ __('newscategories::messages.no_news_yet') }}</p>
            </div>
        @else
            <div class="row g-4">
                @foreach ($newsList as $news)
                    @php
                        $newsUrl = $news->getUrl($currentLocale);
                        $newsTitle = $news->getTranslation('title', $currentLocale)
                            ?: $news->getTranslation('title', $defaultLocale);
                        $newsExcerpt = $news->getTranslation('excerpt', $currentLocale)
                            ?: $news->getTranslation('excerpt', $defaultLocale);
                    @endphp
                    @if ($newsUrl)
                        <div class="col-md-6 col-lg-4" data-news-card data-news-id="{{ $news->id }}">
                            <a href="{{ $newsUrl }}" class="card h-100 text-decoration-none">
                                <div class="card-body">
                                    @if ($news->is_pinned)
                                        <div class="mb-2" data-news-pinned-badge>
                                            <span class="badge bg-warning text-dark">
                                                <i class="bi bi-pin-angle-fill"></i>
                                                {{ __('newscategories::messages.news_pinned_badge') }}
                                            </span>
                                        </div>
                                    @endif
                                    <h3 class="h6 card-title">{{ $newsTitle }}</h3>
                                    @if ($newsExcerpt)
                                        <p class="card-text small text-muted">{{ \Illuminate\Support\Str::limit($newsExcerpt, 140) }}</p>
                                    @endif
                                    <div class="text-muted small mt-2">
                                        @if ($news->published_at)
                                            <span><i class="bi bi-calendar"></i> {{ $news->published_at->format('Y-m-d') }}</span>
                                        @endif
                                        @if ($news->reading_time_minutes > 0)
                                            <span class="ms-2"><i class="bi bi-clock"></i> {{ $news->reading_time_minutes }} {{ __('newscategories::messages.minutes_short') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="d-flex justify-content-center mt-4" data-news-pagination>
                {{ $newsList->links() }}
            </div>
        @endif
    </section>
</main>
@endsection
