<%- include('../includes/head.ejs') %>
<link rel="stylesheet" href="/css/cart.css">
</head>

<body>
<%- include('../includes/navigation.ejs') %>
<main>
    <% if (products.length > 0) { %>
        <ul class="cart__item-list">
            <% products.forEach(p => { %>
                <li class="cart__item">
                    <h1><%= p.title %></h1>
                    <h2>Quantity: <%= p.cartItem.quantity %></h2>
                    <form action="/cart-delete-item" method="POST">
                        <input type="hidden" value="<%= p.id %>" name="productId">
                        <button class="btn danger" type="submit">Delete</button>
                    </form>
                </li>
            <% }) %>
        </ul>
        <div class="centered">
            <form action="/create-order" method="POST">
                <button class="btn" type="submit">Order Now!</button>
            </form>
        </div>
    <% } else { %>
        <h1>No Products in Cart!</h1>
    <% } %>
</main>
<%- include('../includes/end.ejs') %>