@section('title', 'Berita')
<div class="md:pt-[120px] min-h-[100vh] pt-[72px] px-10 max-w-[840px] mx-auto pb-[80px]">
    <div class="grid gap-7">
        @forelse ($news as $newsItem)
            <div class="flex gap-3">
                <div class="flex-none">
                    @php
                        $media = $newsItem->getMedia()->first();
                    @endphp
                    @if ($media)
                        <img class="w-[200px]" src="{{ route('media.photo', ['uuid' => $media->uuid]) }}" />
                    @endif
                </div>
                <div>
                    <a wire:navigate href="{{ route('page.news.detail', ['slug' => $newsItem->slug]) }}"
                        class="text-xl font-semibold leading-5">{{ $newsItem->title }}</a>
                    <div class="flex gap-3 text-xs text-slate-400">
                        <div>{{ $newsItem->published_at_in_human }}</div>
                        <div>{{ $newsItem->writter->name }}</div>
                    </div>
                    <div class="mt-3 overflow-hidden line-clamp-3">{!! $newsItem->content !!}</div>
                </div>
            </div>
        @empty
        @endforelse
    </div>
    <p class="see_all" align="center">
        <a wire:navigate href="{{ route('page.news.index') }}"> See All News </a>
    </p>
</div>