{{# w=widget class, dashboard=dashboard name, d=device}}
{{id_unique=string.replace w.id '-' ''}}
<div class="modal fade pg-show-modal" id="edit_thermostat_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}}2" role="tab"><i class="fas fa-edit mr-1"></i>
                        Display</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
                        Format</a>
                    </li>                  
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade" 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 in show active" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <input type="hidden" id="edit_thermostat_card_widget_id_{{w.id}}" name="thermostat_card_widget_id_{{w.id}}" value="{{w.id}}">
			                <p>
                            <div style="width:100%" class="streakhs grey lighten-2">
                                Device
                            </div>
                            <div class="row no-gutters">                                
                                <div class="col-md-10 justify-content-center align-content-center">
                                    <select class="mdb-select md-form mx-2" id="thermostat_feature_select{{w.id}}" name="feature_add" action="card_thermostat_select_feature" widget_id="{{w.id}}" searchable="Search for a device here...">
                                        {{roots=root_devices_by_location}}
										<option {value="">Select a Thermostat Device</option>
                                        {{ for dev in (roots) }}  
                                            {{if (dev.device_api==512 && dev.edevice_type==8)}}
                                                {{# thermostat device type}}	
                                                {{selected=''}}
                                                {{if dev.ref==w.device_ref}}{{selected='selected'}}{{end}}
                                                {{if location1_display_first}}
                                                    <option {{selected}} value="{{dev.ref}}">{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
                                                {{else}}
                                                    <option {{selected}} value="{{dev.ref}}">{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
                                                {{end}}	
                                            {{end}} 
                                        {{end}}
                                    </select>
                                </div>  
                            </div>
					        <div style="width:100%" class="streakhs grey lighten-2">
                                Display
                            </div>
					        <div class="row no-gutters">
						        <div class="col">
							        <span class="switch">
							          <label>									
									        <input type="checkbox" id="show_feature_bar_{{w.id}}" name="show_feature_bar_{{w.id}}" {{if w.show_feature_bar}}checked{{end}}>
									        <span class="lever"></span>Feature Bar
							          </label>
							        </span>						
						        </div>
					        </div>
				           <div class="row no-gutters">
						        <div class="col">
							        <span class="switch">
							          <label>									
									        <input type="checkbox" id="show_location2_{{w.id}}" name="show_location2_{{w.id}}" {{if w.show_location2}}checked{{end}}>
									        <span class="lever"></span>{{location2_name}}
							          </label>
							        </span>											
						        </div>
					        </div>
					        <div class="row no-gutters">
						        <div class="col">
							        <span class="switch">
							          <label>									
									        <input type="checkbox" id="show_location1_{{w.id}}" name="show_location1_{{w.id}}" {{if w.show_location1}}checked{{end}}>
									        <span class="lever"></span>{{location_name}}
							          </label>
							        </span>
						        </div>
					        </div>
				           <div class="row no-gutters">
					           <div class="col">
						           <span class="switch">
							          <label>									
									        <input type="checkbox" id="show_name_{{w.id}}" name="show_name_{{w.id}}" {{if w.show_name}}checked{{end}}>
									        <span class="lever"></span>Name
							          </label>
							        </span>
					           </div>
				           </div>
					        <div class="row no-gutters">
					           <div class="col">
							        <span class="switch">
								        <label>									
									        <input type="checkbox" id="show_temperature_{{w.id}}" name="show_temperature_{{w.id}}" {{if w.show_temperature}}checked{{end}}>
									        <span class="lever"></span>Temperature
								        </label>
							        </span>
					           </div>
					        </div>
					        <div class="row no-gutters">
					           <div class="col">
							        <span class="switch">
								        <label>									
									        <input type="checkbox" id="show_heat_controls_{{w.id}}" name="show_heat_controls_{{w.id}}" {{if w.show_heat_controls}}checked{{end}}>
									        <span class="lever"></span>Heat Controls
								        </label>
							        </span>
					           </div>
					        </div>
					        <div class="row no-gutters">
					           <div class="col">
							        <span class="switch">
								        <label>									
									        <input type="checkbox" id="show_cool_controls_{{w.id}}" name="show_cool_controls_{{w.id}}" {{if w.show_cool_controls}}checked{{end}}>
									        <span class="lever"></span>Cool Controls
								        </label>
							        </span>
					           </div>
					        </div>
				           <div class="row no-gutters">
					           <div class="col">
							        <span class="switch">
								        <label>									
									        <input type="checkbox" id="show_mode_controls_{{w.id}}" name="show_mode_controls_{{w.id}}" {{if w.show_mode_controls}}checked{{end}}>
									        <span class="lever"></span>Mode Controls
								        </label>
							        </span>
					           </div>
					        </div>
					        <div class="row no-gutters">
					           <div class="col">
							        <span class="switch">
								        <label>									
									        <input type="checkbox" id="show_fan_mode_controls_{{w.id}}" name="show_fan_mode_controls_{{w.id}}" {{if w.show_fan_mode_controls}}checked{{end}}>
									        <span class="lever"></span>Fan Controls
								        </label>
							        </span>
					           </div>
					        </div>
                            </p>
				        </div>
                    </div>
			        <div style="width:100%" class="streakhs grey lighten-2">
                        Features
                    </div>
			        <div id="edit_device_dialog_features_{{w.id}}">
                        {{# card_device_dialogs_features.html is inserted here via ajax}}
                    </div>
					{{save_action='save_thermostat_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_internal_footer.html}}                    
                </div>		       
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>

<script>

$('#thermostat_feature_select{{w.id}}').materialSelect();
$(document).on('change','#thermostat_feature_select{{w.id}}', {} ,function(e){
    var selected = $(this).children("option:selected")[0];
    if(selected != null) {
        data='action=card_thermostat_select_feature&newref='+selected.value+"&widget_id={{w.id}}";
        AjaxPost(data,"dashboard.html");	        
	}
});

function CancelEdit{{id_unique}} () {
	data='action=card_thermostat_dialog_cancel&widget_id={{w.id}}';
	AjaxPost(data,"dashboard.html");	
}

</script>