<div @class(['bg-white p-6 rounded-lg shadow-sm dark:bg-gray-800', 'opacity-40' => ! $rangeIsValid])>
    @if ($result->rows === [])
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $emptyMessage }}</p>
    @else
        <ul class="space-y-3">
            @foreach ($result->rows as $row)
                <li>
                    <div class="flex items-center justify-between text-sm">
                        <span class="font-medium text-gray-700 dark:text-gray-200">{{ $row->label }}</span>
                        <span class="text-gray-500 dark:text-gray-400">
                            {{ $row->count }}
                            <span class="ml-1 text-xs">({{ $result->shareOf($row) }}%)</span>
                        </span>
                    </div>
                    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
                        <div class="h-full rounded-full bg-blue-500" style="width: {{ $result->shareOf($row) }}%"></div>
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
</div>
