{% extends 'base.html' %}
{% block title %}Settings{% endblock %}
{% block custom_scripts %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
        /* Some basic CSS styles for the template */
        p {
                margin: 0px;
        }
        h1 {
            color: #333;
        }
        .journal-entry {
            background-color: #cde8cd;
            margin-bottom: 5px;
            transition: background-color 0.5s ease-in-out;
        }
        .journal-entry.fadeout {
            background-color: transparent;
            transition: background-color 5s ease-in-out;
        }
	.disableddiv {
    	    pointer-events: none;
    	    opacity: 0.4;
	}
    </style>
				    <script>
			    function antionoff_select() {
				    var ischecked=$("#antionoff")[0].checked;
				    switch (ischecked) {
					    case true:
						    $("#antionoffsettings").removeClass("disableddiv");
						    break;
					    default:
						    $("#antionoffsettings").addClass("disableddiv");
						break;
				    }
			    }
			    function hcurve_change(){
					var actualhcurve=$("#heatingcurve option:selected").val();
								console.log(actualhcurve);
					switch(actualhcurve) {
						case "auto":
                                                        $("#divhcmanual").addClass("disableddiv");
                                                        $("#divslope").removeClass("disableddiv");
                                                        $("#divpshift").removeClass("disableddiv");
                                                        $("#divhcamp").removeClass("disableddiv");
							break;
						case "static":
                                                        $("#divhcmanual").addClass("disableddiv");
                                                        $("#divslope").removeClass("disableddiv");
                                                        $("#divpshift").addClass("disableddiv");
                                                        $("#divhcamp").addClass("disableddiv");
							break;
						case "manual":
                                                        $("#divhcmanual").removeClass("disableddiv");
                                                        $("#divslope").addClass("disableddiv");
                                                        $("#divpshift").addClass("disableddiv");
                                                        $("#divhcamp").addClass("disableddiv");
							break;
						case "directly":
                                                        $("#divhcmanual").addClass("disableddiv");
                                                        $("#divslope").addClass("disableddiv");
                                                        $("#divpshift").addClass("disableddiv");
                                                        $("#divhcamp").addClass("disableddiv");
							break;
						default:
                                                        $("#divhcmanual").removeClass("disableddiv");
                                                        $("#divslope").removeClass("disableddiv");
                                                        $("#divpshift").removeClass("disableddiv");
                                                        $("#divhcamp").removeClass("disableddiv");


					}
			    }
			    function city_select() {
				const latlon=$("#citysearch").val().split(';')
				console.log(latlon)
				$("#latitude").val(latlon[0])
                                $("#longitude").val(latlon[1])

							}
			    function city_search() {
				var name = $("#citysearch").val()
				var curloc = navigator.languages[1];
				console.log(name)
				$.get('https://geocoding-api.open-meteo.com/v1/search?name='+name+'&count=10&language='+curloc+'&format=json', function(data) {
				console.log(data.results)
				                                        $('#foundcity').empty();
				for (let i in data.results) {
					$('#foundcity').append("<option value='"+data.results[i].latitude+";"+data.results[i].longitude+"'>"+data.results[i].name+", "+data.results[i].country+"");
  					console.log(data.results[i].name);
					console.log(data.results[i].country);
				}
                                //        if ( data.output == 'active' ) {
                                //$('#startlogbutton').text("Stop logging")
                                //$('#startlogbutton').attr("onclick", "start_log('stop')")
                                //                } else {
                                //$('#startlogbutton').text("Start logging")
                                //$('#startlogbutton').attr("onclick", "start_log('restart')")                                        }
							   
                                                       })
							}
			    function manual_hcurve(){
				$('#hcman').val($('#hcmn20').val() + ',' + $('#hcmn15').val() + ',' + $('#hcmn10').val() + ',' + $('#hcmn8').val() + ',' + $('#hcmn6').val() + ',' + $('#hcmn4').val() + ',' + $('#hcmn2').val() + ',' + $('#hcm0').val() + ',' + $('#hcmp2').val() + ',' + $('#hcmp4').val() + ',' + $('#hcmp6').val() + ',' + $('#hcmp8').val() + ',' + $('#hcmp10').val() + ',' + $('#hcmp15').val())
							}
			    function download_log(){
				const blob= new Blob([$('#journal')[0].innerText],{type: 'text/plain'});
				const fileUrl = URL.createObjectURL(blob);
				const link = document.createElement('a');
				link.download = 'journal.txt';
				link.href=fileUrl;
				link.click();
				}
			   function start_log(action) {
				$.post('/logdaemon', {action: action}, function(data) {
					if ( data.output == 'active' ) {
				$('#startlogbutton').text("Stop logging")
				$('#startlogbutton').attr("onclick", "start_log('stop')")
						} else {
				$('#startlogbutton').text("Start logging")
				$('#startlogbutton').attr("onclick", "start_log('restart')")					    }
						       })
						       }
		    </script>
				    <script>
//			form.addEventListener('submit', () => {
//    			if(document.getElementById("use_mqtt").checked) {
//        			document.getElementById('use_mqtt_hidden').disabled = true;
//			    }
//			})
		    </script>
{% endblock %}
{% block page_body %}
<div class="modal fade" id="unsavedChangesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Niezapisane zmiany</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Masz niezapisane zmiany. Czy na pewno chcesz opuścić stronę?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zostań</button>
                <button type="button" class="btn btn-outline-danger" id="leavePageBtn">Opuść stronę</button>
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-12 col-lg-10 col-xl-8 mx-auto">
	    <h2 class="h3 mb-4 page-title" data-i18n="settings">Settings</h2>
        <div class="my-10">
            <!-- Tabs navs -->
            <ul class="nav nav-underline" id="settings" role="tablist">
                <li class="nav-item" role="presentation">
			<a class="nav-link active" id="settings-general" data-bs-toggle="tab" data-bs-target="#settings-general-tab" role="tab" aria-controls="settings-general-tab" aria-selected="true" href="#settings-general-tab" data-i18n="set.general">General</a>
                </li>
                <li class="nav-item" role="presentation">
			<a class="nav-link" id="settings-hcurve" data-bs-toggle="tab" data-bs-target="#settings-hcurve-tab" role="tab" aria-controls="settings-hcurve-tab" aria-selected="true" href="#hcurve-general-tab" data-i18n="set.coolheat">Heating/Cooling</a>
                </li>
                <li class="nav-item" role="presentation">
			<a class="nav-link" id="settings-ha" data-bs-toggle="tab" data-bs-target="#settings-ha-tab" role="tab" aria-controls="settings-ha-tab" aria-selected="false" href="#settings-ha-tab" data-i18n="set.homeassistant">Home Assistant</a>
                </li>
                <li class="nav-item" role="presentation">
			<a class="nav-link" id="settings-mqtt" data-bs-toggle="tab" data-bs-target="#settings-mqtt-tab" role="tab" aria-controls="settings-mqtt-tab" aria-selected="false" href="#settings-mqtt-tab" data-i18n="set.mqtt">MQTT</a>
                </li>
		<li class="nav-item" role="presentation">
                        <a class="nav-link" id="settings-hpiapp" data-bs-toggle="tab" data-bs-target="#settings-hpiapp-tab" role="tab" aria-controls="settings-hpiapp-tab" aria-selected="false" href="#settings-hpiapp-tab" data-i18n="set.hpiapp">Aplikacja HPi</a>
                </li>
                <li class="nav-item" role="presentation">
			<a class="nav-link" id="settings-system" data-bs-toggle="tab" data-bs-target="#settings-system-tab" role="tab" aria-controls="settings-system-tab" aria-selected="false" href="#settings-system-tab" data-i18n="set.system">System</a>
                </li>

            </ul>
            <!-- Tabs navs -->

            <!-- Tabs content -->
            <div class="tab-content" id="ex1-content">
                <div class="tab-pane fade show active" id="settings-general-tab" role="tabpanel" aria-labelledby="settings-general-tab">
                    <div class="list-group mb-5 shadow">
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <form method="POST">
					    <strong class="mb-0" data-i18n="set.intempsensor">Czujnik temperatury wewnętrznej</strong>
					    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.intempsensortooltip" data-bs-title="Wybierz jakiego czujnika temperatury używasz ? (<i>'HA'</i> - dla encji z Home Assistant, <i>'Wbudowany'</i> - fizycznie podłączony sensor DHT22"></i>

</div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <select class="form-select" aria-label="insidetemp" name="SETTINGS$insidetemp" value="">
					    <option data-i18n="ha" value="ha">HA</option>
					    <option data-i18n="builtin" value="builtin">Builtin</option>
                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.outtempsensor">Czujnik temperatury zewnętrznej</strong>
				                                                <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.outtempsensortooltip" data-bs-title="What temperature sensor you using (ha - for home assistant entity, builtin - for physically connect DS18b20 sensor, Tao - for built-in pump ambient sensor, Open Meteo - for online weather service ( you need to provide the coordinates of your town )"></i>

                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <select id="outsidetemp" class="form-select" aria-label="outsidetemp" name="SETTINGS$outsidetemp" value="">
					    <option data-i18n="ha" value="ha">HA</option>
					<option data-i18n="builtin" value="builtin">Builtin</option>
                                            <option data-i18n="tao" value="tao">Tao</option>
                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.huminsensor">huminsensor</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.humintooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <select class="form-select" aria-label="humidity" name="SETTINGS$humidity" value="">
					    <option data-i18n="ha" value="ha">HA</option>
					    <option data-i18n="builtin" value="builtin">Builtin</option>
                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item {% if presetautochange == "manual"%}
			    				disableddiv
							{% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.aooddelta">{{ _('Anty ON-OFF "<i>Delta</i>"') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.aoodtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
					<input type="hidden" id="antionoff_hidden" value="" name="SETTINGS$antionoff">
                                    	<input type="checkbox" class="form-check-input" id="antionoff" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value; antionoff_select()" aria-describedby="antionoff">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
						
                    </div>
                    <div id="antionoffsettings" class="list-group-item {% if antionoff != "1" %}
                                                        disableddiv
                                                      {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.aoodt">{{ _('Czas przeliczania <i>Delty</i>') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.aoodttooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="number" class="form-control" id="antionoffdeltatime" name="SETTINGS$antionoffdeltatime" aria-describedby="antionoffdeltatime" step="0.5" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
						<div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.aoodtdv">{{ _('Wartość <i>Delty</i> dla trybu Turbo') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.aoodtdvtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="number" class="form-control" id="deltatempturbo" name="SETTINGS$deltatempturbo" aria-describedby="deltatempturbo" step="0.1" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
						<div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.aoodqdv">{{ _('Wartość <i>Delty</i> dla trybu Quiet') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.aoodqdvtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="number" class="form-control" id="deltatempquiet" name="SETTINGS$deltatempquiet" aria-describedby="deltatempquiet" step="0.1" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
						<div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.aoodflv">{{ _('Wartość <i>Delty</i> dla Ograniczenia mocy') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.aoodflvtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="number" class="form-control" id="deltatempflimit" name="SETTINGS$deltatempflimit" aria-describedby="deltatempflimit" step="0.1" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.dhwnolimit"></strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.dhwnolimittooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="hidden" id="dhwwl_hidden" value="" name="SETTINGS$dhwwl">
                                          <input type="checkbox" class="form-check-input" id="dhwwl" value="1" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="dhwwl">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.chscheduler">{{ _('Używaj harmonogramu dla C.O') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.chschedulertooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
					<input type="hidden" id="chscheduler_hidden" value="" name="SETTINGS$chscheduler">
                                          <input type="checkbox" class="form-check-input" id="chscheduler" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="chscheduler">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.dhwscheduler">{{ _('Używaj harmonogramu dla C.W.U') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.dhwschedulertooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="hidden" id="dhwscheduler_hidden" value="" name="SETTINGS$dhwscheduler">
                                          <input type="checkbox" class="form-check-input" id="dhwscheduler" value="1" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="dhwscheduler" >
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <!--<button type="submit" class="btn btn-primary" data-i18n="set.btn.save">{{ _('Zapisz ustawienia') }}</button>--></form>
                    </div>
                </div>
                <div class="tab-pane fade" id="settings-hcurve-tab" role="tabpanel" aria-labelledby="settings-hcurve-tab">
                    <div class="list-group mb-5 shadow">
		    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.freqlimit">{{ _('Ograniczenie mocy') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.freqlimittooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
				    <div class="custom-control custom-switch"><form method="POST">
						    <select class="form-select" aria-label="flimit" name="SETTINGS$flimit" value="">
							    <option value="auto" data-i18n="auto" >{{ _('Automatyczne') }}</option>
							    <option value="manual" data-i18n="manual" >{{ _('Ręczne') }}</option>

                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0">{{ _('Temperatura ograniczenia mocy') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.freqlimittooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
					<input type="number" class="form-control" id="flimittemp" name="SETTINGS$flimittemp" aria-describedby="flimittemp" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item {% if antionoff == "1" %}
			    disableddiv
			    {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.presetchange">{{ _('Zmiana trybu') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.presetchangetooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
				    <div class="custom-control custom-switch">
						    <select class="form-select" aria-label="presetautochange" name="SETTINGS$presetautochange" value="">
							    <option value="auto" data-i18n="auto" >{{ _('Automatyczna') }}</option>
							    <option value="manual" data-i18n="manual" >{{ _('Ręczna') }}</option>

                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item">
                         <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.quiettemp">{{ _('Temperatura trybu Quiet') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.quiettemptooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="number" class="form-control" id="presetquiet" name="SETTINGS$presetquiet" aria-describedby="presetquiet" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.turbotemp">{{ _('Temperatura trybu Turbo') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.turbotemptooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="number" class="form-control" id="presetturbo" name="SETTINGS$presetturbo" aria-describedby="presetturbo" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hctype">{{ _('Typ krzywej grzewczej') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hctypetooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
				    <div class="custom-control custom-switch">
                                    <select class="form-select" aria-label="heatingcurve" name="SETTINGS$heatingcurve" id="heatingcurve" onchange="hcurve_change()" value="">
					    <option value="auto" data-i18n="auto" >{{ _('Automatyczna') }}</option>
					    <option value="static" data-i18n="static" >{{ _('Statyczna') }}</option>
					    <option value="manual" data-i18n="manual" >{{ _('Ręczna') }}</option>
					    <option value="directly" data-i18n="direct" >{{ _('Bezpośrednio') }}</option>
                                    </select>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hctime">{{ _('Częstotliwość obliczania krzywej grzewczej w minutach') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hctimetooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="number" class="form-control" id="timeout" name="MAIN$heizfreq" aria-describedby="timeout" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="divslope" class="list-group-item {% if heatingcurve == "auto" or
			    			      heatingcurve == "static" %}
							NONE
						      {% else %}
						      disableddiv
						      {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hcslope">{{ _('Nachylenie krzywej grzeczej') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hcslopetooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="number" class="form-control" id="slope" name="SETTINGS$hcslope" aria-describedby="slope" step="0.01" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		    <div id="divpshift" class="list-group-item {% if heatingcurve != 'auto' %} disableddiv {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hcpshift">{{ _('Przesunięcie równoległe krzywej grzewczej') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hcpshifttooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="number" class="form-control" id="pshift" name="SETTINGS$hcpshift" aria-describedby="pshift" step="0.1" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="divhcamp" class="list-group-item {% if heatingcurve != 'auto' %} disableddiv {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hcamp">{{ _('Wzmocnienie krzywej grzewczej') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hcamptooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="number" class="form-control" id="hcamp" name="SETTINGS$hcamp" aria-describedby="hcamp" step="0.1" onchange="recalc()" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="divhcmanual" class="list-group-item {% if heatingcurve != 'manual' %} disableddiv {% endif %}">
                        <div class="row align-items-center">
                            <div class="col">
                                    <strong class="mb-0" data-i18n="set.hcman">{{ _('Zadana temperatura C.O dla ręcznej krzywej:') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hcmantooltip" data-bs-title="."></i>
				    <p class="mb-0"><table class="table" id="hcmantable">
  <thead>
    <tr>
      <th scope="col">-20</th>
      <th scope="col">-15</th>
      <th scope="col">-10</th>
      <th scope="col">-8</th>
      <th scope="col">-6</th>
      <th scope="col">-4</th>
      <th scope="col">-2</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn20" aria-describedby="hcmn20" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn15" aria-describedby="hcmn15" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn10" aria-describedby="hcmn10" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn8" aria-describedby="hcmn8" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn6"  aria-describedby="hcmn6" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn4" aria-describedby="hcmn4" step="0.5" onchange="manual_hcurve()" value=""></td>
      <td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmn2" aria-describedby="hcmn2" step="0.5" onchange="manual_hcurve()" value=""></td>
    </tr>
<thead>
	<tr>
		<th scope="col">0</th>
		<th scope="col">2</th>
		<th scope="col">4</th>
		<th scope="col">6</th>
		<th scope="col">8</th>
		<th scope="col">10</th>
		<th scope="col">15</th>
	</tr>
</thead>
<tbody class="table-group-divider">
    <tr>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcm0" aria-describedby="hcm0" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp2" aria-describedby="hcmp2" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp4" aria-describedby="hcmp4" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp6" aria-describedby="hcmp6" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp8"  aria-describedby="hcmp8" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp10" aria-describedby="hcmp10" step="0.5" onchange="manual_hcurve()" value=""></td>
		<td class="p-0 p-md-2"><input type="number" class="form-control" id="hcmp15" aria-describedby="hcmp15" step="0.5" onchange="manual_hcurve()" value=""></td>
    </tr>
    <input type="hidden" class="form-control" value="" id="hcman" name="SETTINGS$hcman" aria-describedby="hcman">
  </tbody>
</table></p>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hcchart">{{ _('Wykres krzywej grzewczej') }}</strong>
                                </div>
                            <div class="col-md-2">
				    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#chartdiv" data-i18n="show" aria-expanded="false" aria-controls="chartdiv">{{ _('Show') }}</button>
                                 </div>
                        <div id="chartdiv" class="collapse">
				<p><label for="tempRange" id="customtemp" data-i18n="set.intemp" class="form-label">{{ _('Temperatura wewnątrz: 21') }}</label></p>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.intemptooltip" data-bs-title="."></i>
				
				<input type="range" class="form-range" min="12" max="30" id="tempRange" onchange="recalc();">
                                <canvas id="hcurvechart"></canvas>

                            </div>
                        </div>
                    </div>
		    <!--<button type="submit" class="btn btn-primary" data-i18n="set.btn.save">{{ _('Zapisz ustawienia') }}</button>--></form>
                    </div>
                </div>
                <div class="tab-pane fade" id="settings-ha-tab" role="tabpanel" aria-labelledby="settings-ha-tab">
                  <div class="list-group mb-5 shadow">
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.haaddr">{{ _('Adres Home Assistant') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.haaddrtooltip" data-bs-title="."></i>
                            </div>
			    <div class="col-md-2"><form method="POST">
                                <div class="custom-control custom-switch">
		    <input type="text" class="form-control" id="haaddr" name="HOMEASSISTANT$HAADDR" aria-describedby="haaddr" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
				<strong class="mb-0" data-i18n="set.haport">{{ _('Port Home Assistant') }}</strong>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.haporttooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                    <input type="text" class="form-control" id="haport" name="HOMEASSISTANT$HAPORT" aria-describedby="haport" value="">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
				<strong class="mb-0" data-i18n="set.haapikey">{{ _('Klucz API Home Assistant') }}</strong>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.haapikeytooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                    <input type="password" class="form-control" id="hakey" name="HOMEASSISTANT$KEY" aria-describedby="hakey" value="">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
		<div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
                            <strong class="mb-0" data-i18n="set.mqttdiscovery">{{ _('Używaj "MQTT Discovery"') }}</strong>
			    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqttdiscoverytooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                                <input type="hidden" id="ha_mqtt_discovery_hidden" value="" name="HOMEASSISTANT$ha_mqtt_discovery">
                                <input type="checkbox" class="form-check-input" id="ha_mqtt_discovery" value="1" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="ha_mqtt_discovery" {%if ha_mqtt_discovery == '1' %} checked {% endif %}>
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
				<strong class="mb-0" data-i18n="set.itentity">{{ _('Encja temperatury wewnętrznej') }}</strong>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.itentitytooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="insidesensor" name="HOMEASSISTANT$insidesensor" aria-describedby="insidesensor" value="">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
				<strong class="mb-0" data-i18n="set.otentity">{{ _('Encja temperatury zewnętrznej') }}</strong>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.otentitytooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="outsidesensor" name="HOMEASSISTANT$outsidesensor" aria-describedby="outsidesensor" value="">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
				<strong class="mb-0" data-i18n="set.ihentity">{{ _('Encja czujnika wilgotności') }}</strong>
				<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.ihentitytooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="humiditysensor" name="HOMEASSISTANT$humiditysensor" aria-describedby="humiditysensor" value="">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
		</div><!--<button type="submit" class="btn btn-primary" data-i18n="set.btn.save">{{ _('Zapisz ustawienia dla HA') }}</button>--></form>
            </div>
              </div>
                <div class="tab-pane fade" id="settings-mqtt-tab" role="tabpanel" aria-labelledby="settings-mqtt-tab">
                    <div class="list-group mb-5 shadow">
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqtt">{{ _('Protokół MQTT') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqtttooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
				    <div class="custom-control custom-switch"><form method="POST">
						    <input type="hidden" id="use_mqtt_hidden" value="" name="MQTT$mqtt">
					  <input type="checkbox" class="form-check-input" id="use_mqtt" value="1" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="use_mqtt" {%if use_mqtt == '1' %} checked {% endif %}>
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqttaddr">{{ _('Adres MQTT') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqttaddrtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="curol custom-switch">
                                    <input type="text" class="form-control" id="mqtt_broker_addr" name="MQTT$address" aria-describedby="mqtt_broker_addr" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqttport">{{ _('Port MQTT') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.datamqttporttooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="mqtt_broker_port" name="MQTT$port" aria-describedby="mqtt_broker_port" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
		 <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col">
                            <strong class="mb-0" data-i18n="set.mqtttls">{{ _('Używaj MQTT z TLS') }}</strong>
			    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqtttlstooltip" data-bs-title="."></i>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-control custom-switch">
                                <input type="hidden" id="mqtt_ssl" value="" name="MQTT$mqtt_ssl">
                                <input type="checkbox" class="form-check-input" id="mqtt_mqtt_ssl" value="1" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value" aria-describedby="mqtt_mqtt_ssl">
                                <span class="custom-control-label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqtttopic">{{ _('Główny topic MQTT') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqtttopictooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="mqtt_topic" name="MQTT$main_topic" aria-describedby="mqtt_topic" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqttuser">{{ _('Nazwa użytkownika') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqttusertooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="mqtt_username" name="MQTT$username" aria-describedby="mqtt_username" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.mqttpass">{{ _('Hasło użytkownika') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.mqttpasstooltip" data-bs-title="."></i>
                            </div>
                                <div class="col-md-2">
                                    <div class="custom-control custom-switch">
                                        <input type="password" class="form-control" id="mqtt_password" name="MQTT$password" aria-describedby="mqtt_password" value="">
                                        <span class="custom-control-label"></span>
                                    </div>
                                </div>
                            </div>
		    </div><!--<button type="submit" class="btn btn-primary" data-i18n="set.btn.save">{{ _('Zapisz ustawienia MQTT') }}</button>--></form>
                    </div>
                </div>

<div class="tab-pane fade" id="settings-hpiapp-tab" role="tabpanel" aria-labelledby="settings-hpiapp-tab">
    <div class="list-group mb-5 shadow">
        <div class="list-group-item">
            <div class="row align-items-center">
                <div class="col">
                    <strong class="mb-0" data-i18n="set.hpikey">Application Key</strong>
                    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hpikeytooltip" data-bs-title="."></i>
                </div>
                <div class="col-md-2">
                    <div class="custom-control custom-switch">
                        <input type="password" class="form-control" id="hpikey" name="HPIAPP$hpikey" aria-describedby="hpikey" value="">
                        <span class="custom-control-label"></span>
                    </div>
                </div>
            </div>
        </div>
	<div class="list-group-item">
            <div class="row align-items-center">
                <div class="col">
                        <strong class="mb-0" data-i18n="set.hpiconstart">Connect at startup</strong>
                    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hpicontroltooltip" data-bs-title="."></i>
                </div>
                <div class="col-md-2">
                    <div class="custom-control custom-switch">
                        <input type="hidden" id="hpiatstart_hidden" value="" name="HPIAPP$hpiatstart">
                        <input type="checkbox" class="form-check-input" id="hpiatstart" onclick="this.previousSibling.previousSibling.value=1-this.previousSibling.previousSibling.value; antionoff_select()" aria-describedby="hpiatstart">
                        <span class="custom-control-label"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="list-group-item">
            <div class="row align-items-center">
                <div class="col">
                    <strong class="mb-0" data-i18n="set.hpistatus">Connection status</strong>
                    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hpistatustooltip" data-bs-title="."></i>
                </div>
                <div class="col-md-2">
                    <div class="custom-control custom-switch">
			    <h3 id='hpistatus'>Connected</h3>
                        <span class="custom-control-label"></span>
                    </div>
                </div>
            </div>                 
        </div>
        <div class="list-group-item">
            <div class="row align-items-center">
                <div class="col">
                    <strong class="mb-0" data-i18n="set.hpiconnsid">Connection session ID</strong>
                    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hpiconnsidtooltip" data-bs-title="."></i>
                </div>
                <div class="col-md-2">
                    <div class="custom-control custom-switch">
                            <i id='hpisid'>xxx</i>
                        <span class="custom-control-label"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-group-item">
            <div class="row align-items-center">
                <div class="col">
			<strong class="mb-0" data-i18n="set.hpicontrol">Control</strong>
                    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hpicontroltooltip" data-bs-title="."></i>
                </div>
                <div class="col-md-2">
                    <div class="custom-control custom-switch">
			    <button class="btn w-100" id='hpicontrol'>Disconnect</button>
                        <span class="custom-control-label"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

                <div class="tab-pane fade" id="settings-system-tab" role="tabpanel" aria-labelledby="settings-system-tab">
                <div class="list-group mb-5 shadow">
                    <div class="list-group-item">
                        <div class="row align-items-center">
				<div class="col"><form method="POST">
						<strong class="mb-0" data-i18n="set.bindaddr">{{ _('Bind address') }}</strong>
						<i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.bindaddrtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="bindaddr" name="MAIN$bindaddress" aria-describedby="bindaddr" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.bindport">{{ _('Bind port') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.bindporttooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="bindport" name="MAIN$bindport" aria-describedby="bindport" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>                 </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.serial">{{ _('Serial port') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.serialtooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                    <input type="text" class="form-control" id="modbusdev" name="MAIN$modbusdev" aria-describedby="modbusdev" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.modbusgpio">{{ _('Modbus GPIO') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.modbusgpiotooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="modbuspin" name="GPIO$modbus" aria-describedby="modbuspin" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.flgpio">{{ _('Frequency limit GPIO') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.flgpiotooltip" data-bs-title="."></i>
                            </div>
                            <div class="col-md-2">
                                <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="freqlimitpin" name="GPIO$freqlimit" aria-describedby="freqlimitpin" value="">
                                    <span class="custom-control-label"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.hdgpio">{{ _('Heat demand GPIO') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.hdgpiotooltip" data-bs-title="."></i>
                            </div>
                                <div class="col-md-2">
                                    <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="heatdemandpin" name="GPIO$heatdemand" aria-describedby="heatdemandpin" value="">
                                        <span class="custom-control-label"></span>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="list-group-item">
                     <div class="row align-items-center">
                            <div class="col">
				    <strong class="mb-0" data-i18n="set.cdgpio">{{ _('Cool demand GPIO') }}</strong>
				    <i class="bi bi-info-circle ms-2 text-accent3" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-html="true" data-i18n="[data-bs-title]set.cdgpiotooltip" data-bs-title="."></i>
                            </div>
                                <div class="col-md-2">
                                    <div class="custom-control custom-switch">
                                        <input type="text" class="form-control" id="cooldemandpin" name="GPIO$cooldemand" aria-describedby="cooldemandpin" value="">
                                        <span class="custom-control-label"></span>
                                    </div>
                                </div>
                            </div>
		    </div><!--<button type="submit" class="btn btn-primary" data-i18n="set.btn.save">{{ _('Save') }}</button>--></form>
                    </div>
                </div>
<!--                <div class="tab-pane fade" id="settings-logs-tab" role="tabpanel" aria-labelledby="settings-logs-tab">
                    <div class="list-group mb-5 sha                    <div class="list-group-item">
                        <div class="row align-items-center" id="journal">

			</div>
                        <script>
        var journalDiv = document.getElementById('journal');
				var eventSource = new EventSource(window.location.origin+":5000/stream");

        eventSource.onmessage = function(event) {
            var line = document.createElement('p');
            line.className = 'journal-entry';
            line.innerHTML = event.data;
            journalDiv.appendChild(line);

            setTimeout(function() {
                line.classList.add('fadeout');
            }, 2000);
        };
    </script>

			    </div><div class="btn-group" role="group"><button id="startlogbutton" onclick="start_log('restart');" class="btn btn-outline-primary">{{ _('Start logging') }}</button><button onclick="download_log();" class="btn btn-outline-primary">{{ _('Save to file') }}</button> </div>
                    </div>
</div>

	    </div>-->
            </div>
<div class="row align-items-center"><div class="col mt-0 mb-5"><button class="btn btn-outline-secondary w-100" id="testowy" data-i18n="set.btn.save"></button></div></div>
        </div>
    </div>

</div>
<!--<script src="{{ url_for('static', filename='socket.js') }}"></script>-->

<!--       <script>
    jQuery(document).ready(function ($) {
    const hash=window.location.hash;
     const bsTab = new bootstrap.Tab(hash);
     bsTab.show();
    })
</script>-->
<script>

function removeClassesByPrefix(selector, prefix) {
    $(selector).removeClass(function(index, className) {
        return (className.match(new RegExp('\\b' + prefix + '\\S+', 'g')) || []).join(' ');
    });
}
$(document).ready(function() {

    const socket = io(); // Upewniamy się, że socket jest tworzony tylko raz

                $('#hpicontrol').click( function () {
				command=$(this).text().toLowerCase()
				socket.emit('client', {hpiapp: command})
                        });

//    socket.on("connect", () => {
//        console.log("Połączono z serwerem Socket.io");
//    });
	socket.on('settings', function(data) {
		console.log(data)
		for (let key in data) {
			console.log(`${key} -> ${data[key]}`);
			$(`[name="${key}"]`).val(data[key]);
			if ($(`[name="${key}"]`).attr('type') == 'hidden') {
				console.log(`${key} -> ${data[key]}`);
				if ($(`[name="${key}"]`).next().attr('type') == 'checkbox' ) {
				$(`[name="${key}"]`).next().prop('checked', parseInt(data[key]))
				}
			}
			if(key == 'SETTINGS$hcman') {
				 let hcman = data[key]
				console.log(hcman)

    // Pobieramy tylko inputy znajdujące się w tabeli #test
    $("#hcmantable input[type='number']").each(function(index) {
        if (index < hcman.length) {
            $(this).val(hcman[index]); // Ustawienie wartości
        }
    });
				}
	                        if(key == 'hpiconn') {
                                        switch (data[key]) {
                                                case 'N.A.':
                                                $('#hpistatus').text('Unknown');
						$('#hpistatus')[0].classList.add('text-warning')
                                                $('#hpisid').text('Unknown');
						$("#hpicontrol")[0].classList.add('btn-outline-warning')
						$("#hpicontrol")[0].classList.add('disabled')
						$("#hpicontrol").text('Unknown')
                                                break;
                                                case null:
						removeClassesByPrefix('#hpistatus', 'text-')
						removeClassesByPrefix('#hpicontrol', 'btn-outline-')
                                                $('#hpistatus').text('Disconnected');
						$('#hpistatus')[0].classList.add('text-danger')
                                                $('#hpisid').text('Unknown');
						$("#hpicontrol")[0].classList.remove('disabled')
						$("#hpicontrol")[0].classList.add('btn-outline-success')
						$("#hpicontrol").text('Connect')
						if (!$('#hpikey').val()) {
						    $("#hpicontrol")[0].classList.add('disabled')
						}
                                                break;
						case false:
                                                removeClassesByPrefix('#hpistatus', 'text-')
                                                removeClassesByPrefix('#hpicontrol', 'btn-outline-')
                                                $('#hpistatus').text('Disconnected');
                                                $('#hpistatus')[0].classList.add('text-danger')
                                                $('#hpisid').text('Unknown');
                                                $("#hpicontrol")[0].classList.remove('disabled')
                                                $("#hpicontrol")[0].classList.add('btn-outline-success')
                                                $("#hpicontrol").text('Connect')
						$("#hpicontrol")[0].classList.add('disabled')
                                                break;
                                                default:
						removeClassesByPrefix('#hpistatus', 'text-')
                                                removeClassesByPrefix('#hpicontrol', 'btn-outline-')
                                                $('#hpistatus').text('Connected');
                                                $('#hpisid').text(data[key]);
						$('#hpistatus')[0].classList.add('text-success')
                                                $("#hpicontrol")[0].classList.remove('disabled')
						$("#hpicontrol")[0].classList.add('btn-outline-danger')
						$("#hpicontrol").text('Disconnect')
                                                }
                                }

				
			}
		});
	socket.on('return', function(msg) {
                switch(Object.keys(msg)[0]) {
                        case "info":
                                appendAlert(msg.info, msg.status);
                                break;
                }
                console.log(msg)
        });

    $("#testowy").off("click").on("click", function(event) {
        event.preventDefault();

        if (socket.connected) { // Sprawdzamy, czy połączenie jest aktywne
            let formData = {};
	    formData.settings = {};

            $("select, input").each(function() {
                if (this.name) {
                    formData.settings[this.name] = $(this).val();
                }
            });
	    isFormDirty = false;
            socket.emit("client", formData);
        } else {
            console.warn("Socket nie jest połączony!");
        }
    });
});

var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* large line chart */
var chLine = document.getElementById('hcurvechart');
var settemp = 22{{ settemp }};
var insidetemp = document.getElementById("tempRange").value;
var outsidetemp =11 {{ outtemp }};

var labels = ["-20", "-19", "-18", "-17", "-16", "-15", "-14", "-13", "-12","-11","-10","-9","-8","-7","-6","-5","-4","-3","-2","-1","0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"];
var data = [];
for (const element of labels) {
	const t1=(outsidetemp/(320-(outsidetemp*4)))
        const t2=Math.pow(settemp,t1)
		const slope= 1 {{ slope }}
		const ps=1 {{ pshift }}
		const amp=1 {{ hcamp }}
        const heatcurve = Math.round((((0.55*slope*t2)*(((-element+20)*2)+settemp+ps)+((settemp-insidetemp)*amp)+ps))*2)/2
		        console.log(element);
        console.log(t1);
        console.log(t2);
        console.log(slope);
        console.log(ps);
        console.log(amp);
	console.log(heatcurve);
		data.push(heatcurve);
		}
var data1 = [];
for (const element of labels) {
	const slope=1{{ slope }}
	calc=(settemp+(slope*20)*Math.pow(((settemp-element)/20), 0.7));
	data1.push(calc);
}

var chartData = {
  labels: labels,
  datasets: [{
    label: "Auto",
    data: data,
    backgroundColor: 'transparent',
    borderColor: colors[0],
    borderWidth: 4,
    pointBackgroundColor: colors[0]
  },
   {
     label: "static",
     data: data1,
     backgroundColor: 'transparent',
     borderColor: colors[1],
     borderWidth: 4,
     pointBackgroundColor: colors[1]
   }

  ]
};
if (chLine) {
  var myChart = new Chart(chLine, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    },
    responsive: true
  }
  });
}

function recalc() {
var insidetemp = document.getElementById("tempRange").value;
var outsidetemp =11 {{ outtemp }};
document.getElementById("customtemp").innerHTML="Inside temp: "+insidetemp;
var data = [];
for (const element of labels) {
        const t1=(outsidetemp/(320-(outsidetemp*4)))
        const t2=Math.pow(settemp,t1)

        const slope=parseFloat(document.getElementById('slope').value);
        const ps=parseFloat(document.getElementById('pshift').value);
        const amp=parseFloat(document.getElementById('hcamp').value);
	console.log(element);
	console.log(t1);
        console.log(t2);
	console.log(outsidetemp)
        console.log(slope);
        console.log(ps);
        console.log(amp);
	const heat2 = ((0.55*slope*t2)*(((-element+20)*2)+settemp+ps)+((settemp-insidetemp)*amp))
	//console.log(heat2)
        // const heatcurve = (Math.round((((0.55*slope*t2)*((((-element+20)*2)+settemp)+ps)+((settemp-insidetemp)*amp)+ps))*2)/2)
	const heatcurve = (((0.55*slope*t2)*((((-element+20)*2)+settemp)+ps)+((settemp-insidetemp)*amp)+ps))
                data.push(heatcurve);
	console.log(heatcurve);
                }
var data1 = [];
for (const element of labels) {
        const slope=parseFloat(document.getElementById('slope').value);
        calc=(settemp+(slope*20)*Math.pow(((settemp-element)/20), 0.7));
        data1.push(calc);
}
myChart.data.datasets[0].data = data;
myChart.data.datasets[1].data = data1;
myChart.update();
console.log("update");
	}
</script>
	{% endblock %}
	{% block end_scripts %}
		<script>
let isFormDirty = false;
const modal = new bootstrap.Modal(document.getElementById("unsavedChangesModal"));

let pendingNavigation = null;

// Funkcja ustawiająca isFormDirty = true przy każdej zmianie w formularzu
//document.querySelectorAll("form").forEach((form) => {
//    form.addEventListener("input", () => isFormDirty = true);
//    form.addEventListener("change", () => isFormDirty = true);
//});

document.addEventListener("input", (event) => {
    if (event.target.matches("input, select")) {
        isFormDirty = true;
    }
});

document.addEventListener("change", (event) => {
    if (event.target.matches("input, select")) {
        isFormDirty = true;
    }
});
// Resetowanie flagi po zapisaniu formularza
//document.querySelectorAll("form").forEach((form) => {
//    form.addEventListener("submit", (event) => {
//        event.preventDefault();
//        isFormDirty = false;
//        alert("Zmiany zapisane!");
//    });
//});

// Obsługa kliknięć w linki nawigacyjne
document.querySelectorAll(".navl").forEach(link => {
    link.addEventListener("click", (event) => {
        if (isFormDirty) {
            event.preventDefault();
            pendingNavigation = event.target.href;
            modal.show();
        }
    });
});


// Obsługa potwierdzenia opuszczenia strony
document.getElementById("leavePageBtn").addEventListener("click", () => {
    if (pendingNavigation) {
        window.location.href = pendingNavigation;
    }
});
</script>

<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock %}
