<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\cart.css">
  <script src="..\..\scripts\cart.js"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>

  <title>Cart</title>
</head>

<body style="background-color: black;">
  <div class="container-fluid">
    <%- include('header') %>

    <div class="row">
      <div class="col-9 p-5">
        <div class="row">
          <div class="col">
            <h1 style="color: white;">Shopping Cart</h1>
          </div>
          <div class="col">
            <a href="/">
              <button>Continue Shopping</button>
            </a>
          </div>
          <div class="col">
            <a href="/store/checkout">
              <button>Proceed to Checkout</button>
            </a>
          </div>
        </div>
        <div class="row">
          <% for (product of products) { %>
            <div class="row">
              <div class="row">
                <div class="col-sm-2 my-auto">
                  <form class="row my-3" method="get" action=<%= "/store/cart/delete/" + product.productid %>>
                    <button class="btn btn-primary"> Remove from cart </button>
                  </form>
                </div>
                <div class="col-10">
                  <div class="card m-2">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-2">
                          <div style="height: 190px; width: 140px; background-color: red;">
                            <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                          </div>
                        </div>
                        <div class="col-sm-10 my-auto">
                          <div class="row">
                            <div class="col-10">
                              <h4><%= product.productname %></h4>
                              <h6><%= product.publisherid %></h6>
                            </div>
                            <div class="col-2">
                              <h4>$<%= product.productprice %></h4>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <% } %>
        </div>
        <div class="row">

        </div>
      </div>
      <div class="col-3">

      </div>
    </div>

    <%- include('footer') %>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>