@section('title', $isSuccess ? $news->title : 'Berita tidak ditemukan')
<div class="md:pt-[120px] pt-[72px] px-10 max-w-[720px] mx-auto pb-[80px]">
    @if ($isSuccess)
        @php
            $media = $news->getMedia()->first();
        @endphp
        @if ($media)
            <img class="w-full" src="{{ route('media.photo', ['uuid' => $media->uuid]) }}" />
        @endif
        <div class="mt-3 text-xl font-semibold">{{ $news->title }}</div>
        <div class="flex gap-5 text-xs text-slate-400">
            <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M8 2v4" />
                    <path d="M16 2v4" />
                    <rect width="18" height="18" x="3" y="4" rx="2" />
                    <path d="M3 10h18" />
                    <path d="M8 14h.01" />
                    <path d="M12 14h.01" />
                    <path d="M16 14h.01" />
                    <path d="M8 18h.01" />
                    <path d="M12 18h.01" />
                    <path d="M16 18h.01" />
                </svg>
                <div>{{ $news->date }}</div>
            </div>
            <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
                    <path d="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2" />
                    <rect width="18" height="18" x="3" y="4" rx="2" />
                    <circle cx="12" cy="10" r="2" />
                    <line x1="8" x2="8" y1="2" y2="4" />
                    <line x1="16" x2="16" y1="2" y2="4" />
                </svg>
                <div>{{ $news->writter->name }}</div>
            </div>
        </div>
        <div class="mt-3">{!! $news->content !!}</div>
        <div class="grid grid-cols-1 mt-5 md:grid-cols-2 md:gap-5">
            <div>
                @if ($prev)
                    <a wire:navigate href="{{ route('page.news.detail', ['slug' => $prev->slug]) }}"
                        class="flex gap-1 leading-5" title="{{ $prev->title }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none size-6">
                            <path d="m15 18-6-6 6-6" />
                        </svg>
                        <span class="line-clamp-2">{{ $prev->title }}</span>
                    </a>
                @endif
            </div>
            <div>
                @if ($next)
                    <a wire:navigate href="{{ route('page.news.detail', ['slug' => $next->slug]) }}"
                        class="flex gap-1 leading-5" title="{{ $next->title }}">
                        <span class="line-clamp-2">{{ $next->title }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none size-6">
                            <path d="m9 18 6-6-6-6" />
                        </svg>
                    </a>
                @endif
            </div>
        </div>
    @else
        <div class="h-[100vh]">{{ $message }}</div>
    @endif
</div>