<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex items-center gap-2 mb-6">
    <a href="/account" class="text-gray-500 hover:text-indigo-600"><i class="fas fa-arrow-left"></i></a>
    <h1 class="text-2xl font-bold text-gray-800">My Wishlist</h1>
  </div>

  <% if (typeof wishlist !== 'undefined' && wishlist && wishlist.length) { %>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <% wishlist.forEach(function(item) { %>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden group relative">
          <a href="/products/<%= item.Product.slug %>">
            <div class="aspect-square bg-gray-100">
              <% if (item.Product.images && item.Product.images.length) { %>
                <img src="<%= item.Product.images[0].imagePath %>" class="w-full h-full object-cover group-hover:scale-105 transition">
              <% } else { %>
                <div class="w-full h-full flex items-center justify-center text-gray-400"><i class="fas fa-image text-3xl"></i></div>
              <% } %>
            </div>
            <div class="p-4">
              <h3 class="font-medium text-sm truncate"><%= item.Product.name %></h3>
              <span class="text-indigo-600 font-bold text-lg">₹<%= parseFloat(item.Product.price).toFixed(2) %></span>
            </div>
          </a>
          <form action="/account/wishlist/remove" method="POST" class="absolute top-2 right-2">
            <input type="hidden" name="productId" value="<%= item.Product.id %>">
            <button type="submit" class="bg-white w-8 h-8 rounded-full shadow flex items-center justify-center text-red-500 hover:text-red-700">
              <i class="fas fa-heart"></i>
            </button>
          </form>
        </div>
      <% }) %>
    </div>
  <% } else { %>
    <div class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-200">
      <i class="fas fa-heart text-5xl text-gray-300 mb-4"></i>
      <h3 class="text-lg font-medium text-gray-600">Your wishlist is empty</h3>
      <a href="/products" class="inline-block mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg text-sm hover:bg-indigo-700">Browse Products</a>
    </div>
  <% } %>
</div>
