{{# This html is inserted into the device and thermostat cards to edit the features that are displayed}}
{{if w==null}}
{{widget_id=queries['widget_id']}}
	{{w=widget_by_id widget_id}}
{{end}}
{{if w==null}}
Error accessing data, please refresh the page
{{else}}
{{# handle the case where a device does not have any features and status and controls are on the root}}
{{feature_count=0}}
{{for feature in w.all_features}}
	{{feature_count=feature_count+1}}
{{end}}				   

{{count=1}}
<div id="device_feature_list{{w.id}}" class="ui-sortable">
{{for f in w.all_features}}
	{{for keyvalue in w.all_features}}
        {{feature=keyvalue.value}}
		{{if feature.order==count-1}}
		<div draggable="true" id="order_{{count}}" class="item hs-bg-blue-l4 row no-gutters {{if !is_mobile_browser}}fa-grabbing{{end}}">	
            <input type="hidden" name="save_feature_item{{feature.ref}}" value="{{feature.ref}}"></input>		
			<div class="col-md-2 mb-1">
				<span class="switch">
					<label>									
					<input type="checkbox" id="show_feature_{{w.id}}!{{feature.ref}}" name="show_feature!{{feature.ref}}" {{if feature.show_feature}}checked{{end}}>
					<span class="lever"></span>
					</label>
				</span>	
			</div>
			<div class="col-md-1 mb-1">
				<img src='{{status_image_file feature.ref}}' width='24' height='24' >
			</div>
			<div class="col-md-9 mb-1">
				{{feature_name feature.ref}}
			</div>			
		</div>
		{{end}}		
	{{end}}
	{{count=count+1}}
{{end}}
</div>
{{end}}

<script>

$(document).ready(function () {
    setSort{{w.id_trimmed}}();
});

function setSort{{w.id_trimmed}}()
{
	var el = document.getElementById('device_feature_list{{w.id}}');
	var sortable = new Sortable(el, {
		draggable: ".item",	
		onStart: function (evt) {
			evt.oldIndex;  // element index within parent
			var itemEl = evt.item;
			$("#"+itemEl.id).addClass("feature_move");
			$(".controls.").hide();
		},
		onEnd: function (evt) {
			var itemEl = evt.item;
			$("#"+itemEl.id).removeClass("feature_move");
		}
	});
}


</script>