@extends('layouts.app')

@section('title', $category->name.' | '.$siteSettings['site_name'])
@section('description', $category->description ?: 'أحدث أخبار '.$category->name)

@section('content')
@if($siteTemplate)
    @include('templates.'.$siteTemplate.'.category')
@else
<div class="category-page">
    <header class="category-mast">
        <div class="container category-mast-inner">
            <span>نافذة الأخبار</span>
            <div>
                <h1>{{ $category->name }}</h1>
                <p>{{ $category->description ?: 'أهم المستجدات والتغطيات من قسم '.$category->name }}</p>
            </div>
            <b>{{ $articles->total() }} خبر</b>
        </div>
    </header>

    <div class="container category-body">
        @if($featured->isNotEmpty())
            <section @class(['category-spotlight', 'category-spotlight-solo' => $featured->count() === 1]) aria-label="أهم أخبار {{ $category->name }}">
                <x-main-news-card :article="$featured->first()" />
                @if($featured->count() > 1)
                    <div class="category-cover-list">
                        @foreach($featured->skip(1) as $article)
                            <x-news-card :article="$article" size="category-side" :show-category="false" />
                        @endforeach
                    </div>
                @endif
            </section>
        @endif

        <div class="category-content">
            <section class="archive-list" data-paginated-content data-pagination-anchor="category-news">
                <div class="section-heading"><h2>أحدث أخبار {{ $category->name }}</h2><span>{{ $articles->total() }} خبر</span></div>
                <div class="latest-list">
                    @forelse($articles as $article)
                        <x-news-card :article="$article" size="horizontal" :show-description="true" />
                    @empty
                        <div class="empty-state">لا توجد أخبار أخرى منشورة في هذا القسم.</div>
                    @endforelse
                </div>
                <x-pagination :paginator="$articles" />
            </section>
        </div>
    </div>
</div>
@endif
@endsection