<div class="page-header d-print-none">
  <div class="row align-items-center"><div class="col"><h2 class="page-title"><%= title %></h2></div></div>
</div>
<div class="card">
  <div class="card-body">
    <% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>
    <form action="<%= category ? '/admin/categories/' + category.id : '/admin/categories' %>" method="post">
      <div class="mb-3">
        <label class="form-label">Name</label>
        <input type="text" name="name" class="form-control" value="<%= category ? category.name : '' %>" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Description</label>
        <textarea name="description" class="form-control" rows="3"><%= category ? (category.description || '') : '' %></textarea>
      </div>
      <div class="mb-3">
        <label class="form-label">Icon (Tabler icon name)</label>
        <input type="text" name="icon" class="form-control" value="<%= category ? (category.icon || '') : '' %>" placeholder="e.g. car">
      </div>
      <div class="mb-3">
        <label class="form-label">Mobile ID</label>
        <input type="text" name="mobile_id" class="form-control" value="<%= category ? (category.mobile_id || '') : '' %>" placeholder="food_dining">
      </div>
      <div class="mb-3">
        <label class="form-label">Label</label>
        <input type="text" name="label" class="form-control" value="<%= category ? (category.label || '') : '' %>">
      </div>
      <div class="mb-3">
        <label class="form-label">Type</label>
        <select name="category_type" class="form-select">
          <option value="offers" <%= category && category.category_type === 'offers' ? 'selected' : '' %>>Offers</option>
          <option value="services" <%= category && category.category_type === 'services' ? 'selected' : '' %>>Services</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Service Type</label>
        <input type="text" name="service_type" class="form-control" value="<%= category ? (category.service_type || '') : '' %>" placeholder="maintenance">
      </div>
      <div class="mb-3">
        <label class="form-label">Parent Category</label>
        <select name="parent_id" class="form-select">
          <option value="">None</option>
          <% categories.filter(c => !category || c.id !== category.id).forEach(function(cat) { %>
          <option value="<%= cat.id %>" <%= category && category.parent_id == cat.id ? 'selected' : '' %>><%= cat.name %></option>
          <% }); %>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Sort Order</label>
        <input type="number" name="sort_order" class="form-control" value="<%= category ? category.sort_order : 0 %>">
      </div>
      <div class="mb-3">
        <label class="form-check">
          <input type="checkbox" name="is_active" class="form-check-input" <%= !category || category.is_active ? 'checked' : '' %>>
          <span class="form-check-label">Active</span>
        </label>
      </div>
      <div class="form-footer">
        <button type="submit" class="btn btn-primary">Save</button>
        <a href="/admin/categories" class="btn btn-link">Cancel</a>
      </div>
    </form>
  </div>
</div>
