@props(['name', 'label', 'checked' => false, 'hint' => null])
{{-- Accessible on/off switch backed by a real checkbox (unchecked sends "0"). --}}
<label class="flex cursor-pointer items-start gap-3">
    <input type="hidden" name="{{ $name }}" value="0">
    <input type="checkbox" name="{{ $name }}" value="1" @checked(old(str_replace(['[', ']'], ['.', ''], $name), $checked)) {{ $attributes->class('peer sr-only') }}>
    <span class="relative mt-0.5 h-5 w-9 shrink-0 rounded-full bg-gray-300 transition peer-checked:bg-brand-600 peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 peer-focus-visible:ring-offset-2 after:absolute after:start-0.5 after:top-0.5 after:size-4 after:rounded-full after:bg-white after:shadow after:transition peer-checked:after:translate-x-4 rtl:peer-checked:after:-translate-x-4 dark:bg-gray-700"></span>
    <span class="text-sm">
        <span class="font-medium">{{ $label }}</span>
        @if ($hint)<span class="block text-gray-500 dark:text-gray-400">{{ $hint }}</span>@endif
    </span>
</label>