@extends('layouts.app')

@section('title', $berita->judul . ' - IAINU SUMSEL')

@section('content')
<div class="max-w-4xl mx-auto">
    <article class="bg-white p-6 sm:p-8 rounded-lg shadow-md">
        <header class="mb-8">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 leading-tight mb-3">
                {{ $berita->judul }}
            </h1>
            <div class="text-sm text-gray-500">
                <span>Dipublikasikan pada {{ $berita->created_at->translatedFormat('d F Y, H:i') }} WIB</span>
                <span class="mx-2">&middot;</span>
                <span>Oleh {{ $berita->user->name }}</span>
            </div>
        </header>

        @if($berita->gambar_thumbnail)
            <figure class="mb-8">
                <img src="{{ asset('storage/' . $berita->gambar_thumbnail) }}" alt="{{ $berita->judul }}" class="w-full h-auto object-cover rounded-lg">
            </figure>
        @endif

        <div class="prose prose-lg prose-green max-w-none">
            {!! $berita->konten !!}
        </div>

        <div class="mt-12 pt-8 border-t border-gray-200">
            <a href="{{ route('berita.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                &larr; Kembali ke Daftar Berita
            </a>
        </div>
    </article>
</div>
@endsection