@extends('layouts.site')

@section('meta_title')
    {{ __('site.nav_news') }} — {{ brand_name() }}
@endsection

@section('title', __('site.nav_news'))

@section('content')
    <div class="site-container space-y-6 pb-8 px-2" data-reveal="page">
        <header class="px-2 py-4" data-reveal="soft">
            <h1 class="text-xl font-bold">
                {{ $activeCategory?->localizedName() ?: __('site.nav_news') }}
            </h1>
            <p class="mt-1 text-sm text-brand-muted">{{ __('site.news_index_subtitle') }}</p>
        </header>

        @if (($categories ?? collect())->isNotEmpty())
            <div class="flex flex-wrap gap-2 px-2" data-reveal="soft">
                <a href="{{ route('site.news.index', ['locale' => app()->getLocale()]) }}"
                   @class(['rounded-full border px-3 py-1 text-sm', 'border-brand-accent bg-brand-accent/10 text-brand-accent' => ! $activeCategory, 'border-brand-border text-brand-muted' => $activeCategory])>
                    {{ __('site.mega_view_all') }}
                </a>
                @foreach ($categories as $category)
                    <a href="{{ route('site.news.category', ['locale' => app()->getLocale(), 'newsCategory' => $category->slug]) }}"
                       @class(['rounded-full border px-3 py-1 text-sm', 'border-brand-accent bg-brand-accent/10 text-brand-accent' => $activeCategory?->is($category), 'border-brand-border text-brand-muted' => ! $activeCategory?->is($category)])>
                        {{ $category->localizedName() }}
                    </a>
                @endforeach
            </div>
        @endif

        <section class="space-y-4">
            @if ($newsItems->total() === 0)
                <p class="border border-dashed border-brand-border rounded-lg px-6 py-12 text-center text-brand-muted" data-reveal="soft">{{ __('site.empty_news') }}</p>
            @else
                <ul class="news-list" data-reveal-group>
                    @foreach ($newsItems as $item)
                        <x-site.cards.news :news="$item" />
                    @endforeach
                </ul>

                <div data-reveal="soft" style="--reveal-delay: 120ms;">
                    <x-site.simple-pagination :paginator="$newsItems" />
                </div>
            @endif
        </section>
    </div>
@endsection