<%- 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">
            <a class="nav-link" href="nutrition">Nutrition</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 active">
            <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="quickSearchBackground" style="background-image: url('https://cdn.wallpapersafari.com/22/18/riY3Ba.jpg');" >
        <div class="container-fluid" style="padding: 25%; ">
            <h3>Got a question?</h3>
            <div class="row">
              <label style="color:rgb(55, 53, 53); font-size:30px; text-align:center"for="">We have the answer.</label>
              <div class="col-4">
                <form action = "/quickSearch" method="post">
                <input class="form-control" type="text" id= "nutritionQuestion" name="nutritionQuestion" placeholder="">
              
              </div>
              <div class="col-1">
                <button type = "submit" class="btn btn-light"  onclick = "apiCall()" value = "submit">Submit</button>
              </div>
              
            </form>
            </div>
            <br>
            <br>
            <p style="color:rgb(70, 47, 47); font-size:medium" >Ask something like:  </p>
            <p class="example">How much vitamin C is in 2 apples?</p>
        </div>
      </div>


      <div class="card calCalc" style="height: 20rem; background-color:aliceblue;">
        <div class="card-body calCalc" style="background-color:aliceblue;">
          <h5 id="questionRender" class="lead card-title">Check this out:</h5>
          <p style="font-family:bold;font-size:25px;" name = "answer" id="answer"><%-items%></p> <br>
          <p class="card-text"><small class="text-muted">Is this what you were looking for?</small></p>
          <img style="height: 50px; width: 50px;" src="<%-image%>" alt="">
        </div>
        
        <h3 style="font-size: 15px; margin:0;background-color:aliceblue;" class="calCalc">Back to <a  href="nutrition">Nutrition</a></h3>
      </div>
      

      <!-- <div class="card" style="height: 50rem"> 
        <div class="card-body">
          <div class="card-title" style="border-width: 5em;"> 
            <h2 name = "questionRender" id="questionRender"></h2>
            <p style="font-family:bold;font-size:25px;" name = "answer" id="answer"><%-items%></p> <br>
            <img src="" alt="">
          </div>
        </div>
      </div> -->
 
      
      <script src = "../js/infoCalc.js"></script>
<%- include('../partials/footer') %>