<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%=dashboardTitle%></title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp"
      rel="stylesheet"
    />
    <script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <aside>
        <div class="top">
          <div class="logo">
            <img src="images/logo.png" alt="" />
            <h2><%=name%></h2>
          </div>
          <div class="close" id="close-btn">
            <span class="material-symbols-sharp"> close </span>
          </div>
        </div>
        <div class="sidebar">
          <a href="#" class="active">
            <span class="material-symbols-sharp"> dashboard </span>
            <h3>Dashboard</h3>
          </a>
        </div>
      </aside>
      <main>
        <h1><%=dashboardTitle%></h1>
        <div class="connection-status">
          <h3>Connection Status: <span class="status">Disconnected</span></h3>
        </div>
        <div class="insights">
          <div class="temperature">
            <div class="middle">
              <div class="left">
                <h3>Temperature</h3>
                <h1 id="temperature"></h1>
              </div>
              <div class="icon">
                <span class="material-symbols-sharp"> device_thermostat </span>
              </div>
            </div>
          </div>
          <!-- End of temperature -->
          <div class="humidity">
            <div class="middle">
              <div class="left">
                <h3>Humidity</h3>
                <h1 id="humidity"></h1>
              </div>
              <div class="icon">
                <span class="material-symbols-sharp">
                  humidity_percentage
                </span>
              </div>
            </div>
          </div>
          <!-- End of humidity -->
          <div class="pressure">
            <div class="middle">
              <div class="left">
                <h3>Pressure</h3>
                <h1 id="pressure"></h1>
              </div>
              <div class="icon">
                <span class="material-symbols-sharp"> speed </span>
              </div>
            </div>
          </div>
          <!-- End of pressure -->
          <div class="altitude">
            <div class="middle">
              <div class="left">
                <h3>Approx Altitude</h3>
                <h1 id="altitude"></h1>
              </div>
              <div class="icon">
                <span class="material-symbols-sharp"> altitude </span>
              </div>
            </div>
          </div>
          <!-- End of altitude -->
        </div>
        <!-- End of Insights -->
        <div class="histories">
          <h2>Historical Charts</h2>
          <div class="history-charts">
            <div id="temperature-history" class="history-divs"></div>
            <div id="humidity-history" class="history-divs"></div>
            <div id="pressure-history" class="history-divs"></div>
            <div id="altitude-history" class="history-divs"></div>
          </div>
        </div>
      </main>
      <div class="right">
        <div class="top">
          <button id="menu-btn">
            <span class="material-symbols-sharp"> menu </span>
          </button>
          <div class="theme-toggler">
            <span class="material-symbols-sharp active"> light_mode </span>
            <span class="material-symbols-sharp"> dark_mode </span>
          </div>
        </div>
        <!-- End of top -->
        <div class="gauge-charts">
          <h2>Gauge Charts</h2>
          <div class="item">
            <div id="temperature-gauge"></div>
          </div>
          <div class="item">
            <div id="humidity-gauge"></div>
          </div>
          <div class="item">
            <div id="pressure-gauge"></div>
          </div>
          <div class="item">
            <div id="altitude-gauge"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./index.js"></script>
    <script type="module" src="./mqttService.js"></script>
  </body>
</html>
