<%- include('_head') %>
  <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;">
    <h1 style="font-size:24px;">Products</h1>
    <div style="display:flex; gap:10px; flex-wrap:wrap;">
      <form method="post" action="/admin/import" style="display:inline;">
        <button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="image"></i> Import new images from folder</button>
      </form>
      <a class="btn btn-gold btn-sm" href="/admin/products/new"><i class="ic" data-ic="plus"></i> Add product</a>
    </div>
  </div>

  <% if (query.imported) { %><div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35); margin-bottom:14px;">Imported <b><%= query.imported %></b> new image(s).</div><% } %>
  <% if (query.saved) { %><div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35); margin-bottom:14px;">Saved successfully.</div><% } %>

  <form method="get" action="/admin/products" class="filter-bar panel" style="display:flex;">
    <input type="search" name="q" value="<%= q %>" placeholder="Search name or SKU" style="width:240px;">
    <select name="cat">
      <option value="0">All categories</option>
      <% categories.forEach(function(c){ %><option value="<%= c.id %>" <%= Number(cat) === c.id ? 'selected' : '' %>><%= c.name %></option><% }); %>
    </select>
    <select name="status">
      <option value="">All statuses</option>
      <option value="live" <%= status === 'live' ? 'selected' : '' %>>Live</option>
      <option value="draft" <%= status === 'draft' ? 'selected' : '' %>>Draft</option>
    </select>
    <select name="st">
      <option value="">All size types</option>
      <option value="none" <%= st === 'none' ? 'selected' : '' %>>No sizes</option>
      <option value="clothing" <%= st === 'clothing' ? 'selected' : '' %>>Clothing</option>
      <option value="shoes" <%= st === 'shoes' ? 'selected' : '' %>>Shoes</option>
    </select>
    <button class="btn btn-dark btn-sm" type="submit">Filter</button>
  </form>

  <form method="post" action="/admin/products/bulk/category">
  <div class="panel">
    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;">
      <b style="font-size:13px;">Bulk assign category:</b>
      <select name="category_id" style="width:auto;">
        <% categories.forEach(function(c){ %><option value="<%= c.id %>"><%= c.name %></option><% }); %>
      </select>
      <button class="btn btn-gold btn-sm" type="submit">Apply to selected</button>
    </div>
    <div style="overflow-x:auto;">
      <table class="table">
        <thead>
          <tr>
            <th style="width:34px;"><input type="checkbox" id="selectAll"></th>
            <th>Product</th><th>Category</th><th>Price</th><th>Stock</th><th>Size</th><th>Status</th><th>Featured</th><th></th>
          </tr>
        </thead>
        <tbody>
          <% if (products.length) { products.forEach(function(p){ %>
            <tr>
              <td><input type="checkbox" name="ids" value="<%= p.id %>" class="rowCheck"></td>
              <td>
                <div style="display:flex; align-items:center; gap:12px;">
                  <% if (p.image) { %><img class="admin-thumb" src="/public/images/products/<%= p.image %>" alt=""><% } %>
                  <div>
                    <div style="font-weight:700; font-size:13.5px; max-width:280px;"><%= p.name %></div>
                    <div style="color:var(--muted); font-size:12px;">SKU <%= p.sku || '—' %> · ID <%= p.id %></div>
                  </div>
                </div>
              </td>
              <td><%= p.category_name || '<span style="color:var(--red);">Uncategorised</span>' %></td>
              <td><%= p.price != null && p.price > 0 ? money(p.price) : '<span style="color:var(--blue); font-weight:700;">Set price</span>' %></td>
              <td><b><%= p.stock %></b></td>
              <td><% if (p.size_type === 'clothing' || p.size_type === 'shoes') { %><span class="status-tag st-live"><%= p.size_type === 'clothing' ? 'Clothing' : 'Shoes' %></span><div style="color:var(--muted); font-size:11.5px; margin-top:3px;"><%= p.sizes ? p.sizes.split(',').length : 0 %> sizes</div><% } else { %><span style="color:var(--muted); font-size:12px;">No sizes</span><% } %></td>
              <td><span class="status-tag st-<%= p.status %>"><%= p.status %></span></td>
              <td><%= p.featured ? '★' : '—' %></td>
              <td><div class="admin-actions"><a class="btn btn-dark btn-sm" href="/admin/products/<%= p.id %>"><i class="ic" data-ic="edit"></i> Edit</a></div></td>
            </tr>
          <% }); } else { %>
            <tr><td colspan="9" style="color:var(--muted); text-align:center; padding:30px;">No products found.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
  </form>
<%- include('_foot') %>
