<#if prompt??>
<label id="${id}-prompt" class="col-sm-${promptColspan!1} control-label hlsCheckboxLabel ${promptClassName!}"><span id="${id}-prompt-required" class="hlsRequiredPromptImage">${promptImage!}</span>${prompt!}</label>
<div class="col-sm-${colspan!2} hlsCheckbox ${hlsClassName!}">
    <input id="${id}" data-bind="${bind!}" ${required!} style="display: none;"/>
	<span id="${id}_switchtest_span" class="switchery">
    	<small id="${id}_switchtest_span_small"/>
	</span>
    <span class="k-invalid-msg" data-for="${id}"></span>
</div>
<#else>
	<input id="${id}" data-bind="${bind!}" ${required!} style="display: none;"/>
	<span id="${id}_switchtest_span" class="switchery">
    	<small id="${id}_switchtest_span_small"/>
	</span>
    <span class="k-invalid-msg" data-for="${id}"></span>
</#if>
<script>
	kendo.bind($('#${id}'), ${bindModel!});
	if(${bindModel!}.${datamodelname!}.${datafieldname!}=='${checkedValue!}'){
		$('#${id}_switchtest_span').addClass('switchery-checked');
		$('#${id}_switchtest_span_small').addClass('switchery-span-small-checked');
	}else{
		$('#${id}_switchtest_span').addClass('switchery-unchecked');
		$('#${id}_switchtest_span_small').addClass('switchery-span-small-unchecked');
	}
	$('#${id}_switchtest_span').on('click',function(){
		var hls_switch_input = $('#${id}');
		var hls_switch_span=$('#${id}_switchtest_span');
		var hls_switch_small=$('#${id}_switchtest_span_small');
		hls_switch_span.toggleClass('switchery-checked');
		hls_switch_span.toggleClass('switchery-unchecked');
		hls_switch_small.toggleClass('switchery-span-small-checked');
		hls_switch_small.toggleClass('switchery-span-small-unchecked');
		var current_value = ${bindModel!}.${datamodelname!}.${datafieldname!};
		var checkedValue = '${checkedValue!}';
		var uncheckedValue = '${uncheckedValue!}';
		if(current_value==checkedValue){
			${bindModel!}.${datamodelname!}.set('${datafieldname!}',uncheckedValue);
		}else{
			${bindModel!}.${datamodelname!}.set('${datafieldname!}',checkedValue);
		}
		
	});
</script>
