<%- include('../partials/header') %>
    
<section id="navigation">
  <nav class="navbar navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="home"><i class="fab fa-opera"></i>ptimizedHealth</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class=" collapse navbar-collapse" id="navbarNav">
      <ul class=" ml-auto navbar-nav">
        <li class="  nav-item active">
          <a class="nav-link" href="nutrition">Nutrition <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="sleep">Sleep</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="fitness">Fitness</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="profile">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="trending">Trending</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">Register!</a>
        </li>
      </ul>
    </nav>
   
    <div style="background-color: #a1c0e0;">
  <div class="card text-center" style="background-color: aliceblue;">
      <h1 class="display-2">Caloric Intake</h1>
  </div>
  <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="BMRcalc">BMR</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="nutritioncalc">Current Caloric Intake</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="TDEEcalc">TDEE</a>
      </li>
    </ul>
  <figure class="center" style="display:flex">
      <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/calories-1522925243.jpg" class = "center" width="400" height="200">
  </figure>
  <div class="jumbotron jumbotron-fluid">
      <div class="p-3 mb-2 bg-info text-black">
      <div class="container">
          <div class="col">
              <div class="card text-center">
                  <h5 class="lead">Today's Caloric Intake</h5>
                  <div class="container text-center">
                  <form action="/nutritioncalc" method="POST" class="form-inline">
                      
                      <input type="number" name="b" class="form-control" placeholder="Breakfast (in kcal)" required>
                      <input type="number" name="l" class="form-control" placeholder="Lunch (in kcal)" required>
                      <input type="number" name="d" class="form-control" placeholder="Dinner (in kcal)" required>
                      <input type="number" name="s1" class="form-control" placeholder="Snack (in kcal)" required>
                      <input type="number" name="s2" class="form-control" placeholder="Snack (in kcal)" required>

                      <button type="submit" class="btn btn-primary btn-circle">Submit</button> 
                      
                  </form>
                  <p> <span id="result"></span></p>
                  <% if (message) {
                    var html = '<br><p>' + message + '</p>'; %>
                    <%- html %>
                      <a href="profile">Go to Dashboard</a>
                  <% } %>
                  </div>
              </div>       
          </div>   
      </div>
    </div>
  </div>
</div>
</div>
  
  </div>
 

<%- include('../partials/footer') %>