<% layout('layouts/boilerplate') -%>
<style>
  .grid-container {
    display: grid;
    padding: 40px;
    grid-template-columns: repeat(auto-fit, 300px);
    justify-content: space-evenly;


  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    text-align: center;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .chart-container{
    width: 25%;
  }
</style>
<div style="padding-right: 5%; padding-left: 5%;">
<div class="container">
    <% if(error && error.length > 0) { %>
  <div class="alert alert-danger" role="alert">
      <%= error %>
    </div>
    <% } %>
    </div>

  </div>
</div>




<div class="chart-container" >
  <canvas id="myChart"  ></canvas>
</div>

 <script>


   async function chartIt(){

     let myChart = document.getElementById("myChart").getContext('2d');

     let chart = new Chart(myChart,{
    responsive:true,
  type: 'doughnut',
  data: {
    labels: ["Power usage", "Power generation"],
    datasets: [
      {

        label: "Power",
        data: ['<%= powerUsage %>',
        '<%= powerGeneration %>',
        ],
        backgroundColor: ["#f72323", "#23f72e"],

      }
    ]
  },
  options: {
    title: {
      display: true,

    }
  }
});
}

chartIt();

</script>





<br>
<% if(currentUser && currentUser.isAdmin){ %>

    <header class="jumbotron bg-warning">
            <h1 style="text-align:center;">Admin Account</h1>
            </header>
<% } %>

<header class="jumbotron">
        <h1 style="text-align:center;">Welcome to The Taka Smart Home App</h1>
        </header>
        <div style="padding-left: 10%; padding-right: 10%;">
        <div class="grid-container">

          <% if((28 >= temp) && (temp >= 18)){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: green;">
          <% } %>

          <% if(temp >= 29){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: red;">
          <% } %>

          <% if(temp <= 17){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: blue;">
          <% } %>

            <div class="card-body">
              <h3><centre><br><br>Temprature (°C):</centre></h3> <%= temp %>
              <a href="/stats" class="btn btn-sm btn-warning" role="button"">stats</a>
            </div>
          </div>


          <% if(humidity <= 55){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: green;">
          <% } %>

          <% if((humidity >= 56) && (humidity <= 65)){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: orange;">
          <% } %>
          <% if((humidity >= 66)){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: red;">
          <% } %>

            <div class="card-body">
              <h3><centre><br><br>Humidity (%):</centre></h3> <%= humidity %>
            </div>
          </div>

          <% if(c02 <= 399){ %>
          <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: green;">
          <% } %>

          <% if((c02 >= 400) && (c02 <= 999)){ %>
            <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: orange;">
          <% } %>

          <% if(c02 >= 1000){ %>
            <div class="card text-white bg-dark mb-3 shadow-lg grid-item" style="width: 18rem; height: 18rem; justify-content: space-evenly; border-radius: 50%; border-style: solid; border-color: red;">
          <% } %>

            <div class="card-body">
              <h3><centre><br><br>CO2 (ppm):</centre></h3> <%= c02 %>
            </div>
          </div>
        </div>
      </div>



        <div class="grid-container" style="margin-left: -25px;">
            <a href="/room" class="btn btn-sm btn-success grid-item" style="box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); font-size: 30px; width: 110%; margin-top: 20px;" >Rooms</a>
            <a href="/gendevice" class="btn btn-sm btn-success grid-item" style="box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); font-size: 30px; width: 110%; margin-top: 20px;" role="button">Generation Devices</a>

        </div>

        <brk></brk>