<div class="space-y-4 py-2">
    @forelse($materials as $material)
        <div
            class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 transition-colors shadow-sm">
            <div class="flex items-center gap-3">
                <div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400">
                    <x-heroicon-o-document-text class="w-5 h-5" />
                </div>
                <div class="flex flex-col">
                    <span class="font-bold text-gray-900 dark:text-white leading-tight">{{ $material->title }}</span>
                    <span class="text-[10px] text-gray-500 dark:text-gray-400 font-medium uppercase mt-0.5">
                        Dibuat: {{ $material->created_at_formatted }}
                    </span>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" wire:click="mountAction('viewMaterialDetail', { record: {{ $material->id }} })"
                    class="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500 transition-colors"
                    title="Lihat Detail">
                    <x-heroicon-o-chevron-right class="w-5 h-5" />
                </button>
            </div>
        </div>
    @empty
        <x-filament::empty-state icon="heroicon-o-document-minus" heading="Tidak ada data yang ditemukan"
            description="Belum ada materi untuk sesi ini." iconColor="gray">
        </x-filament::empty-state>
    @endforelse
</div>
