<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Products</h1>
  <a href="/admin/products/create" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700"><i class="fas fa-plus mr-1"></i> Add Product</a>
</div>

<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
  <form method="GET" class="flex flex-wrap gap-4 items-end">
    <div><label class="block text-xs text-gray-500 mb-1">Search</label><input type="text" name="search" value="<%= typeof search !== 'undefined' ? search : '' %>" placeholder="Product name..." class="px-3 py-2 border border-gray-300 rounded-lg text-sm w-64"></div>
    <div><label class="block text-xs text-gray-500 mb-1">Category</label>
      <select name="category" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
        <option value="">All Categories</option>
        <% if (typeof categories !== 'undefined' && categories) { categories.forEach(function(c) { %>
          <option value="<%= c.id %>" <%= category == c.id ? 'selected' : '' %>><%= c.name %></option>
        <% }) } %>
      </select>
    </div>
    <div><label class="block text-xs text-gray-500 mb-1">Status</label>
      <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
        <option value="">All</option>
        <option value="active" <%= status === 'active' ? 'selected' : '' %>>Active</option>
        <option value="inactive" <%= status === 'inactive' ? 'selected' : '' %>>Inactive</option>
      </select>
    </div>
    <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-700">Filter</button>
    <a href="/admin/products" class="text-sm text-gray-500 hover:text-gray-700 py-2">Clear</a>
  </form>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Product</th>
        <th class="px-6 py-4 font-medium">SKU</th>
        <th class="px-6 py-4 font-medium">Category</th>
        <th class="px-6 py-4 font-medium text-right">Price</th>
        <th class="px-6 py-4 font-medium text-right">Stock</th>
        <th class="px-6 py-4 font-medium text-center">Status</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof products !== 'undefined' && products && products.length) { %>
        <% products.forEach(function(product) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                  <% if (product.images && product.images.length) { %><img src="<%= product.images[0].imagePath %>" class="w-full h-full object-cover"><% } else { %><div class="w-full h-full flex items-center justify-center text-gray-400"><i class="fas fa-image text-sm"></i></div><% } %>
                </div>
                <div><p class="font-medium text-gray-800"><%= product.name %></p></div>
              </div>
            </td>
            <td class="px-6 py-4 text-gray-500"><%= product.sku || '-' %></td>
            <td class="px-6 py-4"><%= product.Category ? product.Category.name : '-' %></td>
            <td class="px-6 py-4 text-right font-medium">₹<%= parseFloat(product.price).toFixed(2) %></td>
            <td class="px-6 py-4 text-right"><span class="<%= product.stockQuantity <= 5 ? 'text-red-600 font-medium' : '' %>"><%= product.stockQuantity %></span></td>
            <td class="px-6 py-4 text-center">
              <span class="px-2 py-0.5 rounded-full text-xs font-medium <%= product.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= product.isActive ? 'Active' : 'Inactive' %></span>
            </td>
            <td class="px-6 py-4 text-right">
              <a href="/admin/products/<%= product.id %>/edit" class="text-indigo-600 hover:underline text-sm"><i class="fas fa-edit"></i></a>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="7" class="px-6 py-12 text-center text-gray-400">No products found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<% if (typeof totalPages !== 'undefined' && totalPages > 1) { %>
  <div class="flex justify-center mt-6 gap-2">
    <% for (let p = 1; p <= totalPages; p++) { %>
      <a href="?page=<%= p %><%= search ? '&search='+search : '' %>" 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' %>"><%= p %></a>
    <% } %>
  </div>
<% } %>
