<%- 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>
      </div>
    </nav>
    <div class="card text-center" style="background-color: aliceblue; font-size:30px;" >
        <h1 class="display-2">Calculate your BMR</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 style="width:300px" src="https://images-na.ssl-images-amazon.com/images/I/51UoIzk274L.png" class = "center">
    </figure>
    <div class="card text-center">
    <div class="p-3 mb-2 bg-info text-white">
        <h5 class="lead">Basal Metabolic Rate</h5>
        <label>Female:
        <input id="female" type="radio" name="gender" onchange="calorieInformation()">
        </label>
        <br>
        <label>Male:
        <input id="male" type="radio" name="gender" onchange="calorieInformation()" checked>
        </label>
        <br>
        <label>Age:
        <input id="age" type="number" oninput="calorieInformation()" value="-">
        years
        </label>
        <br>
        <label>Height:
        <input id="height" type="number" oninput="calorieInformation()" value="-">
        in
        </label>
        <br>
        <label>Weight:
        <input id="weight" type="number" oninput="calorieInformation()" value="-">pounds
        </label>
        <br>
        <label>
        <p>BMR: <span id="totalCals"></span></p>
        </label>
        <br>
        <button type="submit" id="BMRsubmit" class="btn btn-primary btn-circle" onclick="postBMR()"
         style='visibility:hidden; height:0px;'>
          Save BMR
        </button>
        <% if (message) {
          var html = '<br><p>' + message + '</p>'; %>
          <%- html %>
        <% } %>
   </div>
</div>
<%- include('../partials/footer') %>