<%
const cat = category || {};
const isEdit = !!category;
%>

<%- include('layout', { pageTitle: isEdit ? 'Edit Category' : 'New Category', activePage: 'categories' }) %>

<div class="section-header">
    <h2><i class="fas fa-folder"></i> <%= isEdit ? 'Edit Category' : 'Add Category' %></h2>
    <a href="/admin/categories" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Back</a>
</div>

<div class="form-card">
    <form method="POST" action="/admin/categories/<%= isEdit ? cat.id : '' %>" enctype="multipart/form-data">
        <div class="form-group">
            <label>Category Name *</label>
            <input type="text" name="name" required value="<%= cat.name || '' %>" placeholder="e.g. Xerox Machines">
        </div>

        <div class="form-group">
            <label>Image</label>
            <% if (isEdit && cat.image) { %>
            <div class="current-image">
                <img src="<%= cat.image %>" alt="Current image">
            </div>
            <% } %>
            <input type="file" name="image" accept="image/*">
            <small>Or enter image URL below:</small>
            <input type="text" name="image_url" value="<%= cat.image || '' %>" placeholder="https://example.com/image.jpg">
        </div>

        <div class="form-group">
            <label>Sort Order</label>
            <input type="number" name="sort_order" value="<%= cat.sort_order || 0 %>">
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Category</button>
            <a href="/admin/categories" class="btn btn-outline">Cancel</a>
        </div>
    </form>
</div>

<%- include('layout-footer') %>
