<%- include('layout', { pageTitle: 'Categories', activePage: 'categories' }) %>

<div class="section-header">
    <h2><i class="fas fa-folder"></i> Categories</h2>
    <a href="/admin/categories/new" class="btn btn-primary"><i class="fas fa-plus"></i> Add Category</a>
</div>

<% if (categories.length === 0) { %>
<div class="empty-state">
    <i class="fas fa-folder-open"></i>
    <p>No categories yet. <a href="/admin/categories/new">Add your first category</a>.</p>
</div>
<% } else { %>
<div class="table-responsive">
    <table class="admin-table">
        <thead>
            <tr>
                <th>Image</th>
                <th>Name</th>
                <th>Slug</th>
                <th>Products</th>
                <th>Sort Order</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <% categories.forEach(cat => { %>
            <tr>
                <td><img src="<%= cat.image || '/uploads/no-image.png' %>" alt="<%= cat.name %>" class="table-thumb"></td>
                <td><strong><%= cat.name %></strong></td>
                <td><code><%= cat.slug %></code></td>
                <td><%= cat.product_count %></td>
                <td><%= cat.sort_order %></td>
                <td class="actions-cell">
                    <a href="/admin/categories/<%= cat.id %>/edit" class="btn btn-sm btn-outline" title="Edit"><i class="fas fa-edit"></i></a>
                    <form method="POST" action="/admin/categories/<%= cat.id %>/delete" class="inline-form" onsubmit="return confirm('Delete this category and all its products?')">
                        <button type="submit" class="btn btn-sm btn-danger" title="Delete"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            <% }); %>
        </tbody>
    </table>
</div>
<% } %>

<%- include('layout-footer') %>
