<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= category.name %> - <%= settings.company_name %></title>
    <meta name="description" content="Buy <%= category.name %> from <%= settings.company_name %>, <%= settings.city %>. Best prices and wide range.">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

<%- include('partials/header', { activePage: 'products' }) %>

    <section class="category-page">
        <div class="container">
            <div class="breadcrumb">
                <a href="/">Home</a> <i class="fas fa-chevron-right"></i>
                <a href="#products">Products</a> <i class="fas fa-chevron-right"></i>
                <span><%= category.name %></span>
            </div>

            <div class="category-layout">
                <!-- Left Sidebar -->
                <aside class="category-sidebar">
                    <h3>Product Categories</h3>
                    <ul class="sidebar-categories">
                        <% allCategories.forEach(c => { %>
                        <li class="<%= c.id === category.id ? 'active' : '' %>">
                            <a href="/category/<%= c.slug %>">
                                <i class="fas fa-angle-right"></i>
                                <%= c.name %>
                                <span class="cat-count">(<%= c.product_count %>)</span>
                            </a>
                        </li>
                        <% }); %>
                    </ul>
                </aside>

                <!-- Products Grid -->
                <div class="category-products">
                    <h1><%= category.name %></h1>
                    <p class="category-desc">Showing <%= products.length %> products in "<%= category.name %>"</p>

                    <div class="products-grid">
                        <% products.forEach(p => { %>
                        <div class="product-card" data-category="<%= category.name %>" data-product="<%= p.name %>" data-price="<%= p.price %>" data-image="<%= p.image %>">
                            <div class="product-card-image">
                                <a href="/product/<%= p.id %>">
                                    <img src="<%= p.image %>" alt="<%= p.name %>" loading="lazy">
                                </a>
                            </div>
                            <div class="product-card-content">
                                <h4><a href="/product/<%= p.id %>"><%= p.name %></a></h4>
                                <% if (p.price) { %>
                                <p class="product-price"><%= p.price %></p>
                                <% } %>
                                <% if (p.min_order) { %>
                                <p class="product-min-order">Min Order: <%= p.min_order %></p>
                                <% } %>
                                <div class="product-card-actions">
                                    <a href="/product/<%= p.id %>" class="btn btn-sm btn-outline">View Details</a>
                                    <button type="button" class="btn btn-sm btn-primary get-quote-btn">Get Quote</button>
                                </div>
                            </div>
                        </div>
                        <% }); %>
                    </div>

                    <% if (products.length === 0) { %>
                    <div class="no-products">
                        <i class="fas fa-box-open"></i>
                        <p>No products found in this category.</p>
                    </div>
                    <% } %>
                </div>
            </div>
        </div>
    </section>

<%- include('partials/footer', { categories: allCategories }) %>

    <script src="/js/main.js"></script>
</body>
</html>
