<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flammy Microserve</title>
    <link rel="stylesheet" href="./css/shop.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <script src="./js/shop.js" defer></script>
</head>
<body>
    <div class="nav-con">
    <header>
        <h1 id="brand-logo">ShopðŸ›’</h1>
        <div class="search">
            <input type="text" id="search" placeholder="Search...">
            <button id="searchButton">Search</button>
        </div>
        
        <div id="cart">
            <span id="cart-count">0</span>
            <button id="view-cart"> <i class="fas fa-bag-shopping"></i> </button>
        </div>
    </header>


    <nav id="mainNav">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Categories</a>
                <div class="dropdown-content">
                    <table>
                        <thead>
                            <tr>
                                <th>Electronics</th>
                                <th>Mens</th>
                                <th>Womens</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Desktop</td>
                                <td>formal</td>
                                <td>formal</td>
                            </tr>

                            <tr>
                                <td>Desktop</td>
                                <td>formal</td>
                                <td>formal</td>
                            </tr>
                       
                        </tbody>
                    </table>
            </li>
            <li><a href="#">Men</a></li>
            <li><a href="#">Women</a></li>
            <li><a href="#">Jewelery</a></li>
            <li><a href="#">Perfume</a></li>
            <li><a href="#">Blog</a></li>
                  </ul>


    </nav>

</div>
    
    <main>
        <div class="product-list">
            <!-- Render search results here -->
        </div>
        

        <!-- products here -->
        <% for (let i = 0; i < products.length; i++) { %>
       
            <section class="product">
                <img src="./assets/vendor.jpg" alt="Product 2">
                <h2><%= products[i].productName %></h2>
                <p><%= products[i].currentTag %></p>
                <button class="add-to-cart" data-price="19.99">Add to Cart</button>
            </section>
            <% } %>

        
        </main>
    <div id="cart-modal" class="hidden">
        <div id="cart-content">
            <h2>Your Cart</h2>
            <ul id="cart-items"></ul>
            <p>Total: <span id="cart-total">$0.00</span></p>
            <button id="checkout">Checkout</button>
            <button id="close-cart">Close</button>
        </div>
    </div>
    

</body>
</html>
