<!DOCTYPE html>


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Shoe Horn</title>


    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="../styles/style.css">


    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 
 
 <!-- Navbar -->
 <body  style="min-height:90vh;">
      <div id="app">
         <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
               <a class="navbar-brand" href="#">
               Shoe Horn
               </a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left Side Of Navbar -->
                  <ul class="navbar-nav mr-auto">
                  </ul>
                  <!-- Right Side Of Navbar -->
                  <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
                        <a href="https://github.com/cmcdonald6/shoe-horn" target="_blank" href="#">  Shoe Horn Repo  </a>
                     </li>

                     <!-- <li class="nav-item">
                        <a class="https://github.com/cmcdonald6/shoe-horn/wiki" href="#">  Shoe Horn Wiki  </a>
                     </li> -->
                  </ul>
               </div>
            </div>
         </nav>
<!-- Navbar end -->

<!--dropdown-->
<!-- <style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
  }
  .dropdown-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .dropdown-content li {
    padding: 8px 12px;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  </style> -->
<!--dropdown end--> 

<!-- Your Closer section -->
<div class="border-bottom border-grey"></div>
<main class="py-4">
            <div class="container">
               <div class="row justify-content-center">
                  <!--<div class="col-lg-4">
                    
                     <span class="text-justify mb-3" style="padding-top:-3px;">Please sign in using your email or password <br><br> You can also sign in using your GitHub</span>
                  </div> -->
                  <div class="col-lg-8 text-center pt-2">
                     <div class="card py-4 mb-5 mt-md-3 bg-white rounded " style="box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175)">

                        <form>
                            <div class="form-group px-3">

                                 <h4> Your Closet</h4>
                 <% for (var i=0; i< drinkData.length; i++ ) { %>
                 <form method="POST" action="/updateDrink/<%= drinkData[i]._id %>" style="display: inline-block">  
                   <%= drinkData[i].name %> (<%= drinkData[i].size %>) (<%= drinkData[i].brand %>)  (<%= drinkData[i].originalprice %>) (<%= drinkData[i].currentvalue %>)
                     <input type="submit" value="update">
                   </form>
                     <br/>
                   <% } %>
                           
                        </form>
                        

                     </div>
                  </div>
               </div>
               </div>
               </div>
               </div>

<br/>

<h3> Add a new shoe to your collection </h3>


<form method="POST" action="/addDrink">
  <label for="name">Name</label>
    <input name="name">
    <br>
    <label for="size">Size</label>
      <input name="size">
    <br>
    <label for="brand">Brand</label>
    <input name="brand">
  <br>
  <label for="originalprice">Original Price</label>
  <input name="originalprice">
<br>
<label for="currentvalue">Current Value</label>
<input name="currentvalue">
    <input type="submit" value="Submit" />
</form>


<br/>


<div class="dropdown">
  <button class="dropbtn">Delete Shoes</button>
  <div class="dropdown-content">
    <ul>
      <% for (var i=0; i< drinkData.length; i++ ) { %>
        <li>
          <span>
            <%= drinkData[i].name %> (<%= drinkData[i].size %>) (<%= drinkData[i].brand %>) (<%= drinkData[i].originalprice %>) (<%= drinkData[i].currentvalue %>)


          </span>
          <form method="POST" action="/deleteDrink/<%= drinkData[i]._id %>">
            <button type="submit">Delete</button>
          </form>
        </li>
        <% } %>
    </ul>
  </div>
 
</div>
</html>
