{{# w=widget class, dashboard=dashboard name, d=device}}
<div class="modal fade pg-show-modal" id="edit_camera_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_camera_card_widget_id_{{w.id}}" name="edit_camera_card_widget_id_{{w.id}}" value="{{w.id}}">
			                <p>                                
                                <div style="width:100%" class="streakhs grey lighten-2">
                                    Camera
                                </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="camera_select{{w.id}}" name="camera_add" action="card_camera_select_camera" widget_id="{{w.id}}" searchable="Search for a camera here...">
                                            {{cams=camera_list}}
                                            <option value="">Select Camera</option>
                                            {{ for cam in cams }}  	
                                                {{selected=''}}
                                                {{if cam.mac==w.camera_id}}{{selected='selected'}}{{end}}
                                                <option {{selected}} value="{{cam.mac}}">{{cam.name}}</option>
                                            {{end}}
                                        </select>
                                    </div>  
                                </div>
                                <div style="width:100%" class="streakhs grey lighten-2">
                                    Dispalay
                                </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-md justify-content-center align-content-center">
                                        Name Size                     
                                    </div>
                                    <div class="md-form input-group col-md justify-content-center text-center"> 
                                        <input type="text" id="name_size_{{w.id}}" class="form-control" name="name_size" value="{{w.name_size}}">
                                    </div>
                                    <div class="md-form input-group col-md justify-content-center text-center"> 
                                    </div>                             
                                </div> 
                               <div class="row no-gutters">
                                    <div class="col-md justify-content-center align-content-center">
										    Name Color                        
								    </div>
								    <div class="md-form input-group col-md justify-content-center text-center"> 
									    <input type="text" id="name_color_{{w.id}}" class="form-control" name="name_color" value="{{w.name_color}}">
								    </div>
                                    <div class="md-form input-group col-md-2 justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#name_color-{{w.id}}','{{w.name_color}}','#name_color_{{w.id}}');" type="button" id="name_color-{{w.id}}" class="color-square-btn" style="background-color:{{w.name_color}};"></button>
                                    </div>		                
                                </div>                
                            </p>
				        </div>
                    </div>
                    {{save_action='save_camera_card_edits'}}
                    {{includefileraw includes/dashboard_dialogs_internal_footer.html}}	
                </div>	             
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>
<script>

$('#camera_select{{w.id}}').materialSelect();

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

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

</script>