<!DOCTYPE html>
<html>
<head>
  <title>System Summary</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/css/nav.css" rel="stylesheet">
  <style>
    h1{
      text-align: center;
      margin: 0;
      margin-bottom: 0;
      font-size: larger;
    }
    body {
      font-family: Arial, sans-serif;
      padding: 0;
      justify-content: center;
      align-items: center; 
      background-color: #f0f0f0;
      width: 100%;
      max-width: 600px;
      min-width: 400px;
      margin: 0 auto;
    }
    .outer-container {
      justify-content: center;
      align-items: center;
      padding: 4 20px 4 20px
	  }
	  .container {
      border: 1px solid #ccc;
      padding: 5px 20px 10px 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      width:90%;
      margin-bottom: 20px;
	  }
	  .center-text {
      text-align: center;
      font-size: medium;
      font-weight: bold;
      margin-bottom: 10;
	  }
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-end; 
	  }
    .row > * {
      flex: 1;
      width: 0 1 calc(52% - 20px);
      margin-bottom: 8px;
	  }
    .row > *:last-child {
      flex: 0 1 calc(48% - 10px); /* 40% width with 10px gap */
    }
    input[type="number"], select {
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 50%;
	  }
	  button {
      background-color: #007bff;
      color: #fff;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: auto;
	  }
    .lbldata{
      font-style:italic;
      font-weight: bold;
      color: purple;
    }

  </style>
</head>
<body>
  <div id="navbar"></div>
  <h1 name="h1element">System Summary</h1> 
    <div class="outer-container">

      <div class="container">
        <legend class="center-text">Booth Overview</legend>
        <div class="row">
          <div>
            <label>App:</label>
            <label class="lbldata">{{APP_NAME}}</label>
          </div>
          <div>
            <label>OLED:</label>
            <label class="lbldata">{{OLED}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>RGB Ch1:</label>
            <label class="lbldata">{{STRIP1}}</label>
          </div>
          <div>
            <label>RGB Ch2:</label>
            <label class="lbldata">{{STRIP2}}</label>
          </div>
        </div>
    
        <div class="row">
          <div>
            <label>Front Light:</label>
            <label class="lbldata">{{FRONT_LIGHT}}</label>
          </div>
          <div>
            <label>Rear Light:</label>
            <label class="lbldata">{{REAR_LIGHT}}</label>
          </div>
        </div>
      </div>

      <div class="container">
        <legend class="center-text">System Information</legend>
        <div class="row">
          <div>
            <label>Firmware Ver:</label>
            <label class="lbldata">{{FIRMWARE}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>Booth T&deg;:</label>
            <label class="lbldata">{{BOOTH_T}}</label>
          </div>
          <div>
            <label>Setpoint:</label>
            <label class="lbldata">{{SETPOINT}}</label>
          </div>
        </div>
    
        <div class="row">
          <div>
            <label>Flash Size:</label>
            <label class="lbldata">{{FLASH_SIZE}}</label>
          </div>
          <div>
            <label>Flash Free:</label>
            <label class="lbldata">{{FLASH_FREE}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>Heap Size:</label>
            <label class="lbldata">{{HEAP_SIZE}}</label>
          </div>
          <div>
            <label>Heap Free:</label>
            <label class="lbldata">{{HEAP_FREE}}</label>
          </div>
        </div>

        <div class="row">
          <div>

          </div>
          <div>
            <label>CPU Freq:</label>
            <label class="lbldata">{{CPU_FREQ}}</label>
          </div>
        </div>
      </div>


      <div class="container">
        <legend class="center-text">Network / WiFi</legend>
        <div class="row">
          <div>
            <label>IP:</label>
            <label class="lbldata">{{IP}}</label>
          </div>
          <div>
            <label>MAC:</label>
            <label class="lbldata">{{MAC}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>SSID:</label>
            <label class="lbldata">{{SSID}}</label>
          </div>
          <div>
            <label>RSSi:</label>
            <label class="lbldata">{{RSSI}}</label>
          </div>
        </div>
    
        <div class="row">
          <div>
            <label>Ch:</label>
            <label class="lbldata">{{WIFI_CH}}</label>
          </div>
          <div>
            <label>Encryp:</label>
            <label class="lbldata">{{ENCRYP}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>AP SSID:</label>
            <label class="lbldata">{{AP_SSID}}</label>
          </div>
          <div>
            <label>AP Clients:</label>
            <label class="lbldata">{{AP_CLIENTS}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>AP MAC:</label>
            <label class="lbldata">{{AP_MAC}}</label>
          </div>
          <div>
            <label>---</label>
            <label class="lbldata"></label>
          </div>
        </div>
      </div>

      <div class="container">
        <legend class="center-text">Bluetoth LE</legend>
        <div class="row">
          <div>
            <label>Active:</label>
            <label class="lbldata">{{BLE}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>SSID:</label>
            <label class="lbldata">{{BLE_SSID}}</label>
          </div>
          <div>
            <label>Clients:</label>
            <label class="lbldata">{{BLE_CLIENTS}}</label>
          </div>
        </div>
      </div>

      <div class="container">
        <legend class="center-text">Luma Stiks</legend>
        <div class="row">
          <div>
            <label>Stik1:</label>
            <label class="lbldata">{{STIK1}}</label>
          </div>
          <div>
            <label>Stik2:</label>
            <label class="lbldata">{{STIK2}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>Stik3:</label>
            <label class="lbldata">{{STIK3}}</label>
          </div>
          <div>
            <label>Stik4:</label>
            <label class="lbldata">{{STIK4}}</label>
          </div>
        </div>

        <div class="row">
          <div>
            <label>Stik5:</label>
            <label class="lbldata">{{STIK5}}</label>
          </div>
          <div>
            <label>Stik6:</label>
            <label class="lbldata">{{STIK6}}</label>
          </div>
        </div>
      </div>

    </div>

    <script>
      fetch('/www/navbar.html')
          .then(response => response.text())
          .then(data => {
              document.getElementById('navbar').innerHTML = data;
          });
    </script>
  </body>
</html>