{{#Name=Button Actions}}
{{#Description=Adds buttons with actions, displayed horizontally or vertically}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#SaveList=}}

{{includefileraw Dashboards/Cards/Custom/Common/CommonHeader.html}}

{{# 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" }}

{{sections[index]="Settings"}}
{{layout_vertical=         get_value 'save_layout_vertical' '' 'Layout Vertical' 'toggle'}}
{{max_buttons_text=        get_value 'save_max_buttons' '5' 'Max Buttons' 'text'}}
{{if max_buttons_text==''}}{{max_buttons_text='5'}}{{end}}
{{max_buttons=string.to_int max_buttons_text}}
{{padding_top=             get_value 'save_padding_top' '0' 'Top Padding' 'text'}}
{{sections[index]="Button"}}
{{button_width=            get_value 'save_button_width' '' 'Width' 'text'}}
{{button_height=           get_value 'save_button_height' '12' 'Height' 'text'}}
{{button_text_size=        get_value 'save_button_text_size' '12' 'Text Size' 'text'}}
{{text_color=			   get_value 'save_text_color' '#FFFFFF' 'Text Color' 'color'}}
{{button_bold=         	   get_value 'save_button_bold' '' 'Text Bold' 'toggle'}}
{{button_background_color= get_value 'save_background_button_color' '#329de4' 'Background Color' 'color'}}

{{button_background_image = get_saved_value 'save_button_background_image' widget_id}}

{{labels=[]}}
{{actions=[]}}
{{dashboards=[]}}
{{event_list=[]}}		{{#event ref ID}}
{{url_list=[]}}
{{newtab_list=[]}}
{{for index in 0..max_buttons}}
	{{label_temp=get_saved_value ('save_label' | string.append index) widget_id}}
	{{if label_temp==''}}{{break}}{{end}}
	{{labels[index]=label_temp}}
	{{actions[index]=get_saved_value ('save_action' | string.append index) widget_id}}
	{{dashboards[index]=get_saved_value ('save_dashboard' | string.append index) widget_id}}
	{{event_list[index]=get_saved_value ('save_event' | string.append index) widget_id}}
	{{url_list[index]=get_saved_value ('save_url' | string.append index) widget_id}}
	{{newtab_list[index]=get_saved_value ('save_newtab' | string.append index) widget_id}}
{{end}}

{{if (array.size labels)==0}}
	{{#none defined, add one}}
	{{labels[0]='Change Me'}}
	{{actions[0]="1"}}
{{end}}


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

<style>

.container{{w.id}} {
	{{if w.height > 0}}
	height: {{w.height}}px;
	{{end}}
	display: flex;
    align-items: center;
    justify-content: center;
	padding: 4px;
	padding-top: {{padding_top}}px;
    }

.btn-row{{w.id}} {
	display:flex;
	flex-direction:row;
	align-items:stretch;
	justify-content:space-evenly;      /* space-evenly = uniform outer + inner gaps */
	gap:8px;                           /* modern spacing (keeps buttons flush internally) */
	width:100%;
	flex:1 1 auto;
}
.btn-col{{w.id}} {
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	gap:8px;
	width:100%;
	height:100%;
}

.btn{{w.id}}:hover, .btn{{w.id}}:active, .btn{{w.id}}:focus {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    outline: 0;
}

.btn{{w.id}}:not([disabled]):not(.disabled):active, .btn{{w.id}}:not([disabled]):not(.disabled).active {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn{{w.id}}
    {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        padding: 0.84rem 2.14rem;
        font-size: {{button_text_size}}px;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin: 0.375rem;
        border: 0;
        cursor: pointer;
        white-space: normal;
        word-wrap: break-word;
        padding-top: .40rem;
        padding-right: .60rem;
        padding-bottom: 0.40rem;
        padding-left: .60rem;
        border-radius: 0.25rem;
        {{if button_bold=='on'}}
        font-weight: bold;
        {{end}}
        color: {{text_color}};
        {{if button_background_color != ''}}
        background-color: {{button_background_color}};
        {{end}}
        {{ if button_background_image != '' }}
        background-image: url('{{button_background_image}}');
        {{end}}
		//flex:1 1 0;
		/* Remove outer margin since gap handles spacing; keep as fallback if gap unsupported */
		margin:0;
		min-width:0; /* prevent overflow when many buttons */
    }
	/* Prevent vertical layout buttons from expanding to fill remaining height */
	{{ if layout_vertical == "on" }}
	.btn-col{{w.id}} > .btn{{w.id}} {
		flex: 0 0 auto;      /* no grow, keep intrinsic (or explicit) height */
	}
	{{ end }}
</style>

{{if button_width !='' }}
	{{include_button_size=true}}
{{else}}
	{{include_button_size=false}}
{{end}}

<div class="container{{w.id}}">
{{if layout_vertical=="on"}}
	<div class="btn-col{{w.id}}">
{{else}}
	<div class="btn-row{{w.id}}">
{{end}}
	{{for index in 0..(max_buttons-1)}}
		{{if layout_vertical=="on"}}
			<div class="row justify-content-center">
		{{end}}
		{{if actions[index]=='1'}}
			<button {{if include_button_size}}style="width:{{button_width}}px;height:{{button_height}}px;"{{end}} class="btn{{w.id}} waves-effect" {{if !dbs.edit_mode}} onclick="window.location.href='dashboard.html?dashboard={{dashboards[index]}}';"{{end}}>{{labels[index]}}</button>
		{{end}}
		{{if actions[index]=='2'}}
			<button {{if include_button_size}}style="width:{{button_width}}px;height:{{button_height}}px;"{{end}} class="btn{{w.id}} waves-effect" {{if !dbs.edit_mode}} action="run_event" ref='{{event_list[index]}}'{{end}}>{{labels[index]}}</button>
		{{end}}
		{{if actions[index]=='3'}}
			{{if newtab_list[index]=='on'}}
				<button {{if include_button_size}}style="width:{{button_width}}px;height:{{button_height}}px;"{{end}} class="btn{{w.id}} waves-effect" {{if !dbs.edit_mode}} onclick="window.open('{{url_list[index]}}','_blank');"{{end}}>{{labels[index]}}</button>
			{{else}}
				<button {{if include_button_size}}style="width:{{button_width}}px;height:{{button_height}}px;"{{end}} class="btn{{w.id}} waves-effect" {{if !dbs.edit_mode}} onclick="window.location.href='{{url_list[index]}}';"{{end}}>{{labels[index]}}</button>
			{{end}}
		{{end}}
		{{if layout_vertical=="on"}}
			</div>
		{{end}}
	{{end}}
	</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 id="dialogs{{w.id}}">
<div class="modal 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}}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>
		                    
					{{# Second tab which contains settings for this card only}}
                    <div class="tab-pane fade in show active" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     			                
			                <p>
								{{# Second tab which contains settings for this card only}}
							    {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
								{{if sections[index] != null}}
									<div style="width:100%" class="streakhs grey lighten-2">
										{{sections[index]}}
									</div> 
								{{end}} 
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md-3 justify-content-center align-content-center">
										{{titles[index]}}                         
									</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="color-square-btn" style="background-color:{{current_values[index]}};"></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 }}
								
								
								<div class="row no-gutters">
									<div class="col-md-3 justify-content-center align-content-center">
										Background Image                    
									</div>
									<div class="col-md-9 md-form input-group justify-content-center text-center"> 
										<input type="text" id="file_textbox_id{{id_unique}}" class="form-control" name="save_button_background_image" value="{{button_background_image}}">
									</div>   									                   
								</div>
								<div class="row no-gutters">
									<div class="md-form col-md justify-content-center text-center">
										<button type="button" onclick="$('#file_input_id').val('file_textbox_id{{id_unique}}');" class="btn btn-default"  data-toggle="modal" data-target="#filepicker">Select Image</button>
									</div> 
									<div class="md-form col-md justify-content-center">                                
										<button type="button" id="ImageFileUpload{{w.id}}" name="ButtonUpload" class="btn btn-default">Upload Image</button>
									</div>
								</div>
								
								<div style="width:100%" class="streakhs grey lighten-2">
									Buttons
								</div>
								{{for index in 0..max_buttons}}
								<div class="row no-gutters">
									<div class="col-md-3 justify-content-center align-content-center">
										Label
									</div>
									<div class="col-md-9 md-form input-group"> 
										<input type="text" id="label_{{index}}_{{w.id}}" class="form-control" name="save_label{{index}}" value="{{labels[index]}}">
									</div>
								</div>
								<div class="row no-gutters">
									<div class="col-md-3 justify-content-center align-content-center">
										Action
									</div>
									<div class="col-md-9 md-form-tight input-group align-content-center">
										<select class="mdb-select md-form mx-2 action_select{{w.id}}" id="action_select{{w.id}}{{index}}" name="save_action{{index}}" index="{{index}}" >	
											<option {{if actions[index]=="0"}}selected{{end}} name="save_action{{index}}" value="0"></option>
											<option {{if actions[index]=="1"}}selected{{end}} name="save_action{{index}}" value="1">Display Dashboard</option>
											<option {{if actions[index]=="2"}}selected{{end}} name="save_action{{index}}" value="2">Run Event</option>
											<option {{if actions[index]=="3"}}selected{{end}} name="save_action{{index}}" value="3">Open URL</option>
										</select>
									</div>
								</div>
								<div class="select_group" {{if actions[index]=="1"}}{{else}} style="display:none;"{{end}} id="dashboard-group{{w.id}}{{index}}">
									<div class="row no-gutters">
										<div class="col-md-3 align-content-center">
											Dashboard
										</div>										
										<div class="col-md-9 md-form-tight input-group align-content-center"> 
											{{names=dashboard_names}}								
											<select style="width:100%" class="mdb-select md-form mx-2 dashboards_select{{w.id}}" id="dashboards_select{{w.id}}{{index}}" name="save_dashboard{{index}}" index="{{index}}" >	
												<option name="save_dashboard{{index}}" value=""></option>
												{{for item in names}}
												<option {{if dashboards[index]==item}}selected{{end}} name="save_dashboard{{index}} value="{{item}}">{{item}}</option>                                         
												{{end}}									
											</select>
										</div>
									</div>
								</div>
								<div class="select_group" {{if actions[index]=="2"}}{{else}} style="display:none;"{{end}} id="event-group{{w.id}}{{index}}">
									<div class="row no-gutters">
										<div class="col-3 align-content-center">
											Event
										</div>										
										<div class="col md-form-tight input-group align-content-center"> 
											{{evs=events}}								
											<select  class="mdb-select md-form mx-2 events_select{{w.id}}" id="events_select{{w.id}}{{index}}" name="save_event{{index}}" index="{{index}}" >	
												<option name="save_event{{index}}" value=""></option>
												{{for ev in evs}}
													{{group=ev.name}}													
													{{for item in ev.events}}
													{{sel_name='[' | string.append group | string.append ']-' | string.append item.name}}
													<option {{if event_list[index]==item.ev_ref}}selected{{end}} name="save_event{{index}}" value="{{item.ev_ref}}">{{sel_name}}</option>         
													{{end}}
												{{end}}									
											</select>
										</div>
									</div>
								</div>
								<div class="select_group" {{if actions[index]=="1"}}{{else}} style="display:none;"{{end}} id="url-group{{w.id}}{{index}}">
									<div class="row no-gutters">
										<div class="col-md-3 align-content-center">
											URL
										</div>										
										<div class="col-md-9 md-form input-group"> 
											<input type="text" id="save_url{{index}}_{{w.id}}" class="form-control" name="save_url{{index}}" value="{{url_list[index]}}">
										</div>
									</div>
									<div class="row no-gutters">
										<div class="col-md-3 align-content-center">
											New Tab
										</div>
										<div class="col-md-3">
											<span class="switch">
											  <label>	
													<input type="checkbox" name="save_newtab{{index}}" {{if newtab_list[index]=="on"}}checked{{end}}>
													<span class="lever"></span>
											  </label>
											</span>						
										</div>											
									</div>
								</div>
								<hr>
							   	{{end}}
														
                            </p>
				        </div>
                    </div>			        
			   
                    {{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>
</div>


{{includefileraw Dashboards/Cards/Custom/Common/CommonScript.html}}

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

$(document).ready(function () {
	$('.action_select{{w.id}}').materialSelect({destroy: true});
	$('.dashboards_select{{w.id}}').materialSelect({destroy: true});
	$('.events_select{{w.id}}').materialSelect({destroy: true});
	
    $('.action_select{{w.id}}').materialSelect();	
	$('.dashboards_select{{w.id}}').materialSelect();	
	$('.events_select{{w.id}}').materialSelect();
	
	InitFileUploader();
});

function InitFileUploader() {
    var uploader = new qq.FileUploaderBasic({
    button: document.getElementById('ImageFileUpload{{w.id}}'),
    action:  'dashboard.html',
    label: 'Upload a File',
    multiple: false,
    acceptFiles: 'image/*',
    allowedExtensions: [],
    params: {
    id:'ImageFileUpload{{w.id}}',action:'upload_image_file_action',widget_id:'{{w.id}}'},
    debug: 'false',
    onProgress: function(id, fileName, loaded, total) {
    if(total>0) { total=total/1000000; }if(loaded>0) { loaded=loaded/1000000; }var msg;if(loaded == total) {  msg=' Complete, Please Wait...'}else {  msg=' Total: ' + Math.round(total) + ' MB Complete: ' + Math.round(loaded) + ' MB'}$('#upload_progress').html(msg);
    },
    onSubmit: function(id, fileName) {
    $('#button_upload_progress').html('Uploading file, please wait...');
    },
    onComplete: function(id, fileName, responseJSON) {
        $('#button_upload_progress').html(''); 
        target_textbox='file_textbox_id{{id_unique}}';
        $('#'+target_textbox).val('images/Dashboards/Uploaded/'+fileName);
        $('#'+target_textbox).focus();      //so the material label does not overwrite the entry
    }

    });
}

$(document).on('change','.action_select{{w.id}}', {} ,function(e){
    var selected = $(this).children("option:selected")[0];
    if(selected != null) {
		index=$(this).attr("index");
		$(".select_group").hide();
		if(selected.value=="1") {
			$("#dashboard-group{{w.id}}"+index).show();
		}
		if(selected.value=="2") {
			$("#event-group{{w.id}}"+index).show();
		}
		if(selected.value=="3") {
			$("#url-group{{w.id}}"+index).show();
		}
	}
});

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



</script>
{{end}}