<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
  <%- include('partials/admin-nav') %>
  
  <div class="admin-container">
    <h1><%= title %></h1>
    
    <form action="<%= product ? '/admin/products/edit/' + product.id : '/admin/products/add' %>" method="POST" enctype="multipart/form-data" class="admin-form">
      <div class="form-group">
        <label for="name">Product Name *</label>
        <input type="text" id="name" name="name" value="<%= product ? product.name : '' %>" required>
      </div>

      <div class="form-group">
        <label for="category">Category *</label>
        <select id="category" name="category" required>
          <option value="Livestock" <%= product && product.category === 'Livestock' ? 'selected' : '' %>>Livestock</option>
          <option value="Dairy" <%= product && product.category === 'Dairy' ? 'selected' : '' %>>Dairy</option>
          <option value="Poultry" <%= product && product.category === 'Poultry' ? 'selected' : '' %>>Poultry</option>
          <option value="Agricultural" <%= product && product.category === 'Agricultural' ? 'selected' : '' %>>Agricultural</option>
        </select>
      </div>

      <div class="form-group">
        <label for="price">Price Display *</label>
        <input type="text" id="price" name="price" value="<%= product ? product.price : 'Contact for Quote' %>" required>
      </div>

      <div class="form-group">
        <label for="description">Description *</label>
        <textarea id="description" name="description" rows="4" required><%= product ? product.description : '' %></textarea>
      </div>

      <div class="form-group">
        <label for="image">Product Image</label>
        <input type="file" id="image" name="image" accept="image/*">
        <% if (product && product.image) { %>
          <p>Current image: <img src="<%= product.image %>" alt="Current" style="max-width: 200px; margin-top: 10px;"></p>
        <% } %>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save Product</button>
        <a href="/admin/products" class="btn btn-secondary">Cancel</a>
      </div>
    </form>
  </div>
</body>
</html>
