/* clang-format off */

#ifdef FIRMWARE_VARIANT_HEATCONTROL

static const char html_main_script[] PROGMEM = R"=====(
<script>
  function g(i) { return document.getElementById(i) };
  var xhttp, updateTime, reqTime, reqFin;
  function sendBtn(btn, conf) {
  var frmn='BtnFrm'+btn;
  var form = g(frmn);
  if(conf !== undefined) {
  if(confirm(conf)) return transmit(form);
    else return false;
    }
    else return transmit(form);
  }
  function transmit(f) {
    if (!xhttp) { 
      reqTime = 0;
      reqFin = false;
      xhttp = new XMLHttpRequest();
      xhttp.timeout = 1000;
      xhttp.overrideMimeType("application/json");
      xhttp.open('POST', 'api');
      xhttp.send(f ? (new FormData(f)) : '');
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
          var data = JSON.parse(xhttp.responseText);

          if(data.heatReq == '1') { g('heatReq').innerHTML = 'AKTIV'; g('heatReq').style = 'color:red;'; }
          else { g('heatReq').innerHTML = 'INAKTIV'; g('heatReq').style = 'color:black;'; }

          if(data.statHeat == '1') { g('statHeat').innerHTML = 'AKTIV'; g('statHeat').style = 'color:red;'; }
          else { g('statHeat').innerHTML = 'INAKTIV'; g('statHeat').style = 'color:black;'; }

          if(data.outHeat == '1') { g('outHeat').innerHTML = 'AKTIV'; g('outHeat').style = 'color:red;'; }
          else { g('outHeat').innerHTML = 'INAKTIV'; g('outHeat').style = 'color:black;'; }

          if(data.outPump == '1') { g('outPump').innerHTML = 'AKTIV'; g('outPump').style = 'color:red;'; }
          else { g('outPump').innerHTML = 'INAKTIV'; g('outPump').style = 'color:black;'; }

          if(data.pumpNL == '0') { g('pumpNL').innerHTML = 'INAKTIV'; g('pumpNL').style = 'color:black;'; }
          else { g('pumpNL').innerHTML = data.pumpNL + ' min'; g('pumpNL').style = 'color:red;'; }

          if(data.statLock == '0') { g('statLock').innerHTML = 'INAKTIV'; g('statLock').style = 'color:black;'; }
          else { g('statLock').innerHTML = 'AKTIV'; g('statLock').style = 'color:red;'; }

          if(data.statLockTime == '0') { g('statLockTime').innerHTML = 'INAKTIV'; g('statLockTime').style = 'color:black;'; }
          else { g('statLockTime').innerHTML = data.statLockTime + ' min'; g('statLockTime').style = 'color:red;'; }

          if(data.lockUntilTFeed !== undefined) {
            if(data.lockUntilTFeed == '-') g('lockUntilTFeed').innerHTML = data.lockUntilTFeed;
            else g('lockUntilTFeed').innerHTML = data.lockUntilTFeed + '&deg;';
            }

          if(data.statTest == '0') { g('statTest').innerHTML = 'INAKTIV'; g('statTest').style = 'color:black;'; }
          else { g('statTest').innerHTML = data.statTest + ' min'; g('statTest').style = 'color:red;'; }

          if(data.cDisHeat == '1') { g('cDisHeat').innerHTML = 'AKTIV'; g('cDisHeat').style = 'color:red;'; }
          else { g('cDisHeat').innerHTML = 'INAKTIV'; g('cDisHeat').style = 'color:black;'; }

          if(data.cDisPump == '1') { g('cDisPump').innerHTML = 'AKTIV'; g('cDisPump').style = 'color:red;'; }
          else { g('cDisPump').innerHTML = 'INAKTIV'; g('cDisPump').style = 'color:black;'; }

          if(data.tempFeed !== undefined) g('tempFeed').innerHTML = data.tempFeed.toFixed(1) + '&deg;';
          if(data.tempReturn !== undefined) g('tempReturn').innerHTML = data.tempReturn.toFixed(1) + '&deg;';
          if(data.tempOut !== undefined) g('tempOut').innerHTML = data.tempOut.toFixed(1) + '&deg;';
          
          if(data.useHeatC !== undefined) {
            if(data.useHeatC) {
                g('div_heatc').style = 'visibility: visible';
                if(data.currHeatC !== undefined) g('currHeatC').innerHTML = data.currHeatC + '&deg;';
                if(data.currHeatCOff !== undefined) g('currHeatCOff').innerHTML = data.currHeatCOff + '&deg;';
                if(data.currHeatCOn !== undefined) g('currHeatCOn').innerHTML = data.currHeatCOn + '&deg;';
              }
          }
          
          if(data.temp !== undefined && data.hum !== undefined) {
              g('div_sens_dht').style = 'visibility: visible';
              g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;&nbsp;&nbsp;&nbsp;' + data.hum.toFixed(0) + '%';
            }
          else if(data.temp !== undefined) {
              g('div_sens_dht').style = 'visibility: visible';
              g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;';
            }
          else g('div_sens_dht').style = 'visibility: collapse';
          
          var APname;
          if(data.WiFiNum == 1) APname='Haupt-AP';
          else if(data.WiFiNum == 1) APname='2. AP';
          
          if(data.ssid !== undefined && data.WiFiNum !== undefined && data.WiFiNum > 0) g('ssid').innerHTML = data.ssid + ' (' + APname + ')';
          else if(data.ssid !== undefined) g('ssid').innerHTML = data.ssid;

          if(data.mqttstate !== undefined) { 
            if(data.mqttstate == "CONNECTED") { g('mqttstate').innerHTML = ' verbunden mit <i>' + data.mqtthost + '</i>'; }
            else g('mqttstate').innerHTML = data.mqttstate;
          }
          if(data.uptime !== undefined) g('uptime').innerHTML = data.uptime;
          
          if(data.date !== undefined) g('date').innerHTML = data.date;
          else g('date').innerHTML = '-';
          
          if(data.time !== undefined) g('time').innerHTML = data.time;
          else g('time').innerHTML = '-';
          
          if(data.mqttreconn !== undefined) g('mqttreconn').innerHTML = data.mqttreconn;
          
          xhttp = null;
          updateTime = 0;
          reqFin = true;
          }
        else {
          if(!reqFin && reqTime > 10) {
            xhttp = null;
            reqFin = true;
          }
        }
      }
    }
    return false;
  }
  function init() {
    transmit();
  }
  setInterval(transmit, 2500);
</script>
)====="; // html_main_script

static const char html_main_body_app[] PROGMEM = R"=====(
<p><b>Status</b></p>
<table style='width:100%'>
<tr><td style='width:50%'>Heizanforderung </td><td><b><span id='heatReq'></span></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Heizkessel</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;Ansteuerung</td><td><b><span id='outHeat'></span></b></td></tr>
<tr><td>&nbsp;&nbsp;Rückmeldung</td><td><b><span id='statHeat'></span></td></tr>
<tr><td>&nbsp;&nbsp;Sperre</td><td><b><span id='statLock'></span></td></tr>
<tr><td>&nbsp;&nbsp;Sperrzeit</td><td><b><span id='statLockTime'></span></td></tr>
<tr><td>&nbsp;&nbsp;Sperre bis <br>&nbsp;&nbsp;&nbsp;&nbsp;Vorlauf <</td><td><b><span id='lockUntilTFeed'></span></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Pumpe</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;Ansteuerung</td><td><b><span id='outPump'></span></b></td></tr>
<tr><td>&nbsp;&nbsp;Nachlauf</td><td><b><span id='pumpNL'></span></b></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Testbetrieb </td><td><b><span id='statTest'></span></b></td></tr>
</table>

<div id='div_heatc' style='visibility: collapse;'>
<table style='width:100%'>
<tr><td style='width:50%'>Heizkurve</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;Schwellwert Aus</td><td><b><span id='currHeatCOff'></span></b></td></tr>
<tr><td>&nbsp;&nbsp;aktueller Sollwert</td><td><b><span id='currHeatC'></span></b></td></tr>
<tr><td>&nbsp;&nbsp;Schwellwert Ein</td><td><b><span id='currHeatCOn'></span></b></td></tr>
</table>
</div>

<div></div>
<div></div>
<p><b>Umgehung Steuerung</b></p>
<table style='width:100%'>
<tr><td style='width:50%'>Heizung </td><td><b><span id='cDisHeat'></span></b></td></tr>
<tr><td>Pumpe </td><td><b><span id='cDisPump'></span></b></td></tr>
</table>
<div></div>
<div></div>
<p><b>Temperaturen</b></p>
<table style='width:100%'>
<tr><td style='width:50%'>Heizung Vorlauf </td><td><b><span id='tempFeed'></span></td></tr>
<tr><td>Heizung R&uuml;cklauf </td><td><b><span id='tempReturn'></span></td></tr>
<tr><td>Au&szlig;en </td><td><b><span id='tempOut'></span></b></td></tr>
</table>
<div id='div_sens_dht' style='padding:0px; visibility:collapse;'>
<table style='width:100%'>
<tr><td style='padding:0px; width:50%'>Heizraum </td><td><b><span id='currTempHum'></span></td></tr>
</table>
</div>

)====="; // html_main_body_app

#endif