{{-- {{ dd(get_class($items)) }} --}}
<table class="table" width="100%" cellspacing="0">
    <thead>
        <tr class=" bg-gray-50 text-gray-950">
            <th style="text-align: center;">No</th>
            <th>Judul Berita</th>
            <th>Sumber</th>
            <th style="text-align: center;">Aksi</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($items as $item)
            <tr class="text-gray-950">
                <td align="center" width="6%">{{ $items->firstItem() + $loop->index }}</td>
                <td>{{ $item->title }}</td>
                <td>{{ $item->sumber }}</td>
                <td align="center" width="16%">
                    <a href="{{ route('news.edit', $item->id) }}" class="btn btn-info" title="Edit Berita">
                        <i class="fa fa-pencil-alt"></i><span class="ml-2 font-medium">Edit</span>
                    </a>
                    <form action="{{ route('news.destroy', $item->id) }}" method="post" class="d-inline">
                        @csrf
                        @method('delete')
                        <button class="btn btn-danger"
                            onclick="showDeleteModal('{{ route('news.destroy', $item->id) }}', '{{ $item->title }}')"
                            title="Hapus">
                            <i class="fa fa-trash"></i><span class="ml-2 font-medium">Hapus</span>
                        </button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="4" class="text-center">
                    Data Kosong
                </td>
            </tr>
        @endforelse
    </tbody>
</table>

<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center m-3">
    <div class="text-gray-950 font-normal">
        Menampilkan {{ $items->firstItem() ?? 0 }} sampai {{ $items->lastItem() ?? 0 }} dari total
        {{ $items->total() }} entri
    </div>
    <div>
        {!! $items->links() !!}
    </div>
</div>