{{#Name=Test Card}}
{{#Description=Displays text}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#SaveList=save_text_size,save_text_color,save_text_bold}}

{{#https://codepen.io/kaolay/pen/ozZovw}}

{{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=[]}}
{{sections=[]}}

{{# 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 w.height==0}}
	{{#first time loading, set a default height for the card}}
	{{save_widget_width_height 0 100 widget_id}}
	{{#since the widget was changed, we need to load it again}}
	{{w=widget_by_id widget_id}}
{{end}}

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

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

<style>

.container{{w.id}} {
	height: {{w.height}}px;
	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>


  
  <style>
  
.container {
  padding-top: 40px;
  display: inline-block;
}
.block {
  margin: 25px 25px 0 0;
  background: #3D3D4A;
  border-radius: 5px;
  float: left;
  width: 300px;
  overflow: hidden;
}


.center span {
  color: #7a7a7a;
  display: block;
  font-size: 36px;
  font-weight: 800;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

.clip {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}

.item {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1.5rem;
}

#section1 {
  transform: rotate(0deg);
}

#section1 .item {
  background-color: #E64C65;
  transform: rotate(180deg);
}

#section2 {
  transform: rotate(180deg);
}

#section2 .item {
  background-color: #41A8AB;
  transform: rotate(180deg);
}

/*  slider */
.range-slider {
  display: inline-block;
  width: 40px;
  position: relative;
  //text-align: center;
  height: 300px;

}


.range-slider__thumb {
  position: absolute;
  left: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #e6323e;
  color: #fff;
  font-size: 60%;
  border-radius: 50%;
  pointer-events: none;
}
.range-slider__bar {
  left: 16px;
  bottom: -200px;
  position: absolute;
  pointer-events: none;
  width: 8px;
  border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
  color: transparent;
  height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}

span.thumb.active {
	display:none;
}
span.value {
	display:none;
}
    
  </style>

<div class="container">
  
  <div class="range-slider">
    <input type="range" orient="vertical" min="0" max="100" />
    <div class="range-slider__bar"></div>
    <div class="range-slider__thumb"></div>
  </div>
</div>




  

  <script>
    

function updateSlider(element) {
  if (element) {
    var parent = element.parentElement;
    var thumb = parent.querySelector('.range-slider__thumb'),
        bar = parent.querySelector('.range-slider__bar'),
        pct = element.value * ((parent.clientHeight - thumb.clientHeight) / parent.clientHeight);
    thumb.style.bottom = pct + '%';
    bar.style.height = 'calc(' + pct + '% + ' + thumb.clientHeight / 2 + 'px)';
    //thumb.textContent = element.value + '%';
  }
  
}
(function initAndSetupTheSliders() {
    [].forEach.call(document.getElementsByClassName("container"), function(el) {
      var inputs = [].slice.call(el.querySelectorAll('.range-slider input'));
      inputs.forEach(function (input) {
          input.setAttribute('value', '50');
          updateSlider(input);
          input.addEventListener('input', function (element) {
              updateSlider(input);
          });
          input.addEventListener('change', function (element) {
              updateSlider(input);
          });
		  input.addEventListener('mouseup', function (element) {
              console.log(input.value);
			  //AjaxPost("action=control_device_by_value&ref="+' '+"&value={{control2_value}}","dashboard.html");
          });
      });
    });
}());
  </script>






			

{{#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>
		                    
                    <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>
				               {{# 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 }}		
														
                            </p>
				        </div>
                    </div>			        
			   
                    {{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>
</div>




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

// dialogs need to be added to the body of the page, so we move them there
var $dialogs = $('#' + "dialogs{{w.id}}");
$('body').append($dialogs);

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

var refreshID{{id_unique}};

if (refreshID{{id_unique}}) {
  clearInterval(refreshID{{id_unique}});
}

//refreshID{{id_unique}} = setInterval(updateCard{{id_unique}}, 30000);

function updateCard{{id_unique}}() {
const now = new Date();
const timeString = now.toLocaleTimeString();
	AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}","dashboard.html");
}



</script>
{{end}}