<%- include('layout', { pageTitle: 'Products', activePage: 'products' }) %>

<div class="section-header">
    <h2><i class="fas fa-box"></i> Products</h2>
    <div class="header-actions">
        <form class="filter-form" method="GET" action="/admin/products">
            <select name="category" onchange="this.form.submit()">
                <option value="">All Categories</option>
                <% categories.forEach(cat => { %>
                <option value="<%= cat.id %>" <%= typeof filterCategory !== 'undefined' && filterCategory == cat.id ? 'selected' : '' %>><%= cat.name %></option>
                <% }); %>
            </select>
        </form>
        <a href="/admin/products/new" class="btn btn-primary"><i class="fas fa-plus"></i> Add Product</a>
    </div>
</div>

<% if (products.length === 0) { %>
<div class="empty-state">
    <i class="fas fa-box-open"></i>
    <p>No products found. <a href="/admin/products/new">Add your first product</a>.</p>
</div>
<% } else { %>
<div class="table-responsive">
    <table class="admin-table">
        <thead>
            <tr>
                <th>Image</th>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>
                <th>Min Order</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <% products.forEach(p => { %>
            <tr>
                <td><img src="<%= p.image || '/uploads/no-image.png' %>" alt="<%= p.name %>" class="table-thumb"></td>
                <td><strong><%= p.name %></strong></td>
                <td><%= p.category_name || '-' %></td>
                <td><%= p.price || '-' %></td>
                <td><%= p.min_order || '-' %></td>
                <td class="actions-cell">
                    <a href="/admin/products/<%= p.id %>/edit" class="btn btn-sm btn-outline" title="Edit"><i class="fas fa-edit"></i></a>
                    <form method="POST" action="/admin/products/<%= p.id %>/delete" class="inline-form" onsubmit="return confirm('Delete this product?')">
                        <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') %>
