{{#Name=Single Device Status Icon}}
{{#Description=Displays a single device status icon with control}}
{{#Version=1.0}}
{{#Author=HomeSeer}}

{{dbs=dashboards_ref}}

{{widget_id=queries['widget_id']}}
{{if widget_id==null}}
	{{widget_id=var1}}
{{end}}

{{w=widget_by_id widget_id}}

{{id_unique=string.replace w.id '-' ''}}

{{# To simplify custom controls, the settings dialog that holds settings is auto generated }}
{{# To have your persistent settings saved and restored automatically, add them below in the section that calls "get_value" }}

{{# storage arrays for saved value, save name, dialog label, control type }}
{{# value: The value that is saved for a particular item, such as a display label, color, font size, etc. }}
{{# save name: The name used to save the persistent value. All saved names must start with "save_" }}
{{# dialog label: The dialog for saving values is auto generated so this is the label that is displayed for the item such as "Color"}}
{{# control_type: The type of control used to configure the item. Control types supported here are: }}
{{# text: a simple text box for entering text such as a label }}
{{# color: allows for entry of a specific HTML color like #000000 and also displays a button that displays a color picker }}
{{# toggle: displays a toggle switch for items that support "enabled/disabled" or On/Off }}

{{# arrays that hold settings for the autogenerated settings dialog. These are filled by calling get_value }}
{{current_values=[]}}
{{save_names=[]}}
{{titles=[]}}
{{control_types=[]}}

{{# function to get a saved value and return the value or the default value}}
{{# function parameters: $0=save name, $1=default value, $2=control name for settings dialog, $3=control type }}
{{index=0}}
{{func get_value
    v=get_saved_value $0 widget_id
    if v==''
        v=$1  
    end
    current_values[index]=v
    save_names[index]=$0
    titles[index]=$2
	control_types[index]=$3
    index=index+1
    ret v
end}}

{{save_width_height=false}}
{{if w.width==0}}
	{{#first time loading, force a save of the card width and height}}
	{{save_width_height=true}}
{{end}}

{{#get settings that will also be used in the autogenerate settings dialog. This fills the arrays above}}
{{show_device_name=get_value 'save_show_device_name_toggle' '' 'Show Name' 'toggle'}}
{{name_color=get_value 'save_name_color' 'black' 'Name Color' 'color'}}
{{name_size=get_value 'save_name_size' '16px' 'Name Size' 'text'}}
{{icon_width=get_value 'save_icon_width' '48' 'Icon Width' 'text'}}
{{icon_height=get_value 'save_icon_height' '48' 'Icon Height' 'text'}}

{{#get settings that will not be configured with the settings dialog}}
{{# these are values that may or may not be displayed in the setings dialog but need to be displayed with custom HTML that the autogen code cannot handle }}
{{feature_item_ref=get_saved_value 'save_feature_item' widget_id}}
{{if feature_item_ref==''
	feature_item_ref='0'
end}}
{{control1_value=get_saved_value 'save_control1' widget_id}}
{{control2_value=get_saved_value 'save_control2' widget_id}}


{{# set the width and height of the card since we want this one small with just one icon}}
{{if save_width_height}}	
	<script>
		// since the size of the card has changed, we need to force a page refresh
		$(document).ready(function () {
			AjaxPost("action=new_card_size&refresh=true&cardid={{w.id}}&width={{(string.to_int icon_width)}}&height={{(string.to_int icon_height)}}", "dashboard.html");
		});        
	</script>
{{end}}


{{# normal display HTML is here. This is what is displayed when viewing the card in non-edit mode}}

<style>
.container{{w.id}} {
	height: {{w.height}}px;
    display: flex;
    align-items: center;
    justify-content: center;	
    }


</style>

{{if show_device_name=='on'}}
	<div style="color: {{name_color}};font-size: {{name_size}};" class="row no-gutters">
		<div class="col-12 justify-content-center align-content-center text-center">
		{{dev=device_by_ref feature_item_ref}}
		{{dev_primary=device_by_ref dev.primary_ref}}
		{{dev_primary.name}}-{{dev.name}}
		</div>
	</div>
{{end}}
	
<div class="container{{w.id}}">
	<div>
		{{img_file = status_image_file feature_item_ref}}
		{{if img_file==''
			img_file='images/HomeSeer/status/nostatus.gif'
		end}}		
		<img class="p-1" style="cursor:pointer;" onclick="toggle{{id_unique}}();" src='{{img_file}}' width='{{icon_width}}' height='{{icon_height}}'>		
	</div>
</div>
			

{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}
{{# card settings dialog, the second tab autogenerates settings based on values added to the settings arrays. Custom settings HTML can be added}}

{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}

{{# w=widget class, dashboard=dashboard name, d=device}}
<div class="modal fade pg-show-modal" id="edit_custom_card{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true"> 
   <div class="modal-dialog cascading-modal"> 
	   <div class="modal-content">   
            <form id="add_to_dashboard">
            <div class="modal-c-tabs">
                <ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
                      Format</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
                      Display</a>
                  </li>
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade in show active" id="panel{{w.id}}1" role="tabpanel">
                        <div class="modal-body">
                            {{includefileraw Dashboards/Cards/Internal/card_appearance_settings.html}}
                        </div>
                    </div>
		                    
                    <div class="tab-pane fade" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <input type="hidden" id="edit_camera_card_widget_id_{{w.id}}" name="edit_camera_card_widget_id_{{w.id}}" value="{{w.id}}">
			                <p>
				               {{# Second tab which contains settings for this card only}}
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md justify-content-center align-content-center">
										{{titles[index]}}                       
									</div>
									<div class="md-form input-group col-md justify-content-center text-center"> 
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
                                    <div class="md-form input-group col-md-2 justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="btn btn-default">Color</button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
										<div class="col-md-9 justify-content-center align-content-center">
											{{titles[index]}}                    
										</div>
										<div class="col-md-3">
											<span class="switch">
											  <label>	
													<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
													<span class="lever"></span>
											  </label>
											</span>						
										</div>		
									{{else if control_types[index] == 'text'}}
                                    <div class="col-md justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md md-form input-group justify-content-center text-center"> 
                                        <input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
                                    </div>
                                    {{end}}                                   					
                                </div>
                                {{index=index+1}}
                                {{end}}
								{{# Starting here, add custom settings HTML for this card }}
								<div class="row mb-1">						
									<div class="col-12 justify-content-center align-content-center text-center">
										<button type="button" class="btn btn-default"  data-toggle="modal" data-target="#feature_picker{{w.id}}">Set Feature</button>                       
									</div>						
								</div>	
								
								<div class="row no-gutters">
									<div class="col-md md-form justify-content-center align-content-center">
                                        <b>Selected Feature</b>               
                                    </div>
								</div>
								<div class="row no-gutters">
									<div class="col-md justify-content-center align-content-center" id="#selected_feature{{w.id}}">
									<input type="hidden" name="save_feature_item" value="{{feature_item_ref}}"></input>
												{{if feature_item_ref != ''}}
												{{device_name_full feature_item_ref true}}
												{{end}}
                                    </div>
								</div>
								<div class="row no-gutters">
									<div class="col-md md-form justify-content-center align-content-center">
                                        <b>Selected Toggle Controls</b>               
                                    </div>
								</div>
								<div class="row no-gutters">
									<div class="col-md justify-content-center align-content-center" id="#selected_control1{{w.id}}">
										{{if feature_item_ref != '0'}}
										<select class="mdb-select md-form mx-2" id="control_select1{{w.id}}" name="save_control1" >
											{{listc=controlsbyref feature_item_ref}}
											{{ for ctrl in listc}}
												{{selected=''}}
												{{if ctrl.value==control1_value}}
													{{selected='selected'}}
												{{end}}
												<option {{selected}} value="{{ctrl.value}}">{{ctrl.label}}</option>
											{{ end }}
										</select>
										{{end}}
									</div>
								</div>
								<div class="row no-gutters">								
									<div class="col-md justify-content-center align-content-center" id="#selected_control2{{w.id}}">
										{{if feature_item_ref != '0'}}
										
										<select class="mdb-select md-form mx-2" id="control_select2{{w.id}}" name="save_control2" >
											{{listc=controlsbyref feature_item_ref}}
											{{ for ctrl in listc}}
												{{selected=''}}
												{{if ctrl.value==control2_value}}
													{{selected='selected'}}
												{{end}}
												<option {{selected}} value="{{ctrl.value}}">{{ctrl.label}}</option>
											{{ end }}
										</select>
										{{end}}
									</div>
								</div>								
                            </p>
				        </div>
                    </div>
			        
			   
                    <div class="modal-footer"> 
			            <button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
			            <button type="submit" class="btn btn-success" data-dismiss="modal" action="save_custom_card_edits" wid="{{w.id}}">Save</button>                	                             
                    </div>
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>

{{#pop-up dialog to select an HS device feature}}
<div class="modal fade pg-show-modal second-modal" id="feature_picker{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
			<form id="add_to_dashboard">
            <div class="modal-header">
                <h4 class="modal-title">Select Feature</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            </div>
            <div class="modal-body">                
                <p>
                    <select class="mdb-select md-form mx-2" id="feature_select{{w.id}}" name="feature_add" searchable="Search for a device here...">
						{{roots=root_devices_by_location}}
						<option selected name="test" value="0">Select Feature</option>
						{{ for dev in (roots) }}   
							{{hascontrols=false}}
							{{if dev.has_controls}}{{hascontrols=true}}{{end}}
							{{for child in dev.features}}
								{{if child.has_controls}}{{hascontrols=true}}{{end}}
							{{end}}
							{{if !hascontrols}}{{continue}}{{end}}													
							
							{{if location1_display_first}}
								<option disabled value="{{dev.ref}}">{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
							{{else}}
								<option disabled value="{{dev.ref}}">{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
							{{end}}
							
							{{if dev.has_controls}}
								{{if location1_display_first}}
									<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
								{{else}}
									<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
								{{end}}   
							{{end}}                        
							{{for child in dev.features}}
								{{selected=''}}
								{{if child.has_controls}}
									{{#if child.ref==item.value.dv_ref}}
										{{#selected='selected'}}
									{{#end}}	
									{{if location1_display_first}}
										<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location}}-{{child.location2}}-{{dev.name}}-{{child.name}}</option>
									{{else}}
										<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location2}}-{{child.location}}-{{dev.name}}-{{child.name}}</option>
									{{end}}	
								{{end}}
							{{end}}  
						{{end}}
					</select>
					<label class="mdb-main-label">Device</label>
                </p>
            </div>
			<div class="modal-footer"> 
				<button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-success" data-dismiss="modal" onclick="addFeature{{id_unique}}();" >Add</button>                	                             
			</div>
			</form>
        </div>
    </div>
</div>



<script>
// script for edit mode, settings dialog
$(document).ready(function () {
    $('#feature_select{{w.id}}').materialSelect();
	{{if feature_item_ref != ''}}
		$('#control_select1{{w.id}}').materialSelect();
		$('#control_select2{{w.id}}').materialSelect();
	{{end}}
});

function addFeature{{id_unique}}() {
	var ref = +$('#feature_select{{w.id}}').find(':selected').val();
	var txt = $('#feature_select{{w.id}}').find(':selected').text().trim();
	console.log("add feature ref,txt:" + ref + txt);

	if(ref != 0) {
		var div = document.getElementById("#selected_feature{{w.id}}");
		div.innerHTML = '<input type="hidden" name="save_feature_item" value="'+ref+'"></input>' + txt
		//controls
		var divc1 = document.getElementById("#selected_control1{{w.id}}");
		var divc2 = document.getElementById("#selected_control2{{w.id}}");
		// call HS and get all the controls for this device ref
		// add 2 droplists that contain all the control labels and values so the user can select the 2 toggle values
		// the 2 toggle values will be saved when the user saves the dialog
		$.ajax({
			type: "POST",
			async: "true",
			url: '/dashboard.html',
			cache:false,
			data: 'action=controlsbyref&ref='+ref,
			success: function (response) {
				var sResp=eval('(' + response + ')');
				var value=sResp[1];
				console.log(value);
				var arr=JSON.parse(value);
				//console.log(arr);
				//.label
				//.value
				//.control_type
				var html='<select class="mdb-select md-form mx-2" id="control_select1{{w.id}}" name="save_control1" >';	
				// pre-select the On/Off controls for ControlUse on and off
				var selected='';
				arr.forEach(function(item) {
					if(item.controluse=='1') {
						selected='selected';
					}
					html+='<option '+selected+' value="'+item.value+'">'+item.label+'</option>'
					selected='';
				});
				html+='</select>';
				html+='<label class="mdb-main-label">Control Value</label>';
				divc1.innerHTML=html;
				$('#control_select1{{w.id}}').materialSelect();
				
				html='<select class="mdb-select md-form mx-2" id="control_select2{{w.id}}" name="save_control2">';	
				selected='';
				arr.forEach(function(item) {
					if(item.controluse=='2') {
						selected='selected';
					}
					html+='<option '+selected+' value="'+item.value+'">'+item.label+'</option>'
					selected='';
				});
				html+='</select>';
				html+='<label class="mdb-main-label">Control Value</label>';
				divc2.innerHTML=html;
				$('#control_select2{{w.id}}').materialSelect();	
			},
			error: function(){
				//alert("Error");
			}
		});
		
		
			
	}
}

</script>
{{else}}
<script>
//script for non edit mode

function toggle{{id_unique}}() {
    $.ajax({
        type: "POST",
        async: "true",
        url: '/dashboard.html',
        cache:false,
        data: 'action=device_status_value&ref={{feature_item_ref}}',
        success: function (response) {
            var sResp=eval('(' + response + ')');
			var value=sResp[1];
			if(value=='{{control1_value}}') {
				AjaxPost("action=control_device_by_value&ref="+{{feature_item_ref}}+"&value={{control2_value}}","dashboard.html");
			}
			else {
				AjaxPost("action=control_device_by_value&ref="+{{feature_item_ref}}+"&value={{control1_value}}","dashboard.html");
			}
			setTimeout(updateDevice{{id_unique}}, 1000);
       	   
        },
        error: function(){
            //alert("Error");
        }
    });

}

function updateDevice{{id_unique}}() {
	AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}","dashboard.html");
}


</script>
{{end}}