@extends('layouts.public')

@section('title', 'News — '.setting('university_name'))
@section('description', 'Campus achievements, research breakthroughs, student life and university announcements.')

@section('content')

    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page py-12">
            <x-breadcrumb :items="[['label' => 'Home', 'url' => route('home')], ['label' => 'News']]" />
            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">News</h1>
            <p class="mt-3 max-w-2xl text-lg text-slate-600">
                Campus achievements, research breakthroughs, student life, academic events and university announcements.
            </p>
        </div>
    </section>

    <div class="container-page py-14">
        @if ($categories->isNotEmpty())
            <nav class="mb-10 flex flex-wrap gap-2" aria-label="Filter news by category">
                <a href="{{ route('news.index') }}"
                   @class([
                       'rounded-full px-4 py-1.5 text-sm font-medium transition',
                       'bg-brand-700 text-white' => ! $activeCategory,
                       'bg-slate-100 text-slate-700 hover:bg-slate-200' => $activeCategory,
                   ])>All</a>

                @foreach ($categories as $category)
                    <a href="{{ route('news.index', ['category' => $category]) }}"
                       @class([
                           'rounded-full px-4 py-1.5 text-sm font-medium transition',
                           'bg-brand-700 text-white' => $activeCategory === $category,
                           'bg-slate-100 text-slate-700 hover:bg-slate-200' => $activeCategory !== $category,
                       ])>{{ $category }}</a>
                @endforeach
            </nav>
        @endif

        @if ($articles->isEmpty())
            <x-empty-state title="No articles published yet"
                           description="Check back soon for university news and announcements." />
        @else
            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($articles as $article)
                    <article class="group relative flex flex-col">
                        <div class="flex items-center gap-3 text-xs">
                            @if ($article->category)
                                <x-badge color="brand" size="sm">{{ $article->category }}</x-badge>
                            @endif
                            <time datetime="{{ $article->published_at?->toDateString() }}" class="text-slate-500">
                                {{ $article->published_at?->format('j F Y') }}
                            </time>
                        </div>

                        <h2 class="mt-3 text-lg font-semibold leading-snug text-slate-900 group-hover:text-brand-700">
                            <a href="{{ route('news.show', $article) }}">
                                <span class="absolute inset-0"></span>
                                {{ $article->title }}
                            </a>
                        </h2>

                        <p class="mt-3 line-clamp-3 flex-1 text-sm leading-relaxed text-slate-600">{{ $article->excerpt }}</p>

                        <p class="mt-4 text-xs text-slate-400">{{ $article->readingTime() }} min read</p>
                    </article>
                @endforeach
            </div>

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

@endsection
