@extends('layouts.public')

@section('public-content')
<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6 lg:px-8">
    <a href="{{ route('public.news', $school->id) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-700">&larr; Back to News</a>

    <article class="mt-6 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 sm:p-8">
        @if($article->featured_image)
            <img src="{{ asset('storage/' . $article->featured_image) }}" alt="{{ $article->title }}" class="w-full h-64 object-cover rounded-lg mb-6">
        @endif

        <h1 class="font-display text-2xl sm:text-3xl font-bold text-gray-900">{{ $article->title }}</h1>

        <div class="mt-3 flex items-center gap-3 text-sm text-gray-500">
            <span>{{ $article->created_at->format('d M Y') }}</span>
            @if($article->author ?? false)
                <span>&middot;</span>
                <span>{{ $article->author }}</span>
            @endif
            <span>&middot;</span>
            <span>{{ $article->views }} views</span>
        </div>

        <div class="mt-8 text-gray-700 leading-relaxed text-sm">
            {!! nl2br(e($article->content)) !!}
        </div>
    </article>
</section>
@endsection