{{refid=queries['ref']}}
{{devroot=device_by_ref refid}}
{{if !(devroot==null)}}
	{{devprilist=devroot.display_priority_temp}}
{{end}}
{{qchild = queries['feature']}}

{{if qchild == null}}
{{else}}
<div class="text-right">
	<a href="devices.html?ref={{refid}}&subpage=devprop&tab=settings">Device Settings</a>
</div>
{{end}}

<div class="device_prop_name">
	<b>
		{{device_name_full refid}}
		{{if qchild!=null}}
		{{noteid=qchild}}
		&nbsp;({{device_prop qchild 'Name'}})
		{{else}}
		{{noteid=refid}}
		{{end}}
	</b>
	{{usernote=device_prop noteid 'usernote'}}
	{{if usernote==''}}
	<i onclick="$('#childrefnote').val('{{noteid}}').change();noterefid='{{noteid}}'" class="far fa-lg fa-point fa-sticky-note mr-1 ml-1 mb-2" data-toggle="modal" data-target="#edit_notes" data-tooltip='tooltip' data-placement='top' title='Edit Note'></i>
	{{else}}
	<i onclick="$('#childrefnote').val('{{noteid}}').change();noterefid='{{noteid}}'" class="fas fa-lg fa-point fa-sticky-note mr-1 ml-1 mb-2" data-toggle="modal" data-target="#edit_notes" data-tooltip='tooltip' data-placement='top' title='{{html.escape usernote}}'></i>
	{{end}}
	<hr>
</div>

{{if (array.size devprilist) == 0}}
	<div class="row small">
		<div class="col">
		No extra features for this device
		</div>
	</div>
{{end}}



{{show=""}}

{{if qchild == null}}
<!--list features-->
		{{if (array.size list) > 0}}		
			<div class="row mt-1 mb-1 no-gutters border-bottom">
				<div class="col mb-1">
					<b>#</b>
				</div>
				<div class="col mb-1">
					<b>Feature</b>
				</div>
			</div>
		{{end}}
		{{count=1}}

		{{if !is_mobile_browser}}
		<div class="row mb-2 no-gutters">
			<div class="col-md-2">
				<b>#</b>
			</div>
			<div class="col-md-3">
				<b>Feature</b>
			</div>
			<div class="col-md-7">				
			</div>
		</div>
		{{end}}

		<div id="featureslist">
		{{for devpri in devprilist}}
			{{child=(feature_by_device refid devpri.ref)}}
			{{disp_pri=devpri.display_type}}
			<div id="order_{{count}}" style="border-bottom: 1px solid #dee2e6" class="row mb-2 no-gutters featurerow {{if !is_mobile_browser}}fa-grabbing{{end}}">
				<div class="col-md-1 mb-1">
					{{count}}
				</div>
				<div class="col-md-1 mb-1">
					<img src='{{status_image_file devpri.ref}}' width='24' height='24' >
				</div>
				<div class="col-md-3 mb-1">
					{{device_prop child.ref 'Name'}}
				</div>
				<div class="col-md-7 mb-1 text-right">					
					{{if disp_pri=='DISPLAY_NORMAL'}}				
						<i class="far fa-point fa-fw fa-edit mr-4" onclick="window.location='/devices.html?ref={{refid}}&tab=features&subpage=devprop&feature={{child.ref}}&fromtab=featureslist';"></i>
						<i class="far fa-point fa-fw fa-eye mr-4" data-tooltip='tooltip' data-placement='top' title='Change Display Type' data-toggle="modal" data-target="#displayoptions" data-feature-name="{{device_prop child.ref 'Name'}}" data-display-type="1" data-ref="{{devpri.ref}}"></i>
					{{else if disp_pri=='DISPLAY_IMPORTANT'}}
						<i class="far fa-point fa-fw fa-edit mr-4" onclick="window.location='/devices.html?ref={{refid}}&tab=features&subpage=devprop&feature={{child.ref}}&fromtab=featureslist';"></i>
						<i class="far fa-point fa-fw fa-exclamation-circle mr-4" style="color:#329de4" data-tooltip='tooltip' data-placement='top' title='Change Display Type' data-toggle="modal" data-feature-name="{{device_prop child.ref 'Name'}}" data-display-type="2" data-ref="{{devpri.ref}}" data-target="#displayoptions"></i>
					{{else}}
						<i class="far fa-point fa-fw fa-edit mr-4" onclick="window.location='/devices.html?ref={{refid}}&tab=features&subpage=devprop&feature={{child.ref}}&fromtab=featureslist';"></i>
						<i class="far fa-point fa-fw fa-eye-slash mr-4" data-tooltip='tooltip' data-placement='top' title='Change Display Type' data-toggle="modal" data-target="#displayoptions" data-feature-name="{{device_prop child.ref 'Name'}}" data-display-type="3" data-ref="{{devpri.ref}}"></i>
					{{end}}
					{{if count>1}}
						<i class="fas fa-fw fa-point fa-arrow-up mr-4" onclick="dirty=true" action="move_up" featureref='{{devpri.ref}}' index='{{count-1}}'></i>
						{{if count==(array.size devprilist)}}
						<i class="fas fa-point fa-fw mr-4" ></i>
						{{end}}
					{{else}}
						<i class="fas fa-point fa-fw mr-4" ></i>
					{{end}}
					{{if count<(array.size devprilist)}}
						<i class="fas fa-fw fa-point fa-arrow-down mr-4" onclick="dirty=true" action="move_down" featureref='{{devpri.ref}}' index='{{count-1}}'></i>
					{{end}}
					<i class="fas fa-grabbing fa-fw fa-grip-vertical mr-4"></i>
				</div>
			</div>
			{{count=count+1}}
		{{end}}
			
		</div>
		<div class="modal-footer mt-3">
            <button type="button" class="btn btn-cancel" action="cancel">Cancel</button>
            <button type="button" class="btn btn-success" action="save_features_order" id="save_features_order" {{if queries['changed'] == null}} disabled {{end}}>Save</button>                            
        </div>
		
	
{{else}}
	<!--display the feature details-->
	{{child=(feature_by_device refid qchild)}}	
		
		<div class="card-body">
				<form id="featuresform{{child.ref}}">
					<input type="hidden" id="groupid" name="childref" value="{{child.ref}}">
					<input type="hidden" id="fromtab" name="fromtab" value="{{ queries['fromtab']}}">					
					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form col-md">
							<input type="text" id="device_name_{{child.ref}}" class="form-control" name="name" value="{{device_prop child.ref 'Name'}}">
							<label for="device_name">Feature Name</label>
						</div>
					</div>

					{{if location1_display_first}}
					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form col-md input-group">
							<input type="text" id="device_location_{{child.ref}}" class="form-control" name="location" value="{{device_prop child.ref 'location'}}">
							<label for="device_location_{{child.ref}}">{{location_name}}</label>
							<button type="button" onclick="$('#device_ref').val('{{child.ref}}');" data-toggle="modal" data-target="#locationmodal" class="btn btn-default">Select {{location_name}}</button>
						</div>
					</div>
					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form col-md input-group">
							<input type="text" id="device_location2_{{child.ref}}" class="form-control" name="location2" value="{{device_prop child.ref 'location2'}}">
							<label for="device_location2_{{child.ref}}">{{location2_name}}</label>
							<button type="button" onclick="$('#device2_ref').val('{{child.ref}}');" data-toggle="modal" data-target="#location2modal" class="btn btn-default">Select {{location2_name}}</button>
						</div>
					</div>                                        
					{{else}}
					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form col-md input-group">
							<input type="text" id="device_location2_{{child.ref}}" class="form-control" name="location2" value="{{device_prop child.ref 'location2'}}">
							<label for="device_location2_{{child.ref}}">{{location2_name}}</label>
							<button type="button" onclick="$('#device2_ref').val('{{child.ref}}');" data-toggle="modal" data-target="#location2modal" class="btn btn-default">Select {{location2_name}}</button>
						</div>
					</div>
					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form col-md input-group">
							<input type="text" id="device_location_{{child.ref}}" class="form-control" name="location" value="{{device_prop child.ref 'location'}}">
							<label for="device_location_{{child.ref}}">{{location_name}}</label>
							<button type="button" onclick="$('#device_ref').val('{{child.ref}}');" data-toggle="modal" data-target="#locationmodal" class="btn btn-default">Select {{location_name}}</button>
						</div>
					</div>
					{{end}}

					<div class="row mt-1 mb-1 no-gutters">
						<div class="md-form input-group col-md align-items-center">
							<div id="category_chips">
							{{~cats=categories child.ref~}}
							{{~for cat in cats~}}                                
								{{~for c in get_categories_details~}}
									{{~if c.key==cat~}}
										<div class="chip" childref="{{child.ref}}" guid="{{c.value.guid}}">{{c.key}}<i class="close fas fa-times"></i></div>
									{{~end~}}                                    
								{{~end~}}
							{{~end~}}                            
							</div>
							<button onclick="$('#childref').val('{{child.ref}}');" type="button" data-toggle="modal" data-target="#categoriesmodaladd" class="btn btn-default">Add Category</button>
						</div>
					</div>

					<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
						<div class="col">
							<div class="row mt-1 mb-1 no-gutters">
							<b>General</b>
							</div>

							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_islight_{{child.ref}}' name='dvmisc_8192' {{device_misc child.ref 8192}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_islight_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_islight_{{child.ref}}'>Is Light</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_hide_mobile_{{child.ref}}' name='dvmisc_2097152' {{device_misc child.ref 2097152}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_hide_mobile_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_hide_mobile_{{child.ref}}'>Hide from Mobile Views</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_hide_all_views_{{child.ref}}' name='dvmisc_32' {{device_misc child.ref 32}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_hide_all_views_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_hide_all_views_{{child.ref}}'>Hide From All Views</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_no_log_{{child.ref}}' name='dvmisc_8' {{device_misc child.ref 8}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_no_log_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_no_log_{{child.ref}}'>Do Not Log</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_powerfail_enabled_{{child.ref}}' name='dvmisc_128' {{device_misc child.ref 128}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_powerfail_enabled_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_powerfail_enabled_{{child.ref}}'>Include Power Fail Recovery</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_update_time_change_only_{{child.ref}}' name='dvmisc_4096' {{device_misc child.ref 4096}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_update_time_change_only_{{child.ref}}'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_update_time_change_only_{{child.ref}}'>Last Change Time Updates on Status Change Only</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input' id='chk_popup_control' name='dvmisc_1048576' {{device_misc child.ref 1048576}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_popup_control'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_popup_control'>Use Pop-Up Dialog for Controls</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class="md-form col-md input-group">
									<input type="text" class="form-control" id="device_type_string" name="device_type_string" value="{{device_prop child.ref 'Device_Type_String'}}">
									<label for="device_type_string">Device Type String</label>
								</div>
							</div>
							{{linked_device=(device_prop child.ref 'LinkedDevice')}}						
							<div class="row mt-1 mb-1 no-gutters">						
								<div class="col-lg-6">
									<select class="mdb-select md-form mx-2" id="select_root_Linked" name="select_linked_device" childref='{{child.ref}}'>
										{{if linked_device==0 || linked_device==""}}
										<option selected value="0">Select Device</option>													
										{{end}}
										{{if linked_device > 0}}
											<option value="-1">Remove Link</option>
										{{end}}
										{{~for dev in (root_devices_by_location)~}}
											{{~selected=''~}}
											{{~if dev.ref==linked_device~}}
												{{~selected='selected'~}}									
											{{~end~}}
											{{~disabled=""~}}
											{{~if !dev.has_controls~}}
												{{~disabled="disabled"~}}	
											{{~end~}}
											{{~if dev.ref != child.ref~}}
												{{~if location1_display_first~}}
													<option {{selected}} {{disabled}} value="{{dev.ref}}">> {{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
												{{~else~}}
													<option {{selected}} {{disabled}} value="{{dev.ref}}">> {{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
												{{~end~}}
											{{~end~}}
											{{~if (array.size dev.features) > 0~}}
												{{~for cdev in dev.features~}}
													{{~if cdev.ref==child.ref~}}
													<!--do not add us-->
													{{~else~}}
														{{~selected=''~}}
														{{~if cdev.ref==linked_device~}}
															{{~selected='selected'~}}									
														{{~end~}}																																		
														{{~if location1_display_first~}}
															<option {{selected}} value="{{cdev.ref}}">{{cdev.location}}-{{cdev.location2}}-{{dev.name}}-{{cdev.name}}</option>
														{{~else~}}
															<option {{selected}} value="{{cdev.ref}}">-{{cdev.location2}}-{{cdev.location}}-{{dev.name}}-{{cdev.name}}</option>
														{{~end~}}
													{{~end~}}
												{{~end~}}
											{{~end~}}            
										{{~end~}}
									</select>
									<label class="mdb-main-label">Linked Device</label>
								</div>
							</div>	
						</div>
					</div>

					<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
						<div class="col">
							<div class="row mt-1 mb-1 no-gutters">
							<b>Cloud/Voice Settings</b>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class="md-form col-md input-group">
									<input type="text" class="form-control" id="voice_command" name="voice_command" value="{{device_prop child.ref 'VoiceCommand'}}">
									<label for="voice_command">Voice Command</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input onclick="if(this.checked) {$('#chk_voice_enabled').prop('checked',true);}" type='checkbox' class='form-check-input' id='chk_alexa_enabled' name='dvmisc_8388608' {{device_misc child.ref 8388608}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_alexa_enabled'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_alexa_enabled'>Amazon Alexa Discovery</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input onclick="if(this.checked) {$('#chk_voice_enabled').prop('checked',true);}" type='checkbox' class='form-check-input' id='chk_google_enabled' name='dvmisc_4194304' {{device_misc child.ref 4194304}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_google_enabled'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_google_enabled'>Google Home Discovery</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input onclick="if(!this.checked) {$('#chk_voice_confirm').prop('checked',false);}" type='checkbox' class='form-check-input' id='chk_voice_enabled' name='dvmisc_512' {{device_misc child.ref 512}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_voice_enabled'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_voice_enabled'>Local Voice Control</label>
								</div>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input onclick="if(this.checked) {$('#chk_voice_enabled').prop('checked',true);}" type='checkbox' class='form-check-input' id='chk_voice_confirm' name='dvmisc_1024' {{device_misc child.ref 1024}}> <label class='form-check-label hs-toggle-checkbox-label' for='chk_voice_confirm'></label> </span> </span>
									<label class='hs-toggle-text' for='chk_voice_confirm'>Local Voice Command Confirm</label>
								</div>
							</div>
						</div>
					</div>
					         
					{{hmode = device_history_mode child.ref}}
					<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
						<div class="col">
							<div class="row mt-1 mb-1 no-gutters">
							<b>History Settings</b>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class="col-lg-6">
									<select class="mdb-select md-form mx-2" id="history_mode_{{child.ref}}" name="history_mode" onchange="HistoryModeChanged(this,'_{{child.ref}}');">
										<option {{if hmode==0}}selected{{end}} value="0">Do Not Record</option>
										<option {{if hmode==1}}selected{{end}} value="1">Record Value</option>
										<option {{if hmode==2}}selected{{end}} value="2">Record Status String</option>
										<option {{if hmode==3}}selected{{end}} value="3">Record Value and Status String</option>
									</select>
									<label class="mdb-main-label">Record History</label>
								</div>
							</div>
							<div id="history_options_{{child.ref}}" style="{{if hmode==0}}display:none;{{end}}">
								<div class="row mt-1 mb-1 no-gutters">
									<div class="md-form col-md input-group mb-0">
										<input type="text" class="form-control" id="history_days_{{child.ref}}" name="history_days" value="{{device_history_days child.ref}}">
										<label for="history_days_{{child.ref}}">Days To Keep</label>
									</div>
								</div>
								<div class="row no-gutters">
									<small class="col-md text-muted mb-2">Blank = use the system default. 0 = keep forever.</small>
								</div>
								<div class="row mt-1 mb-1 no-gutters">
									<div class="md-form col-md input-group mb-0">
										<input type="text" class="form-control" id="history_min_interval_ms_{{child.ref}}" name="history_min_interval_ms" value="{{device_history_interval child.ref}}">
										<label for="history_min_interval_ms_{{child.ref}}">Minimum Time Between Records (ms)</label>
									</div>
								</div>
								<div class="row no-gutters">
									<small class="col-md text-muted mb-2">Blank = use the system default. 0 = record every change.</small>
								</div>
							</div>
						</div>
					</div>

					<div class="row mt-1 mb-1 no-gutters border pl-1 mr-1">
						<div class="col">
							<div class="row mt-1 mb-1 no-gutters">
							<b>User Access</b>
							</div>
							<div class="row mt-1 mb-1 no-gutters">
								<div class='hs-toggle'>
									<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input checkany' id='user_any_{{child.ref}}' name='user_Any' {{user_has_access child.ref 'any'}}>
									<label class='form-check-label hs-toggle-checkbox-label' for='user_any_{{child.ref}}'>Any</label> </span> </span>
								</div>
							</div>
							{{for u in users_list}}
								<div class="row mt-1 mb-1 no-gutters">
									<div class='hs-toggle'>
										<span class='hs-toggle-control'> <span class='form-check form-check-inline hs-toggle-checkbox'> <input type='checkbox' class='form-check-input checkitem' id='user_{{u.name}}_{{child.ref}}' name='user_{{u.name}}' {{user_has_access child.ref u.name}}>
										<label class='form-check-label hs-toggle-checkbox-label' for='user_{{u.name}}_{{child.ref}}'>{{u.name}}</label> </span> </span>
									</div>
								</div>
							{{end}}
						</div>
					</div>
					
					<div class="hs-fixed-bottom container card">
						<div class="row">
							<div class="col d-flex justify-content-start">		
								{{action='delete_child'}}
								{{if queries['fromtab']!=null}}
									{{action='delete_child&fromtab=featureslist'}}
								{{end}}
								<button type="button" class="btn btn-danger" onclick="ConfirmAction('{{action}}','The feature will be deleted.','childref','{{child.ref}}','devprop.html');">Delete</button>
							</div>
							<div class="col d-flex justify-content-end">  
								<button type="button" class="btn btn-cancel" action={{if queries['fromtab']==null}}"cancel"{{else}}"returntofeatureslist"{{end}}>Cancel</button>
								<button type="button" class="btn btn-success" action="save_device_properties" form="featuresform{{child.ref}}">Save</button>
							</div>
						</div>   
					</div>
				</form>
			</div>
		
	
{{end}}




	
	<script>
		// Hide the retention/interval boxes when nothing is being recorded.  Each feature has its
		// own form, so the controls are suffixed with the feature ref.
		function HistoryModeChanged(sel, suffix) {
			var opts = document.getElementById('history_options' + suffix);
			if (opts) { opts.style.display = (sel.value == '0') ? 'none' : ''; }
		}
		$(".featurerow").droppable({
			receive: function (event, ui) {
				//alert(this.id);
		//alert(ui.draggable[0].id);
		//debugger;
			}
		});
		{{if is_mobile_browser}}
		$( function() {
			$("#featureslist").sortable({
				handle: ".fa-grip-vertical",
				axis: "y",
				start: function (ev, ui) {
					 $("#"+ui.item[0].id).addClass("card");
				 },
				stop: function(ev,ui ) {
					var order = $("#featureslist").sortable("serialize", {key:'order'});
					AjaxPost("action=reorder_feature&ref={{refid}}&tab=feature&"+order,"devprop.html");
					}				
		     });		        
	     });
		{{else}}
		 $( function() {
			 $("#featureslist").sortable({
				 axis: "y",
				 start: function (ev, ui) {
					 $("#"+ui.item[0].id).addClass("card");
				 },
				stop: function(ev,ui ) {
					var order = $("#featureslist").sortable("serialize", { key: 'order' });
					dirty = true;
					AjaxPost("action=reorder_feature&ref={{refid}}&tab=features&"+order,"devprop.html");
					}				
		     });		        
		 });
		{{end}}
        $('#displayoptions').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var featureRef = button.data('ref');
            var featureName = button.data('feature-name');
            var displayType = button.data('display-type');
            var modal = $(this);
            modal.find('#featureref').val(featureRef);
            modal.find('#displayTypeFeatureName').text(featureName);
            if (displayType == 3) {
                $('#radio-hidden').prop('checked', true);
            } else if (displayType == 2) {
                $('#radio-important').prop('checked', true);
            } else {
                $('#radio-normal').prop('checked', true);
            }
        });
		</script>