<%- include('../partials/header') %>
 
    <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</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 id="userMealInput">  
    <h2 class="display-3" style= "color: #000000;">Find your Next Meal</h2>
    <img src="https://www.forksoverknives.com/wp-content/uploads/fly-images/25860/different-diets5-664x374-c.jpg" alt="ketopaleoetc" width="400" height="200">

    <!-- <div class="row "> -->
     <form action="/meal_database"  method="post">
      <div class="form-group ">
      <select id="dietDropDown" name = "dietType" class="form-control ">
        <option>Diet Type</option>
        <option >Vegetarian</option>
        <option >Western</option>
        <option >Vegan</option>
        <option >Paleo</option>
        <option >Keto</option>
        <option >Mediterranean</option>
        <option >Raw</option>
      </select>
    </div>
    <div class="form-group">
      <input  name="userCalories" class="form-control" id="userCalories" placeholder="Enter: Target Calories">
    </div>
    <div class="form-group">
      <input  name="exclude" class="form-control" id="exclude" placeholder="Exclude: separate items with comma">
    </div>
    <button type="submit" onclick = "display()"class="btn btn-outline-info btn-lg btn-block">Generate Meals</button>
    </form>
  </div>
  <!-- </div> -->
  
</div>  
<div class="mealcards">
  <h1 class="display-4" style="color: #8dacac; font-style:italic; font-size:25px;"> Watch the magic happen....</h1>
  <h2 class="display-4" style= "color: #043a39;font-size:35px;" id="diettype">Diet Type: </h2><p class= "lead" style= "color: #0a7674;font-size:25px;"><%-diet%></p>
  <h2 class="display-4" style= "color: #043a39;font-size:35px;" id="calories">Target Calories:</h2><p class= "lead" style= "color: #0a7674;font-size:25px;"><%-calories%></p>
  <h2 class="display-4" style= "color: #043a39;font-size:35px;" id="calories">Excluding: </h2><p class= "lead" style= "color: #0a7674;font-size:25px;"><%-excluded%></p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="align-center card-columns col-lg">
  <%
    if (items) {
      var cards = '';
      //var calories = if(calories) ? calories: "Not found";
      //var protein = if(protein) ? protein: "Not found"
      //var fat = if(fat) ? fat: "Not found"
      //var carbs = if(carbs) ? carbs: "Not found"
      //<!-- Iterate the items object & update the cards variable -->
      items.forEach(function(item) {  //making a card for each movie that was returned by the API call
        cards += 
  
        '<div class="card bg-light border-info" style="width: 18rem; color: #000000; outline: #000000;"><div class="card-body" ><h3 class="card-title">' 
          + item.title + 
          '</h4><p class="lead">Calories: '+ calories + 
            ':</p><p class="lead">Protien: '+protein+'</p><p class="lead">Fat: '+fat+'</p><p class="lead">Carbs: '+carbs+'</p><a href="'+item.sourceUrl+'" target="_blank"class="btn btn-warning">Recipe</a></div></div>'
        
      }); %>
      <%- cards %>
  <% } %>
  </div>
</div>
</div>
<div class="bottom">
<h3 class="display-3" style="font-size: 20px; margin:0; padding-top:6rem;" class="calCalc">Back to <a  href="nutrition">Nutrition</a></h3>
</div>

  

















<script src = "../js/meal_database.js"></script>
<%- include('../partials/footer') %>