{{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>
.devices_children_icon {
    font-size: 12px;
    //overflow-x: auto;
    overflow: hidden;
    white-space: nowrap;
}
.card_device_panel_location_text {
    font-size: 14px;
}
.card_device_panel_feature_name_text {
    font-size: 14px;
    font-weight: bold;
    color: #004069;
}
.card_device_panel_name_text {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}
</style>
    
        <div class="p-2">
            <form id='controldevice_{{d.ref}}'>         
                {{if w.show_feature_bar}}
                <div class="row pb-1 no-gutters align-items-center">  
                    <div {{if !dbs.edit_mode}} {{if (array.size d.children)>0}} onclick="show_children({{ d.primary_ref }})" {{end}} data-toggle="modal" data-target="#childcontrol"{{end}} class="{{if !dbs.edit_mode}}fa-point{{end}} text-right col mr-2 devices_children_icon d-xl-inline-block float-xl-none border border-top-0 border-right-0 border-left-0 pb-1">
                        {{ for c in d.children }}
                            <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 }}
                        {{ 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_device_panel_location_text pt-1 {{if !dbs.edit_mode}}fa-point{{end}}" {{if !dbs.edit_mode}}onclick="show_children({{ d.primary_ref }}){{end}}">
                        {{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 {{if !dbs.edit_mode}}fa-point{{end}}" {{if !dbs.edit_mode}}onclick="show_children({{ d.primary_ref }}){{end}}">
                    <div class="card_device_panel_name_text text-truncate">
                        {{d.name}}
                    </div>
                </div>
                {{end}}
                {{if d.child_count==0}}
                <div class="row pb-1 no-gutters align-items-center flex-nowrap">
                    {{if w.show_status_image}}
                    <div class="col-auto">
                        <div id='stimgprim_{{d.ref}}'><img src='{{ status_image_file d.ref }}' width='32' height='32' ></div>
                    </div>
                    {{end}}
                    <div class="col-auto">
                        <div class="row card_device_panel_feature_name_text">
                            <div class="col-auto"> 
                                {{device_prop d.ref 'Name'}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-auto">
                                <div class="hs-text2line mr-5" id='stprim_{{d.ref}}'  >
                                    {{ status_text d.ref }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    {{# Check if this device has controls on the root (HS3 device)}}
                    {{row1 = controls_row d.ref 1}}   
                    {{if row1 != ''}}
                        <div id='controls_row1_{{d.ref}}' class="row no-gutters justify-content-end align-items-center">
                            {{row1}}
                        </div>
                    {{end}}                 
        
                    {{row2 = controls_row d.ref 2}}
                    {{if row2 != ''}}
                        <div id='controls_row2_{{d.ref}}' class="row no-gutters justify-content-end align-items-center">
                            {{row2}}
                        </div>
                    {{end}}

                    {{row3 = controls_row d.ref 3}}
                    {{if row3 != ''}}                        
                        <div id='controls_row3_{{d.ref}}' class="row no-gutters justify-content-end align-items-center">
                            {{row3}}
                        </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_device_panel_feature_name_text">
                                    <div class="col-auto">  
                                        {{device_prop fref 'Name'}}                                    
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="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}}