<% layout('layouts/customer-boilerplate')  -%>
    <div class="container">
        <div class="row" style="margin-bottom: 20px;">
            <ul class="nav nav-pills nav-fill justify-content-center">
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'All products'  ? 'active' : '' %>" aria-current="page" href="/products">All</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'fruits'  ? 'active' : '' %>" href="/products?category=fruits">Fruits</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'vegetables'  ? 'active' : '' %>" href="/products?category=vegetables">Vegetables</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'meat'  ? 'active' : '' %>" href="/products?category=meat">Meat</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'spices'  ? 'active' : '' %>" href="/products?category=spices">Spices</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Products on Sale'  ? 'active' : '' %>" href="/products/onsale">On Sale</a>
                </li>

            </ul>
        </div>
        <div class="row row-cols-2 row-cols-md-4 g-8">
            <% for(product of products) {%>
                <div class="col mb-3">
                    <div class="card">
                        <img src="<%= product.images[0].thumbnail  %>" width="auto" height="200" class="card-img-top" alt="...">
                        <div class="card-body card-img-overlay">
                            <% if (product.tags.includes('OnSale')) {%>
                                <span class="badge bg-danger btn-sm">OnSale</span>
                                <% } %>
                        </div>


                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h5>
                                    <a style="text-decoration: none; text-transform:capitalize;" href="/products/<%= product._id %>">
                                        <%= product.name %>
                                    </a>
                                </h5>

                            </li>
                            <li class="list-group-item">
                                <%= product.price %> zl per
                                    <%= product.quantity_type %>
                            </li>
                            <li class="list-group-item">
                                <form class="d-inline" method="POST" action="/shopping-cart/add">
                                    <input type="text" hidden name="productID" value="<%= product._id %>">
                                    <input type="text" hidden name="quantity" value="1">
                                    <input type="text" hidden name="userID" value="<% if (currentUser) {%><%= currentUser._id%><% } %>">
                                    <button class="btn btn-light"><i class="fas fa-shopping-cart"></i> Add to cart</button>
                                </form>
                            </li>
                        </ul>

                    </div>

                </div>
                <% } %>
        </div>
    </div>