<%- include('./header') %>
<main class="container mx-auto my-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">
      Products in the Category
    </h1>
    <div class="text-sm text-gray-600 mb-4">
      <a href="/" class="text-gray-600 hover:text-gray-800">Home</a> > <a href="#"
        class="text-gray-600 hover:text-gray-800">Single category</a>
    </div>

    <!-- Products Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <% if (locals.categories) { %>
        <% categories.forEach(product => { %>
          <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
            <!-- Product Image -->
            <img src="<%= product.images[0] %>" alt="<%= product.name %>" class="h-48 w-full object-cover">
            
            <!-- Product Details -->
            <div class="p-4">
              <h2 class="text-lg font-semibold text-gray-800"><%= product.name %></h2>
              <p class="text-gray-600"><%= product.description1 %></p>

              <!-- Price and Stock -->
              <div class="mt-3 flex justify-between items-center">
                <span class="text-gray-800 font-bold">$<%= product.price %></span>
                <span class="text-sm text-green-500"><%= product.stock > 0 ? 'In Stock' : 'Out of Stock' %></span>
              </div>

              <!-- View Product Button -->
              <a href="/product/<%= product._id %>" class="mt-4 block text-center bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-300">
                View Product
              </a>
            </div>
          </div>
        <% }) %>
      <% } else { %>
        <p class="text-gray-500 text-lg">No products found in this category.</p>
      <% } %>
    </div>
  </main>