@extends('layouts.app')

@section('content')
<main class="main-content" style="background: #f8f9fa; min-height: 100vh;">
    <header class="header">
        <div class="user-greeting">
            <h3>Berita & Pengumuman</h3>
            <p style="font-size: 0.8rem; color: #636e72;">Informasi terbaru seputar layanan PAMSIMAS</p>
        </div>
    </header>

    <section class="info-section" style="padding: 5px;">
        <div class="news-list">
            @forelse($allNews as $item)
                <a href="{{ route('news.show', $item->id) }}" class="news-item">
                    <div class="news-thumbnail">
                        @if($item->image)
                            <img src="{{ rtrim(config('app.admin_url'), '/') . '/storage/' . $item->image }}">
                        @else
                            <img src="https://via.placeholder.com/100" alt="No Image">
                        @endif
                    </div>

                    <div class="news-info">
                        <h5>{{ $item->title }}</h5>
                        <div class="news-meta">
                            <div>
                                <i class="far fa-calendar-alt"></i>
                                {{ $item->created_at->translatedFormat('M d, Y') }}
                            </div>
                            <div>
                                <i class="far fa-clock"></i>
                                {{ ceil(str_word_count($item->content) / 200) }} min read
                            </div>
                        </div>
                    </div>
                </a>
            @empty
                <div class="empty-state-card">
                    <h4>Belum ada berita</h4>
                    <p>Silakan kembali lagi nanti untuk informasi terbaru.</p>
                </div>
            @endforelse
        </div>

        <div style="margin-top: 20px;">
            {{ $allNews->links() }}
        </div>
    </section>
</main>
@endsection