@extends('news.layout', [
    'metaTitle' => $archiveDate->format('F Y') . ' — News Archive',
    'metaDescription' => 'News archive for ' . $archiveDate->format('F Y') . ' on Skinbase Nova.',
    'metaCanonical' => route('news.archive', ['year' => $archiveDate->year, 'month' => $archiveDate->month]),
])

@section('news_content')
@php
    $headerBreadcrumbs = collect([
        (object) ['name' => 'Community', 'url' => route('community.activity')],
        (object) ['name' => 'Announcements', 'url' => route('news.index')],
        (object) ['name' => $archiveDate->format('F Y'), 'url' => route('news.archive', ['year' => $archiveDate->year, 'month' => $archiveDate->month])],
    ]);
@endphp

<x-nova-page-header
    section="Community"
    :title="$archiveDate->format('F Y')"
    icon="fa-calendar-days"
    :breadcrumbs="$headerBreadcrumbs"
    :description="'Published News stories from ' . $archiveDate->format('F Y') . '.'"
    headerClass="pb-6"
/>

<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
        <section>
            @if($articles->isEmpty())
                <div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">No articles were published during this month.</div>
            @else
                <div class="grid gap-5 md:grid-cols-2">
                    @foreach($articles as $article)
                        @include('news._article_card', ['article' => $article])
                    @endforeach
                </div>
                <div class="mt-8 flex justify-center">{{ $articles->links() }}</div>
            @endif
        </section>
        <aside class="space-y-4">
            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
        </aside>
    </div>
</div>
@endsection