{{#Name=Display Text}}
{{#Description=Displays text}}
{{#Version=1.0}}
{{#Author=HomeSeer}}

{{dbs=dashboards_ref}}

{{widget_id=queries['widget_id']}}
{{if widget_id==null}}
	{{widget_id=var1}}
{{end}}

{{w=widget_by_id widget_id}}

{{id_unique=string.replace w.id '-' ''}}

{{# check if this is the first time this card has been run. If not items have been saved, its the first time }}
{{if (array.size (get_saved_values w.id))==0
	first_run=true
else
	first_run=false
end}}


{{# To simplify custom controls, the settings dialog that holds settings is auto generated }}
{{# To have your persistent settings saved and restored automatically, add them below in the section that calls "get_value" }}

{{# storage arrays for saved value, save name, dialog label, control type }}
{{# value: The value that is saved for a particular item, such as a display label, color, font size, etc. }}
{{# save name: The name used to save the persistent value. All saved names must start with "save_" }}
{{# dialog label: The dialog for saving values is auto generated so this is the label that is displayed for the item such as "Color"}}
{{# control_type: The type of control used to configure the item. Control types supported here are: }}
{{# text: a simple text box for entering text such as a label }}
{{# color: allows for entry of a specific HTML color like #000000 and also displays a button that displays a color picker }}
{{# toggle: displays a toggle switch for items that support "enabled/disabled" or On/Off }}



{{# arrays that hold settings for the autogenerated settings dialog. These are filled by calling get_value }}
{{current_values=[]}}
{{save_names=[]}}
{{titles=[]}}
{{control_types=[]}}

{{# function to get a saved value and return the value or the default value}}
{{# function parameters: $0=save name, $1=default value, $2=control name for settings dialog, $3=control type }}
{{index=0}}
{{func get_value
    v=get_saved_value $0 widget_id
	if first_run
		v=$1
	end
    current_values[index]=v
    save_names[index]=$0
    titles[index]=$2
	control_types[index]=$3
    index=index+1
    ret v
end}}

{{# If the width or height of the card needs to be changed, detect the default value of 0 here and then call back to set with the width and/or height}}
{{if w.height==0}}
	{{#first time loading, force a save of the card height}}
	<script>
		// since the size of the card has changed, we need to force a page refresh
		//$(document).ready(function () {
		//	AjaxPost("action=new_card_size&refresh=true&cardid={{w.id}}&height=50", "dashboard.html");
		//});        
	</script>
{{end}}

{{#get settings that will also be used in the autogenerate settings dialog. This fills the arrays above}}
{{display_text=get_value 'save_display_text' 'Change Me' 'Text' 'text'}}
{{text_size=get_value 'save_text_size' '16' 'Text Size' 'text'}}
{{text_color=get_value 'save_text_color' 'black' 'Text Color' 'color'}}
{{text_bold=get_value 'save_text_bold' 'on' 'Text Bold' 'toggle'}}

{{# normal display HTML is here. This is what is displayed when viewing the card in non-edit mode}}

<style>
.container{{w.id}} {
	display: flex;
    color: {{text_color}};
	font-size: {{text_size}}px;
    align-items: center;
    justify-content: center;
	padding: 4px;
	{{if text_bold=='on'}}
	font-weight: bold;
	{{end}}
    }


</style>


<div class="row no-gutters">
	<div class="col-12 container{{w.id}}">
	{{display_text}}
	</div>				
</div>

			

{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}
{{# card settings dialog, the second tab autogenerates settings based on values added to the settings arrays. Custom settings HTML can be added}}

{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}

{{# w=widget class, dashboard=dashboard name, d=device}}
<div class="modal fade pg-show-modal" id="edit_custom_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}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
                      Format</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
                      Display</a>
                  </li>
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade in show active" 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" 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>
				               {{# Second tab which contains settings for this card only}}
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md-3 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="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
                                    <div class="md-form input-group col-md justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="btn btn-default">Color</button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
									<div class="col-md-9 justify-content-center align-content-center">
										{{titles[index]}}                    
									</div>
									<div class="col-md-3">
										<span class="switch">
										  <label>	
												<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
												<span class="lever"></span>
										  </label>
										</span>						
									</div>	
									{{else if control_types[index] == 'text'}}
                                    <div class="col-md-3 justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md-9 md-form input-group justify-content-center text-center"> 
                                        <input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
                                    </div>
                                    {{end}}                                   					
                                </div>
                                {{index=index+1}}
                                {{end}}
								{{# Starting here, add custom settings HTML for this card }}		
														
                            </p>
				        </div>
                    </div>
			        
			   
                    <div class="modal-footer"> 
			            <button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
			            <button type="submit" class="btn btn-success" data-dismiss="modal" action="save_custom_card_edits" wid="{{w.id}}">Save</button>                	                             
                    </div>
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>





<script>
// script for edit mode, settings dialog


</script>
{{else}}
<script>
//script for non edit mode



</script>
{{end}}