<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Shopify Developer Challenge</title>
    <link rel="stylesheet" href="css/productspage.css"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div>
        <h1>Products</h1>
        <table>
            <tr>
              <th>Product ID</th>
              <th>Product Name</th>
              <th>Total Quantity</th>
              <th></th>
            </tr>
            <%products.forEach(function(element){%>
                <form action="/read" method="get">
                <tr>
                    <td><%=element.id%></td>
                    <td><%=element.name%></td>
                    <td><%=element.totalq%></td>
                    <td><button class="btn btn-dark" type="submit" name="item" value="<%-element.id%>">Expand</button></td>
                </tr>
            </form>

            
            <%});%>
            
          </table> 
    </div>
    <form class="text-center" action="/create" method="get">
       <button class="btn btn-dark mb-3" type="submit" >New</button>
        </tr>
    </form>
    <form class="text-center" action="/restore" method="get">
      <button class="btn btn-dark mb-3" type="submit">Undo Delete/Delete Permanently</button>
       </tr>
   </form>
    
  </body>
</html>