{{if w==null}}
{{widget_id=queries['widget_id']}}
{{w=widget_by_id widget_id}}
{{end}}
{{num_widgets = widget_count w.id}}
{{d=device_by_ref w.device_ref}}
{{dbs=dashboards_ref}}
{{if d}}
<style>
.thermostat_children_icon {
    font-size: 12px;
    //overflow-x: auto;
    overflow: hidden;
    white-space: nowrap;
}
.card_thermostat_panel_location_text {
    font-size: 14px;
}
.card_thermostat_panel_feature_name_text {
    font-size: 14px;
    font-weight: bold;
    color: #004069;
}
.card_thermostat_panel_name_text {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}
.card_therm_current_temp {
    font-size: 2em;
}

.card_therm_current_heatsetpoint {
    font-size: 1.5em;
    color: red;
}

.card_therm_current_coolsetpoint {
    font-size: 1.5em;
    color: blue;
}
</style>
        <div class="p-2 mr-2">
            <form id='controldevice_{{d.primary_ref}}'>
                {{if w.show_feature_bar}}
                <div class="row pb-1 no-gutters">
                    <div {{if (array.size d.children)>0}} onclick="show_children({{ d.primary_ref }})" {{end}} data-toggle="modal" data-target="#childcontrol" class="{{if (array.size d.children)>0}}fa-point{{end}} text-right col mr-2 thermostat_children_icon d-xl-inline-block float-xl-none border border-top-0 border-right-0 border-left-0 pb-1">
                        <!--always include the root if HS3 device-->
                        {{if (d.version < 4) && (d.primary_ref != d.ref)}}
                            {{if d.device_api==513 && ((d.edevice_type==16 && (d.device_sub_type==0 || d.device_sub_type==6 || d.device_sub_type==7)) || (d.edevice_type==17 && (d.device_sub_type==1 || d.device_sub_type==2 || d.device_sub_type==3 || d.device_sub_type==4 || d.device_sub_type==10)))}}
                            {{# do no display thermostat/child devices for which information is already in the body of the card}}
                            {{else}}
                            <span id='stchim_{{d.ref}}'>
                                <img src='{{status_image_file d.ref}}' width='24' height='24' data-toggle='tooltip' data-placement='top' title='{{d.name}}: {{status_text_no_html d.ref}}'>
                                {{ if d.status_suffix=='%' || d.status_suffix=='@S@' }}
                                {{ status_text_no_html d.ref }}
                                {{ end }}
                            </span>
                            {{end}}
                        {{end}}
                        {{ for c in d.children }}
                            
                            {{if c.device_api==513 && ((c.edevice_type==16 && (c.device_sub_type==0 || c.device_sub_type==6 || c.device_sub_type==7)) || (c.edevice_type==17 && (c.device_sub_type==1 || c.device_sub_type==2 || c.device_sub_type==4 || c.device_sub_type==10)))}}
                            {{# do no display thermostat/child devices for which information is already in the body of the card}}
                            {{else}}
                            <span id='stchim_{{c.ref}}'>
                                <img src='{{status_image_file c.ref}}' width='24' height='24' data-toggle='tooltip' data-placement='top' title='{{c.name}}: {{status_text_no_html c.ref}}'>
                                {{ if c.status_suffix=='%' || c.status_suffix=='@S@' }}
                                {{ status_text_no_html c.ref }}
                                {{ end }}
                            </span>
                            {{end}}
                            
                        {{ end }}
                        {{ if d.child_count == 0 }}
                        <img src="/images/HomeSeer/status/transparent.png" width="24" height="24">
                        {{ end }}
                    </div>
                </div>
                {{end}}
                              
                {{if w.show_location1 || w.show_location2}}          
                <div class="row ml-1 pb-1 no-gutters card_thermostat_panel_location_text pt-1 fa-point" onclick="show_children({{ d.primary_ref }})">
                    {{if location1_display_first}}
                        {{if w.show_location1}}{{d.location}}{{end}} {{if w.show_location2}}{{if use_location2}} | {{d.location2}} {{end}}{{end}}
                    {{else}}
                        {{if w.show_location2}}{{if use_location2}}{{d.location2}} | {{end}}{{end}}{{if w.show_location1}}{{d.location}}{{end}}
                    {{end}}
                </div>
                {{end}}

                {{if w.show_name}}
                <div class="row ml-1 pb-1 no-gutters fa-point" onclick="show_children({{ d.primary_ref }})">
                    <div class="card_thermostat_panel_name_text text-truncate">
                        {{d.name}}
                    </div>
                </div>
                {{end}}
                             
                {{have_heat=false}}
                {{have_cool=false}}
                {{have_autochangeover=false}}
                {{have_mode=false}}
                {{have_fan=false}}
                {{heat_setpoint=''}}
                {{cool_setpoint=''}}
                {{autochangeover_setpoint=''}}
                {{ for c in d.children }}                            
                    {{if c.edevice_type==17}}                            
                        {{if c.device_sub_type==1}}
                            {{have_heat=true}}
                            {{heat_setpoint=therm_current_heat_set d.ref}}
                        {{end}}
                        {{if c.device_sub_type==2}}
                            {{have_cool=true}}
                            {{cool_setpoint=therm_current_cool_set d.ref}}
                        {{end}}
                        {{if c.device_sub_type==10}}
                            {{have_autochangeover=true}}
                            {{autochangeover_setpoint=therm_current_autochangeover_set d.ref}}
                        {{end}}
                        {{if c.device_sub_type==3}}
                            {{have_mode=true}}
                        {{end}}
                        {{if c.device_sub_type==4}}
                            {{have_fan=true}}
                        {{end}}
                    {{end}}
                {{end}}
                {{if w.show_heat_controls || w.show_temperature || w.show_cool_controls}}
                <div class="row no-gutters" style="line-height:1.5">
                    {{if w.show_heat_controls}}
                    <div class="col-3 align-self-center text-center">
                        {{if (have_heat && heat_setpoint!='') || (have_autochangeover&& autochangeover_setpoint!='')}}
                        <button type="button" class="btn-default-clear waves-effect" action="control" ref='{{d.primary_ref}}' action_thermostat="{{if have_autochangeover}}autochangeup{{else}}heatup{{end}}">
                            <span style="font-size: 2em;">
                                <i class="fas fa-caret-up"></i>
                            </span>
                        </button>
                        {{end}}
                    </div>
                    {{end}}
                    {{if w.show_temperature}}
                    <div class="col-6 align-self-center text-center" style="min-height: 50px">
                    </div>
                    {{end}}
                    {{if w.show_cool_controls}}
                    <div class="col-3 align-self-center text-center">
                        {{if have_cool && cool_setpoint!=''}}
                        <button type="button" class="btn-default-clear waves-effect" action="control" ref='{{d.primary_ref}}' action_thermostat="coolup">
                            <span style="font-size: 2em;">
                                <i class="fas fa-caret-up"></i>
                            </span>
                        </button>
                        {{end}}
                    </div>
                    {{end}}
                </div>               
                <div class="row no-gutters mt-n4 mb-n4" style="line-height:1.5">
                    <!--div updated on changes-->
                    {{if w.show_heat_controls}}
                    <div id="therm_heat_set_{{d.primary_ref}}" class="col-3 card_therm_current_heatsetpoint align-self-center text-center">
                        {{if have_heat}}
                            {{heat_setpoint}}
                        {{else if have_autochangeover}}
                            {{autochangeover_setpoint}}
                        {{end}}
                    </div>
                    {{end}}
                    {{if w.show_temperature}}
                    <div id="therm_current_temp_{{d.primary_ref}}" class="col-6 card_therm_current_temp align-self-center text-center">
                        {{ therm_current_temp d.ref }}
                    </div>
                    {{end}}
                    <!--div updated on changes-->
                    {{if w.show_cool_controls}}
                    <div id="therm_cool_set_{{d.primary_ref}}" class="col-3 card_therm_current_coolsetpoint align-self-center text-center">
                        {{if have_cool}}
                            {{cool_setpoint}}
                        {{end}}
                    </div>
                    {{end}}
                </div>
                <div class="row no-gutters" style="line-height:1.5">
                    {{if w.show_heat_controls}}
                    <div class="col-3 align-self-center text-center">
                        {{if (have_heat && heat_setpoint!='') || (have_autochangeover&& autochangeover_setpoint!='')}}
                        <button type="button" class="btn-default-clear waves-effect" action="control" ref='{{d.primary_ref}}' action_thermostat="{{if  have_autochangeover}}autochangedown{{else}}heatdown{{end}}">
                            <span style="font-size: 2em;">
                                <i class="fas fa-caret-down"></i>
                            </span>
                        </button>
                        {{end}}
                    </div>
                    {{end}}
                    {{if w.show_temperature}}
                    <div class="col-6 align-self-center text-center" style="min-height: 50px">
                    </div>
                    {{end}}
                    {{if w.show_cool_controls}}
                    <div class="col-3 align-self-center text-center">
                        {{if have_cool && cool_setpoint!=''}}
                        <button type="button" class="btn-default-clear waves-effect" action="control" ref='{{d.primary_ref}}' action_thermostat="cooldown">
                            <span style="font-size: 2em;">
                                <i class="fas fa-caret-down"></i>
                            </span>
                        </button>
                        {{end}}
                    </div>
                    {{end}}
                </div>
                {{end}}
                {{if w.show_mode_controls}}
                    {{if have_mode}}
                    <div class="row no-gutters align-items-center">
                        <!--div updated on changes-->
                        <div id='controls_mode_{{d.primary_ref}}' class="col-2">
                            {{ therm_mode_status_image d.ref }}
                        </div>
                        <!--div updated on changes-->
                        <div id='controls_mode_controls_{{d.primary_ref}}' class="col-10">
                            {{ therm_mode_controls d.ref }}
                        </div>
                    </div>
                    {{end}}
                {{end}}

                {{if w.show_fan_mode_controls}}
                    {{if have_fan}}
                    <div class="row no-gutters align-items-center">
                        <!--div updated on changes-->
                        <div id='controls_fan_{{d.primary_ref}}' class="col-2">
                            {{ therm_fan_status_image d.ref }}
                        </div>
                        <!--div updated on changes-->
                        <div id='controls_fan_controls{{d.primary_ref}}' class="col-10">
                            {{ therm_fan_controls d.ref }}
                        </div>
                    </div>
                    {{end}}        
                {{end}}
                {{ for feature_prop in w.all_features }} 
                    {{fref=feature_prop.value.ref}}
                    {{if feature_prop.value.show_feature}}
                        <div class="row pb-1 no-gutters align-items-center flex-nowrap">
                            <div class="col-auto">
                                <div id='stimgprim_{{fref}}'><img src='{{ status_image_file fref }}' width='32' height='32' ></div>
                            </div>
                            <div class="col-auto">
                                <div class="row card_thermostat_panel_feature_name_text">
                                    <div class="col">  
                                        {{device_prop fref 'Name'}}                                    
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="hs-text2line mr-5" id='stprim_{{fref}}'  >
                                            {{ status_text fref }}
                                        </div>
                                    </div>
                                </div>
                            </div>                    
                        </div>
                        {{row1 = controls_row fref 1 }}
                        {{if row1 != ''}}
                            <div id='controls_row1_{{fref}}' class="row no-gutters justify-content-end align-items-center">
                                {{row1}}
                            </div>
                        {{end}}                 
        
                        {{row2 = controls_row fref 2}}
                        {{if row2 != ''}}
                            <div id='controls_row2_{{fref}}' class="row no-gutters justify-content-end align-items-center">
                                {{row2}}
                            </div>
                        {{end}}

                        {{row3 = controls_row fref 3}}
                        {{if row3 != ''}}                        
                            <div id='controls_row3_{{fref}}' class="row no-gutters justify-content-end align-items-center">
                                {{row3}}
                            </div>                        
                        {{end}}
                    {{end}}
                {{end}}
            </form>
        </div>
{{end}}