<%- 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 active">
          <a class="nav-link" href="fitness">Fitness</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="profile">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">Register!</a>
        </li>
      </ul>
    </div>
  </nav>
  </section>
    <header style="background-color:aliceblue"class="masthead">
      <div class="container h-100">
        <div class="row h-100 align-items-center">
          <div class="col-12 text-center">
            <h1 class="display-2"><em>Achieve Your Fitness Goal</em>s</h1>
            <h4 class="display-4">
              with <i class="fab fa-opera"></i>ptimizedHealth
            </h4>
          </div>
        </div>
      </div>
    </header>
  </section>
  
  <div style="background-color:bisque;"> 
    <i class="far fa-dumbbell"></i>
    <i class="fad fa-running"></i>
    <i class="fas fa-skiing"></i>
    <i class="fas fa-basketball-ball"></i>
    <i class="fas fa-football-ball"></i>
    <i class="fas fa-baseball"></i>
    <i class="far fa-swimmer"></i>
  <div>
  <div class="container" style="background-color:#a1c0e0;">
   
 
   

    <div class="row">
      <div class="col">
        <h3>Exercise Log</h3> <br>
      </div>
    </div>

    
    <form name="fitnessForm" action="/formreq" method="post">

      <div class="container ">
        <div class="current-activity form-group col-md-4">
          <input type="text" name="activityName" class="form-control" placeholder="Activity Name" required >
        </div>  <br>
        <div class=" current-activity  current-activity form-group col-md-2">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="radio1" value="cardio">
            <label class="form-check-label" for="radio1">
              <h4>Cardio </h4>
            </label>
          </div>
        </div>
        <div class=" current-activity  current-activity form-group col-md-2">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="radio2" value="strength">
            <label class="form-check-label" for="radio2">
              <h4>Strength</h4>
            </label>
          </div>
        </div>
        <div class=" current-activity  current-activity form-group col-md-2">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="radio3" value="yoga">
            <label class="form-check-label" for="radio3">
              <h4>Yoga</h4>
            </label>
          </div>
        </div>
        <div class=" current-activity form-group col-md-2">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="radio4" value="other">
            <label class="form-check-label" for="radio4">
              <h4>Other</h4>
            </label>
          </div>
        </div>
      </div>
      <br>
      <div class="form-row">
        <div class=" current-activity form-group col-md-6">
          <input type="text" name="date" class="form-control" placeholder="Date (yyyy-mm-dd)" required>
        </div>
        <div class=" current-activity form-group col-md-6">
          <input type="text" name="duration" class="form-control" placeholder="Duration" required>
        </div>
      </div>
    
        <div class=" current-activity form-group col-md-2">
          <h3 >Difficulty</h3>
        </div>
        <div class=" difficulty current-activity">
        <div class="current-activity row">
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif1" value="1" required>
            <label class="form-check-label" for="dif1">
              <h4>1</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif2" value="2">
            <label class="form-check-label" for="dif2">
              <h4>2</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif3" value="3">
            <label class="form-check-label" for="dif3">
              <h4>3</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif4" value="4">
            <label class="form-check-label" for="dif4">
              <h4>4</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif5" value="5">
            <label class="form-check-label" for="dif5">
              <h4>5</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif6" value="6">
            <label class="form-check-label" for="dif6">
              <h4>6</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif7" value="7">
            <label class="form-check-label" for="dif7">
              <h4>7</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif8" value="8">
            <label class="form-check-label" for="dif8">
              <h4>8</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif9" value="19">
            <label class="form-check-label" for="dif9">
              <h4>9</h4>
            </label>
          </div>
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="difficulty" id="dif10" value="10">
            <label class="form-check-label" for="dif10">
              <h4>10</h4>
            </label>
          </div>
        </div>
      </div>
      </div>
      
      <button class= "btn btn-lg btn-dark"type="submit" value="Submit">Enter</button> 
     

        
    </form>

    <br>
    <div class="row">
      <div class="col">
        <h2>Recent Workouts</h2>
        
      </div>
    </div>

    <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) { 
            if(item.activityname===null){
              
              item.activityname="Enter Workout";
              item.date="-";
              item.duration = "-";
              item.type = "-";
              item.difficulty="-";
            }
            cards += 
  
            '<div class="card bg-light border-info" style="width: 18rem; color: #000000; outline: #000000;"><div class="card-body" ><h3 class="card-title">' 
              + item.activityname + 
              '</h4><p class="lead">Date: '+ item.date + 
                ':</p><p class="lead">Duration: '+item.duration+'</p><p class="lead">Type: '+item.type+'</p><p class="lead">Difficulty: '+item.difficulty+'</p></div></div>'
            
          }); %>
          <%- cards %>
      <% } %>
      </div>

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