@extends('layouts.public')

@section('public-content')
<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <h1 class="font-display text-3xl font-bold text-gray-900 mb-8">News</h1>

    @if($articles->count())
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($articles as $article)
                <a href="{{ route('public.news-article', [$school->id, $article->slug]) }}" class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-5 hover:ring-primary-500 hover:shadow-md transition-all">
                    @if($article->featured_image)
                        <img src="{{ asset('storage/' . $article->featured_image) }}" alt="{{ $article->title }}" class="w-full h-40 object-cover rounded-lg mb-4">
                    @endif
                    <p class="text-xs text-gray-500">{{ $article->created_at->format('d M Y') }}</p>
                    <h3 class="mt-2 font-display font-semibold text-gray-900 hover:text-primary-600">{{ $article->title }}</h3>
                    <p class="mt-2 text-sm text-gray-600 line-clamp-3">{{ Str::limit(strip_tags($article->content), 150) }}</p>
                </a>
            @endforeach
        </div>

        <div class="mt-10">
            {{ $articles->links() }}
        </div>
    @else
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center">
            <p class="text-gray-500">No articles published yet.</p>
        </div>
    @endif
</section>
@endsection