/* 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 = 'ACTIVE'; g('heatReq').style = 'color:red;'; }
          else { g('heatReq').innerHTML = 'INACTIVE'; g('heatReq').style = 'color:black;'; }

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

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

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

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

          if(data.statTest == '1') { g('statTest').innerHTML = 'ACTIVE'; g('statTest').style = 'color:red;'; }
          else { g('statTest').innerHTML = 'INACTIVE'; g('statTest').style = 'color:black;'; }

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

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

          if(data.tempFeed !== undefined) g('tempFeed').innerHTML = data.tempFeed + '&deg;';
          if(data.tempReturn !== undefined) g('tempReturn').innerHTML = data.tempReturn + '&deg;';
          if(data.tempOut !== undefined) g('tempOut').innerHTML = data.tempOut + '&deg;';

          if(data.temp !== undefined && data.hum !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;&nbsp;&nbsp;&nbsp;' + data.hum.toFixed(0) + '%';
          else if(data.temp !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;';
          
          var APname;
          if(data.WiFiNum == 1) APname='Default-AP';
          else if(data.WiFiNum == 1) APname='Fallback-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 = ' connected to <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%'>Heat Demand </td><td><b><span id='heatReq'></span></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Heating Control</td><td><b><span id='outHeat'></span></b></td></tr>
<tr><td>Heating Feedback</td><td><b><span id='statHeat'></span></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Pump Control</td><td><b><span id='outPump'></span></b></td></tr>
<tr><td>Pump Backlash </td><td><b><span id='pumpNL'></span></b></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Test Mode </td><td><b><span id='statTest'></span></b></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
<div></div>
<div></div>
<p><b>Bypass Control</b></p>
<table style='width:100%'>
<tr><td style='width:50%'>Heating </td><td><b><span id='cDisHeat'></span></b></td></tr>
<tr><td>Pump </td><td><b><span id='cDisPump'></span></b></td></tr>
</table>
<div></div>
<div></div>
<p><b>Temperatures</b></p>
<table style='width:100%'>
<tr><td style='width:50%'>Heating Feed </td><td><b><span id='tempFeed'></span></td></tr>
<tr><td>Heating Return </td><td><b><span id='tempReturn'></span></td></tr>
<tr><td>Outside </td><td><b><span id='tempOut'></span></b></td></tr>
<tr><td>Heating Room </td><td><b><span id='currTempHum'></span></td></tr>
</table>
)====="; // html_main_body_app

#endif