{{refid=queries['ref']}}
{{qchild = queries['feature']}}
{{if qchild==null}}
    {{qchild=''}}
{{end}}
{{child=device_prop refid 'Relationship'}}
{{if child==3 || child==4}}
    {{#for child and standalone we only want to display the status for this ref}}
    {{qchild=refid}}
{{end}}


<div class="device_prop_name">
	<b>{{device_name_full refid}}
    {{if qchild!=''}}
    &nbsp;({{device_prop qchild 'Name'}})
    {{end}}
    </b>
	<hr>
</div>



<div class="row small">
    <div class="col">
    Advanced settings, changes could cause devices to not work as expected
    </div>
</div>
                    
                    {{if (device_version refid) < 4}}
                        {{list=child_devices refid false true true true}}
                    {{else}}
                        {{list=child_devices refid false true false false}}
                    {{end}}
                                      
                    
                    {{if qchild==''}}
                    <!--Accordion wrapper-->
                    <div class="accordion md-accordion" id="accordionstatus" role="tablist" aria-multiselectable="true">
                    {{end}}

                        {{for child in list}}
                        
                        {{if (qchild==child.ref && qchild != '') || qchild==''}}

                        {{if qchild==''}}
                        <!-- Accordion card -->
                        <div class="card">
                        {{end}}
                            {{if qchild==''}}
                            <!-- Card header -->
                            <div class="card-header" role="tab" id="headingstatus{{child.ref}}">
                                {{ex='false'}}
                                {{sh=''}}
                                {{if pair_expanded_ref==child.ref}}
                                {{ex='true'}}
                                {{sh='show'}}
                                {{end}}
                                <a data-toggle="collapse" data-parent="#accordionstatus" href="#collapsestatus{{child.ref}}" aria-expanded="{{ex}}" aria-controls="collapsestatus{{child.ref}}" childref="{{child.ref}}" action="expand_collapse">
                                    <h5 class="mb-0">
                                        {{child.name}} <i class="fas fa-angle-down rotate-icon"></i>
                                    </h5>
                                </a>
                            </div>
                            {{end}}

                            {{if qchild==''}}
                            <!-- Card body -->
                            <div id="collapsestatus{{child.ref}}" class="collapse {{sh}}" role="tabpanel" aria-labelledby="headingstatus{{child.ref}}" data-parent="#accordionstatus">
                            {{end}}
                                <div class="card-body">

                                    <div class="streakhs grey lighten-2">
                                        {{ if (device_version child.ref) >= 4 }}Edit Controls{{ else }}Edit Status/Controls{{ end }}
                                    </div>

                                    <div class="row  ">
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>Start</b>
                                        </div>
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>End</b>
                                        </div>
                                        <div class="col-md-2 d-sm-none d-none d-lg-block">
                                            <b>{{ if (device_version child.ref) >= 4 }}Label{{ else }}Status{{ end }}</b>
                                        </div>
                                        <div class="col-md-2 d-sm-none d-none d-lg-block">
                                            <b>Control Use</b>
                                        </div>
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>Row</b>
                                        </div>
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>Column</b>
                                        </div>
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>Col Span</b>
                                        </div>
                                        {{if (device_version child.ref) >= 4}}
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">                                            
                                        </div>
                                        {{else}}
                                        <div class="col-md-1 d-sm-none d-none d-lg-block">
                                            <b>Control/Status</b>
                                        </div>
                                        {{end}}
                                        <div class="col-md d-sm-none d-none d-lg-block">
                                            
                                        </div>
                                    </div>
                                    {{index=0}}
                                    {{row=0}}
                                    {{for vsp in child.vspairs_sorted}}
                                    {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                    <form id="statusvaluesform">
                                    {{end}}
                                        <div class="row mt-1 mb-1 no-gutters align-items-center {{if row==1}}hs-bg-blue-l4{{row=0}}{{else}}{{row=1}}{{end}}">
                                            {{if vsp.pair_type==2}}
                                            <!--range-->
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_range_start" class="form-control" name="vsp_range_start" value="{{vsp.range_start}}">
                                                    <label for="vsp_range_start">Start</label>
                                                </div>
                                                {{else}}
                                                {{vsp.range_start}}
                                                {{end}}
                                            </div>
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_range_end" class="form-control" name="vsp_range_end" value="{{vsp.range_end}}">
                                                    <label for="vsp_range_end">End</label>
                                                </div>
                                                {{else}}
                                                {{vsp.range_end}}
                                                {{end}}
                                            </div>         
                                            <div class="col-md-2 mr-1">
                                                {{#status place holder}}
                                            </div>
                                            <div class="col-md-2 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <select class="mdb-select md-form" id="vsp_control_use" name="vsp_control_use">
                                                    {{cu_name=control_use_string vsp.control_use}}
                                                    {{for e in control_use_values}}
                                                    {{selected=''}}
                                                    {{if cu_name==e.name}}
                                                    {{selected='selected'}}
                                                    {{end}}
                                                    <option {{selected}} value="{{e.value}}">{{e.name}}</option>
                                                    {{end}}
                                                </select>
                                                <label class="mdb-main-label">Control Use</label>
                                                {{else}}
                                                {{control_use_string vsp.control_use}}
                                                {{end}}
                                            </div>

                                            {{else}}
                                            <!--single value-->
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_value" class="form-control" name="vsp_value" value="{{vsp.value}}">
                                                    <label for="vsp_value">Value</label>
                                                </div>
                                                {{else}}
                                                {{vsp.value}}
                                                {{end}}
                                            </div>
                                            <div class="col-md-1 mr-1">
                                                {{# range place holder}}
                                            </div>
                                            <div class="col-md-2 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_status" class="form-control" name="vsp_status" value="{{get_pair_string child.ref index}}">
                                                    <label for="vsp_status">Status</label>
                                                </div>
                                                {{else}}
                                                {{get_pair_string child.ref index}}
                                                {{end}}
                                            </div>
                                            <div class="col-md-2 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <select class="mdb-select md-form" id="vsp_control_use" name="vsp_control_use">
                                                    {{cu_name=control_use_string vsp.control_use}}
                                                    {{for e in control_use_values}}
                                                    {{selected=''}}
                                                    {{if cu_name==e.name}}
                                                    {{selected='selected'}}
                                                    {{end}}
                                                    <option {{selected}} value="{{e.value}}">{{e.name}}</option>
                                                    {{end}}
                                                </select>
                                                <label class="mdb-main-label">Control Use</label>
                                                {{else}}
                                                {{control_use_string vsp.control_use}}
                                                {{end}}
                                            </div>
                                            {{end}}
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_row" class="form-control" name="vsp_row" value="{{vsp.render__location.row}}">
                                                    <label for="vsp_row">Row</label>
                                                </div>
                                                {{else}}
                                                {{vsp.render__location.row}}
                                                {{end}}
                                            </div>
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_column" class="form-control" name="vsp_column" value="{{vsp.render__location.column}}">
                                                    <label for="vsp_column">Column</label>
                                                </div>
                                                {{else}}
                                                {{vsp.render__location.column}}
                                                {{end}}
                                            </div>
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsp_column_span" class="form-control" name="vsp_column_span" value="{{vsp.render__location.column_span}}">
                                                    <label for="vsp_column_span">Span</label>
                                                </div>
                                                {{else}}
                                                {{vsp.render__location.column_span}}
                                                {{end}}
                                            </div>
                                            {{if (device_version child.ref) >= 4}}
                                            <div class="col-md-1 mr-1">
                                            </div>
                                            {{else}}
                                            <div class="col-md-1 mr-1">
                                                {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                                <div class="md-form">
                                                    <select class="mdb-select md-form" id="vsp_control_status" name="vsp_control_status">
                                                        <option {{if vsp.control_status==3}}selected{{end}} value="3">Both</option>
                                                        <option {{if vsp.control_status==2}}selected{{end}} value="2">Control</option>
                                                        <option {{if vsp.control_status==1}}selected{{end}} value="1">Status</option>
                                                        
                                                    </select>
                                                    
                                                </div>
                                                {{else}}
                                                {{vsp.control_status}}
                                                {{end}}
                                            </div>
                                            {{end}}
                                            <div class="col-md">
                                                <div class="md-form">                                                
                                                    {{if edit_pair_ref==child.ref}}
                                                        <!--we are editing a line -->
                                                        {{if edit_pair_index==index}}
                                                            <i class="far fa-lg fa-point fa-save" form="statusvaluesform" action="edit_pair" pair_ref='{{child.ref}}' index='{{index}}'  data-toggle='tooltip' data-placement='top' title='Save'></i>
                                                            <i class="far fa-lg fa-point fa-times mr-1 ml-1 mb-2" action="edit_cancel" pair_ref='{{child.ref}}' index='{{index}}'  data-toggle='tooltip' data-placement='top' title='Cancel'></i>
                                                        {{end}}
                                                    {{else}}
                                                        <i class="far fa-lg fa-edit fa-point" form="statusvaluesform" action="edit_pair" pair_ref='{{child.ref}}' index='{{index}}' data-toggle='tooltip' data-placement='top' title='Edit'></i>
                                                        <i class="far fa-lg fa-point fa-trash-alt mr-1 ml-1 mb-2" action="delete_vsp_pair" pair_ref='{{child.ref}}' index="{{index}}" data-tooltip='tooltip' data-placement='top' title='Delete Pair'></i>
                                                        {{if vsp.pair_type==2}}
                                                            <i class="fas fa-lg fa-point fa-sliders-h" data-toggle="modal" data-target="#rangeoptions" onclick="selected_child_ref='{{child.ref}}';selected_pair_index='{{index}}';isgraphic=false" data-tooltip='tooltip' data-placement='top' title='Options'></i>
                                                        {{end}}
                                                    {{end}}                                                    
                                                </div>
                                            </div>
                                        </div>
                                    {{if edit_pair_ref==child.ref && edit_pair_index==index}}
                                    </form>
                                    {{end}}
                                    {{index=index+1}}
                                    {{end}}
                                    <div class="row mt-1 mb-1 no-gutters align-items-center">
                                        <button type="button" class="btn btn-default" pair_ref='{{child.ref}}' action="new_single_value">New Single Value</button>
                                        <button type="button" class="btn btn-default" pair_ref='{{child.ref}}' action="new_range_value">New Range Value</button>
                                    </div>

                                    <div class="streakhs grey lighten-2">
                                        Edit Status/Graphics
                                    </div>
                                    <div class="row mt-1 mb-1 no-gutters align-items-center">
                                        <div class="col d-sm-none d-none d-lg-block text-left">
                                            <b>Start</b>
                                        </div>
                                        <div class="col d-sm-none d-none d-lg-block text-left">
                                            <b>End</b>
                                        </div>
                                        {{#if (device_version child.ref) >= 4}}
                                        <div class="col d-sm-none d-none d-lg-block text-left">
                                            <b>Status</b>
                                        </div>
                                        <div class="col d-sm-none d-none d-lg-block text-left">
                                            <b>Status Use</b>
                                        </div>
                                        {{#end}}
                                        <div class="col-2 d-sm-none d-none d-lg-block text-left">
                                            <b>Graphic</b>
                                        </div>
                                        <div class="col-md-2 d-sm-none d-none d-lg-block text-left">
                                        </div>
                                    </div>                                    
                                    {{~for cls in child.vgpairs_sorted~}}
                                    {{~if edit_vgpair_ref==child.ref && edit_pair_index==cls.index~}}
                                    <form id="statusgraphicsform">
                                    {{~end~}}
                                        <div class="row mt-1 mb-1 no-gutters align-items-center {{if row==1}}hs-bg-blue-l4{{row=0}}{{else}}{{row=1}}{{end}}">
                                            {{~if cls.is_range~}}
                                                <div class="col text-left">
                                                    {{~if edit_vgpair_ref==child.ref && edit_pair_index==cls.index~}}
                                                    <div class="md-form">
                                                        <input type="text" id="vsg_range_min" class="form-control" name="vsg_range_min" value="{{cls.range_start}}">
                                                        <label for="vsg_range_min">Start</label>
                                                    </div>
                                                    {{else}}
                                                    {{~cls.range_start~}}
                                                    {{~end~}}
                                                </div>
                                                <div class="col text-left">

                                                    {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                                    <div class="md-form">
                                                        <input type="text" id="vsg_range_max" class="form-control" name="vsg_range_max" value="{{cls.range_end}}">
                                                        <label for="vsg_range_max">End</label>
                                                    </div>
                                                    {{else}}
                                                    {{cls.range_end}}
                                                    {{end}}
                                                </div>
                                            {{else}}
                                                <div class="col text-left">
                                                    {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                                    <div class="md-form">
                                                        <input type="text" id="vsg_value" class="form-control" name="vsg_value" value="{{cls.value}}">
                                                        <label for="vsg_value">Value</label>
                                                    </div>
                                                    {{else}}
                                                    {{cls.value}}
                                                    {{end}}
                                                </div>
                                                
                                            {{end}}

                                            {{#if (device_version child.ref) >= 4}}
                                            <div class="col text-left">
                                                {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                                <div class="md-form">
                                                    <input type="text" id="vsg_label" class="form-control" name="vsg_label" value="{{cls.label}}">
                                                    <label for="vsg_label">Value</label>
                                                </div>
                                                {{else}}
                                                {{cls.label}}
                                                {{end}}
                                            </div>
                                            <div class="col text-left">
                                                {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                                <select class="mdb-select md-form" id="vsp_status_use" name="vsp_status_use">
                                                    {{cu_name=control_use_string cls.control_use}}
                                                    {{for e in status_use_values}}
                                                    {{selected=''}}
                                                    {{if cu_name==e.name}}
                                                    {{selected='selected'}}
                                                    {{end}}
                                                    <option {{selected}} value="{{e.value}}">{{e.name}}</option>
                                                    {{end}}
                                                </select>
                                                <label class="mdb-main-label">Status Use</label>
                                                {{else}}
                                                {{control_use_string cls.control_use}}
                                                {{end}}</div>
                                            {{#end}}
                                            <div class="col-2 text-left">
                                                {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                                    {{if cls.graphic==''}}
                                                        <img onclick="$('#dlg_pair_ref').val('{{child.ref}}');$('#dlg_pair_index').val('{{cls.index}}')" class="fa-point" src='images/HomeSeer/ui/Image-Not-Selected-tn.png' width='36' height='36' data-toggle="modal" data-target="#pickimage">
                                                    {{else}}
                                                        <img onclick="$('#dlg_pair_ref').val('{{child.ref}}');$('#dlg_pair_index').val('{{cls.index}}')" class="fa-point" src='{{cls.graphic}}' width='36' height='36' data-toggle="modal" data-target="#pickimage">
                                                    {{end}}                                                
                                                {{else}}                                                
                                                    {{if cls.graphic==''}}
                                                        <img src='images/HomeSeer/ui/Image-Not-Selected-tn.png' width='36' height='36'>
                                                    {{else}}
                                                        <img src='{{cls.graphic}}' width='36' height='36'>
                                                    {{end}}                                                
                                                {{end}}
                                            </div>
                                            <div class="col-md-2 text-left">
                                                <div class="md-form">
                                                    {{if edit_vgpair_ref==child.ref }}
                                                        {{if edit_pair_index==cls.index}}
                                                            <i class="far fa-lg fa-save fa-point" form="statusgraphicsform" action="edit_vgpair" pair_ref='{{child.ref}}' index='{{cls.index}}' data-toggle='tooltip' data-placement='top' title='Save'></i>
                                                            <i class="fas fa-lg fa-point fa-times mr-1 ml-1 mb-2" action="edit_vgp_cancel" pair_ref='{{child.ref}}' index='{{cls.index}}'  data-toggle='tooltip' data-placement='top' title='Cancel'></i>
                                                        {{end}}
                                                    {{else}}
                                                        <i class="far fa-lg fa-edit fa-point" form="statusgraphicsform" action="edit_vgpair" pair_ref='{{child.ref}}' index='{{cls.index}}' data-toggle='tooltip' data-placement='top' title='Edit'></i>
                                                        <i class="far fa-lg fa-point fa-trash-alt mr-1 ml-1 mb-2" action="delete_vgp_pair" pair_ref='{{child.ref}}' index="{{cls.index}}" data-tooltip='tooltip' data-placement='top' title='Delete Pair'></i>
                                                        {{if cls.is_range && ((device_version child.ref) >= 4)}}
                                                        <i class="fas fa-lg fa-point fa-sliders-h" data-toggle="modal" data-target="#rangeoptions" onclick="selected_child_ref='{{child.ref}}';selected_pair_index='{{cls.index}}';isgraphic=true" data-tooltip='tooltip' data-placement='top' title='Options'></i>
                                                        {{end}}
                                                    {{end}}
                                                </div>
                                            </div>
                                        </div>
                                    {{if edit_vgpair_ref==child.ref && edit_pair_index==cls.index}}
                                    </form>
                                    {{end}}
                                    
                                    {{end}}
                                    <div class="row mt-1 mb-1 no-gutters align-items-center">
                                        <button type="button" class="btn btn-default" pair_ref='{{child.ref}}' action="new_single_graphic">New Single Graphic</button>
                                        <button type="button" class="btn btn-default" pair_ref='{{child.ref}}' action="new_range_graphic">New Range Graphic</button>

                                    </div>                                
                                    <div class="streakhs grey lighten-2">
                                        Advanced Information
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            ID
                                        </div>
                                        <div class="col-9">
                                            {{device_prop child.ref 'Ref'}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Device Version
                                        </div>
                                        <div class="col-9">
                                            {{dv=deviceclass_by_ref child.ref}}{{dv.version}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Value
                                        </div>
                                        <div class="col-9">
                                            {{dv=deviceclass_by_ref child.ref}}{{dv.hsdev_value}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Status
                                        </div>
                                        <div class="col-9">
                                            {{status_text child.ref}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Interface
                                        </div>
                                        <div class="col-9">
                                            {{device_prop child.ref 'Interface'}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Device Type
                                        </div>
                                        <div class="col-9">
                                            {{device_type_formatted child.ref}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Priority Order
                                        </div>
                                        <div class="col-9">
                                            {{device_priority_order child.ref}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Relationship
                                        </div>
                                        <div class="col-9">
                                            {{device_relationship_formatted child.ref}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            Associated Devices
                                        </div>
                                        <div class="col-9">
                                            {{device_associated_devices_formatted child.ref}}
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                            {{if qchild==''}}
                            </div>  
                            {{end}}
                        {{if qchild==''}}
                        </div>
                        {{end}}
                        {{end}}
                        {{end}}
                    {{if qchild==''}}
                    </div>
                    {{end}}