@section('title', 'Berita')
<div class="py-12">
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            Berita
        </h2>
    </x-slot>
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="overflow-hidden bg-white shadow-sm dark:bg-gray-800 sm:rounded-lg">
            <div class="flex gap-3 p-6">
                <x-filament::button size="sm" icon="heroicon-s-plus" wire:navigate tag="a"
                    href="{{ route('news.create') }}" color="info">
                    Tambah
                </x-filament::button>
                <x-filament::button size="sm" icon="heroicon-m-arrow-path" wire:click="refresh" color="info"
                    outlined>
                    Muat Ulang
                </x-filament::button>
            </div>
            <div class="flex gap-3 px-6 mb-3">
                <div class="text-sm text-gray-700 dark:text-gray-300">Tipe</div>
                <x-filament::link wire:navigate @class(['underline' => $type === 'all', 'dark:decoration-slate-300']) :href="route('news.index', ['type' => 'all'])">
                    Semua
                </x-filament::link>
                <x-filament::link wire:navigate @class([
                    'underline' => $type === 'published',
                    'dark:decoration-slate-300',
                ]) :href="route('news.index', ['type' => 'published'])">
                    Terbit
                </x-filament::link>
            </div>
            <div class="grid gap-3 px-6 pb-6 text-gray-900 dark:text-gray-100">
                @forelse ($news as $newsItem)
                    <x-card.base class="grid justify-start grid-cols-4 gap-5">
                        <div class="grid gap-3">
                            <div class="text-lg font-medium leading-6">{{ $newsItem->title }}</div>
                            @php
                                $media = $newsItem->getMedia()->first();
                            @endphp
                            @if ($media)
                                <img class="md:w-[240px]" src="{{ route('media.photo', ['uuid' => $media->uuid]) }}" />
                            @endif
                            <div class="text-sm leading-5 line-clamp-5">{!! $newsItem->content !!}</div>
                        </div>
                        <div class="flex flex-col items-start gap-3">
                            @if ($newsItem->published_at)
                                <div>
                                    <x-filament::badge class="font-semibold tracking-wider uppercase shrink-0"
                                        size="sm" color="success">
                                        Terbit
                                    </x-filament::badge>
                                </div>
                            @endif
                            <div class="flex items-start gap-1 text-sm">
                                <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 w-[16px]">
                                    <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 class="font-medium">{{ $newsItem->date }}</div>
                            </div>
                        </div>
                        <div class="flex items-start gap-1 text-sm">
                            <svg class="flex-none w-[16px]" 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">
                                <path d="M16 18a4 4 0 0 0-8 0" />
                                <circle cx="12" cy="11" r="3" />
                                <rect width="18" height="18" x="3" y="4" rx="2" />
                                <line x1="8" x2="8" y1="2" y2="4" />
                                <line x1="16" x2="16" y1="2" y2="4" />
                            </svg>
                            <div class="font-medium">{{ $newsItem->writter->name }}</div>
                        </div>
                        <div class="flex content-start">
                            <div class="flex flex-wrap self-start gap-3">
                                <x-filament::button class="self-start" size="sm" icon="heroicon-o-pencil"
                                    wire:click="edit('{{ $newsItem->ulid }}')" color="info" outlined>
                                    Ubah
                                </x-filament::button>
                                <x-filament::button target="_blank" tag="a"
                                    href="{{ route('page.news.detail', ['slug' => $newsItem->slug]) }}"
                                    class="self-start" size="sm" icon="heroicon-o-magnifying-glass" color="info"
                                    outlined>
                                    Pratinjau
                                </x-filament::button>
                                <x-filament::button class="self-start" size="sm" icon="heroicon-o-trash"
                                    wire:click="onDelete('{{ $newsItem->ulid }}')" color="danger" outlined>
                                    Hapus
                                </x-filament::button>
                            </div>
                        </div>
                    </x-card.base>
                @empty
                    <x-card.no-data>
                        <div class="text-sm">
                            Berita belum tersedia
                        </div>
                    </x-card.no-data>
                @endforelse
                @if (count($news))
                    <div class="mt-4">
                        <x-filament::pagination :paginator="$news" />
                    </div>
                @endif
            </div>
        </div>
    </div>
    <x-filament::modal icon-color="danger" :close-by-clicking-away="false" alignment="center" id="delete-news"
        icon="heroicon-o-trash">
        <x-slot name="heading">
            Hapus Berita
        </x-slot>
        <x-slot name="description">
            Apakah Anda yakin akan menghapus berita tersebut?
        </x-slot>
        <x-slot name="footer">
            <div class="flex justify-end gap-3">
                <x-filament::button size="sm" icon="heroicon-o-arrow-long-left"
                    x-on:click="$dispatch('close-modal', { id: 'delete-news' })" color="info" outlined> Kembali
                </x-filament::button>
                <x-filament::button size="sm" icon="heroicon-o-trash" wire:click="delete()" color="danger">
                    Hapus
                </x-filament::button>
            </div>
        </x-slot>
    </x-filament::modal>
</div>