@props(['name','value','title','disabled'=>false])
<label class="relative inline-flex items-center cursor-pointer my-2" x-data="{value:{{$value}}}">
    <input type="checkbox" {{$disabled}} name="{{$name}}" class="sr-only peer" {{$value ? 'checked' : ''}} x-model="value">
    <div
        @click="value = value == 1 ? 0 : 1"
        class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
    <span class="ml-3 text-sm font-medium text-gray-900 ">{{$title}}</span>
</label>