@extends('layouts.app')

@section('title', 'News')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-16">
    <h1 class="font-display text-4xl font-bold text-gold-300 mb-10 text-center">Server News</h1>

    <div class="space-y-6">
        @forelse ($news as $item)
            <article class="rounded-lg border border-white/5 bg-ink-800 p-6 hover:border-ember-700/50 transition">
                <div class="text-xs uppercase tracking-wide text-ember-400 font-semibold">
                    {{ $item->category ?? 'Update' }} &middot; {{ $item->published_at->format('d M Y') }}
                </div>
                <h2 class="mt-2 font-display text-2xl font-bold text-gray-100">
                    <a href="{{ route('news.show', $item->slug) }}" class="hover:text-gold-300">{{ $item->title }}</a>
                </h2>
                <p class="mt-3 text-gray-400">{{ $item->excerpt }}</p>
                <a href="{{ route('news.show', $item->slug) }}" class="mt-4 inline-block text-sm text-gold-400 hover:text-gold-300">
                    Read more &rarr;
                </a>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-white/10 p-12 text-center text-gray-500">
                No news items yet.
            </div>
        @endforelse
    </div>

    <div class="mt-10">
        {{ $news->links() }}
    </div>
</div>
@endsection