<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Breadcrumb -->
  <div class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <a href="/" class="hover:text-indigo-600">Home</a>
    <i class="fas fa-chevron-right text-xs"></i>
    <span class="text-gray-800 font-medium">Products</span>
  </div>

  <div class="flex flex-col lg:flex-row gap-8">
    <!-- Sidebar Filters -->
    <div class="w-full lg:w-64 flex-shrink-0">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sticky top-24">
        <h3 class="font-semibold text-gray-800 mb-4">Categories</h3>
        <ul class="space-y-2">
          <li>
            <a href="/products" class="text-sm <%= !currentCategory ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600' %>">All Products</a>
          </li>
          <% if (typeof categories !== 'undefined' && categories) { categories.forEach(function(cat) { %>
            <li>
              <a href="/products?category=<%= cat.id %>" class="text-sm <%= parseInt(currentCategory) === cat.id ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600' %>"><%= cat.name %></a>
            </li>
          <% }) } %>
        </ul>

        <hr class="my-4">

        <h3 class="font-semibold text-gray-800 mb-4">Price Range</h3>
        <form action="/products" method="GET" class="space-y-2">
          <% if (currentCategory) { %><input type="hidden" name="category" value="<%= currentCategory %>"><% } %>
          <% if (typeof search !== 'undefined' && search) { %><input type="hidden" name="search" value="<%= search %>"><% } %>
          <div class="flex gap-2">
            <input type="number" name="minPrice" placeholder="Min" value="<%= typeof minPrice !== 'undefined' ? minPrice : '' %>" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
            <input type="number" name="maxPrice" placeholder="Max" value="<%= typeof maxPrice !== 'undefined' ? maxPrice : '' %>" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
          </div>
          <button type="submit" class="w-full bg-indigo-600 text-white py-1.5 rounded text-sm hover:bg-indigo-700">Filter</button>
        </form>
      </div>
    </div>

    <!-- Product Grid -->
    <div class="flex-1">
      <!-- Sort & Count -->
      <div class="flex justify-between items-center mb-6">
        <p class="text-sm text-gray-500"><%= typeof total !== 'undefined' ? total : 0 %> products found</p>
        <div class="flex items-center gap-2">
          <label class="text-sm text-gray-500">Sort:</label>
          <select onchange="window.location.href=this.value" class="text-sm border border-gray-300 rounded-lg px-3 py-1.5">
            <option value="?sort=newest<%= currentCategory ? '&category='+currentCategory : '' %>" <%= sort === 'newest' || !sort ? 'selected' : '' %>>Newest</option>
            <option value="?sort=price_asc<%= currentCategory ? '&category='+currentCategory : '' %>" <%= sort === 'price_asc' ? 'selected' : '' %>>Price: Low to High</option>
            <option value="?sort=price_desc<%= currentCategory ? '&category='+currentCategory : '' %>" <%= sort === 'price_desc' ? 'selected' : '' %>>Price: High to Low</option>
            <option value="?sort=name<%= currentCategory ? '&category='+currentCategory : '' %>" <%= sort === 'name' ? 'selected' : '' %>>Name</option>
          </select>
        </div>
      </div>

      <!-- Products -->
      <% if (typeof products !== 'undefined' && products && products.length) { %>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
          <% products.forEach(function(product) { %>
            <a href="/products/<%= product.slug %>" class="bg-white rounded-xl shadow-sm hover:shadow-md transition border border-gray-200 overflow-hidden group">
              <div class="aspect-square bg-gray-100 relative overflow-hidden">
                <% if (product.images && product.images.length) { %>
                  <img src="<%= product.images[0].imagePath %>" alt="<%= product.name %>" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                <% } else { %>
                  <div class="w-full h-full flex items-center justify-center text-gray-400">
                    <i class="fas fa-image text-4xl"></i>
                  </div>
                <% } %>
                <% if (product.comparePrice && parseFloat(product.comparePrice) > parseFloat(product.price)) { %>
                  <span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
                    -<%= Math.round((1 - parseFloat(product.price)/parseFloat(product.comparePrice)) * 100) %>% OFF
                  </span>
                <% } %>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 text-sm truncate"><%= product.name %></h3>
                <div class="flex items-center gap-2 mt-2">
                  <span class="text-lg font-bold text-indigo-600">₹<%= parseFloat(product.price).toFixed(2) %></span>
                  <% if (product.comparePrice) { %>
                    <span class="text-sm text-gray-400 line-through">₹<%= parseFloat(product.comparePrice).toFixed(2) %></span>
                  <% } %>
                </div>
              </div>
            </a>
          <% }) %>
        </div>
      <% } else { %>
        <div class="text-center py-16">
          <i class="fas fa-box-open text-5xl text-gray-300 mb-4"></i>
          <h3 class="text-lg font-medium text-gray-600">No products found</h3>
          <p class="text-sm text-gray-400 mt-1">Try adjusting your search or filter criteria.</p>
        </div>
      <% } %>

      <!-- Pagination -->
      <% if (typeof totalPages !== 'undefined' && totalPages > 1) { %>
        <div class="flex justify-center mt-8 gap-2">
          <% for (let p = 1; p <= totalPages; p++) { %>
            <a href="?page=<%= p %><%= sort ? '&sort='+sort : '' %><%= currentCategory ? '&category='+currentCategory : '' %>"
              class="px-4 py-2 rounded-lg text-sm <%= p === currentPage ? 'bg-indigo-600 text-white' : 'bg-white border border-gray-300 text-gray-600 hover:bg-gray-50' %>">
              <%= p %>
            </a>
          <% } %>
        </div>
      <% } %>
    </div>
  </div>
</div>
