@if($question->children && $question->children->count() > 0)
<div>
    <span class="block text-sm font-medium text-surface-500 mb-2">{{ __('pages/admin/question.view_modal.children') ?? 'Child Questions' }}</span>
    <ul class="space-y-3">
        @foreach($question->children as $child)
        <li class="py-2 border-b border-border last:border-0">
            <div class="text-xs font-semibold text-surface-500 mb-1">
                {{ config('question.types.'.$child->type, $child->type) }}
            </div>
            <div class="text-sm text-surface-900 dark:text-white mb-2">
                {!! nl2br(e($child->question)) !!}
            </div>

            @if(is_array($child->content))
            <ul class="space-y-1 mt-2">
                @foreach($child->content as $option)
                <li class="flex items-start gap-2 py-1.5">
                    <div class="mt-0.5 shrink-0">
                        @if(!empty($option['is_correct']))
                        <x-heroicon-s-check-circle class="w-4 h-4 text-green-600 dark:text-green-500" />
                        @else
                        <div class="w-4 h-4 rounded-full border-2 border-surface-300 dark:border-surface-600"></div>
                        @endif
                    </div>
                    <div class="flex-1 text-sm text-surface-900 dark:text-white">
                        {{ $option['text'] ?? '' }}
                    </div>
                </li>
                @endforeach
            </ul>
            @endif
        </li>
        @endforeach
    </ul>
</div>
@endif