<div class="max-w-4xl mx-auto">
  <div class="flex items-center gap-2 mb-6">
    <a href="/admin/products" 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"><%= product ? 'Edit Product' : 'Add Product' %></h1>
  </div>

  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <form action="<%= product ? '/admin/products/' + product.id + '/edit' : '/admin/products/create' %>" method="POST" enctype="multipart/form-data">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Product Name *</label>
          <input type="text" name="name" value="<%= product ? product.name : '' %>" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
          <textarea name="shortDescription" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"><%= product ? product.shortDescription || '' : '' %></textarea>
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
          <textarea name="description" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"><%= product ? product.description || '' : '' %></textarea>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Price *</label>
          <input type="number" step="0.01" name="price" value="<%= product ? product.price : '' %>" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Compare Price (was)</label>
          <input type="number" step="0.01" name="comparePrice" value="<%= product ? product.comparePrice || '' : '' %>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Cost Price</label>
          <input type="number" step="0.01" name="costPrice" value="<%= product ? product.costPrice || '' : '' %>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">SKU</label>
          <input type="text" name="sku" value="<%= product ? product.sku || '' : '' %>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Stock Quantity</label>
          <input type="number" name="stockQuantity" value="<%= product ? product.stockQuantity : 0 %>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
          <select name="categoryId" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
            <option value="">No Category</option>
            <% if (typeof categories !== 'undefined' && categories) { categories.forEach(function(c) { %>
              <option value="<%= c.id %>" <%= product && product.categoryId == c.id ? 'selected' : '' %>><%= c.name %></option>
            <% }) } %>
          </select>
        </div>
        <div class="flex items-center gap-6 pt-6">
          <label class="flex items-center gap-2">
            <input type="checkbox" name="isFeatured" <%= product && product.isFeatured ? 'checked' : '' %> class="rounded">
            <span class="text-sm text-gray-700">Featured Product</span>
          </label>
          <% if (product) { %>
            <label class="flex items-center gap-2">
              <input type="checkbox" name="isActive" <%= product.isActive ? 'checked' : '' %> class="rounded">
              <span class="text-sm text-gray-700">Active</span>
            </label>
          <% } %>
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Meta Title (SEO)</label>
          <input type="text" name="metaTitle" value="<%= product ? product.metaTitle || '' : '' %>" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Meta Description (SEO)</label>
          <textarea name="metaDescription" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg"><%= product ? product.metaDescription || '' : '' %></textarea>
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Product Images</label>
          <input type="file" name="images" multiple accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
          <p class="text-xs text-gray-400 mt-1">First image is primary. Allowed: jpg, png, gif, webp (max 5MB each)</p>
        </div>
      </div>

      <!-- Existing Images -->
      <% if (product && product.images && product.images.length) { %>
        <div class="mt-4">
          <label class="block text-sm font-medium text-gray-700 mb-2">Current Images</label>
          <div class="flex gap-2 flex-wrap">
            <% product.images.forEach(function(img) { %>
              <div class="relative group">
                <img src="<%= img.imagePath %>" class="w-24 h-24 object-cover rounded-lg border">
              </div>
            <% }) %>
          </div>
        </div>
      <% } %>

      <div class="flex items-center gap-4 mt-8">
        <button type="submit" class="bg-indigo-600 text-white px-8 py-2.5 rounded-lg font-medium hover:bg-indigo-700">
          <%= product ? 'Update Product' : 'Create Product' %>
        </button>
        <a href="/admin/products" class="text-gray-500 hover:text-gray-700">Cancel</a>
      </div>
    </form>
  </div>
</div>
