@extends('news.layout', [
    'metaTitle'       => config('news.rss_title', 'News'),
    'metaDescription' => config('news.rss_description', ''),
])

@section('news_content')
<div class="news-index">
    <div class="container py-5">

        {{-- Featured article --}}
        @if($featured)
        <section class="mb-5">
            <a href="{{ route('news.show', $featured->slug) }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm overflow-hidden news-featured">
                    @if($featured->cover_url)
                        <img src="{{ $featured->cover_url }}" class="card-img" alt="{{ $featured->title }}"
                             style="height:400px;object-fit:cover;">
                    @endif
                    <div class="card-img-overlay d-flex align-items-end p-4"
                         style="background:linear-gradient(transparent,rgba(0,0,0,0.75))">
                        <div class="text-white">
                            @if($featured->category)
                                <span class="badge badge-primary mb-2">{{ $featured->category->name }}</span>
                            @endif
                            <h2 class="font-weight-bold">{{ $featured->title }}</h2>
                            <p class="mb-1">{{ Str::limit(strip_tags((string)$featured->excerpt), 180) }}</p>
                            <small>
                                {{ $featured->author?->name }} &middot;
                                {{ $featured->published_at?->format('d M Y') }} &middot;
                                {{ $featured->reading_time }} min read
                            </small>
                        </div>
                    </div>
                </div>
            </a>
        </section>
        @endif

        <div class="row">
            {{-- Articles grid --}}
            <div class="col-lg-8">
                <div class="row">
                @forelse($articles as $article)
                    <div class="col-sm-6 mb-4">
                        @include('news._article_card', ['article' => $article])
                    </div>
                @empty
                    <div class="col-12 text-center text-muted py-5">No news articles published yet.</div>
                @endforelse
                </div>

                <div class="mt-3">
                    {{ $articles->links() }}
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                @include('news._sidebar', [
                    'categories' => $categories,
                    'trending'   => $trending,
                    'tags'       => $tags,
                ])
            </div>
        </div>

    </div>
</div>
@endsection