<%- include('_head') %>
  <h1 style="font-size:24px; margin-bottom:18px;">Categories</h1>

  <div class="panel">
    <h3>Add category</h3>
    <form method="post" action="/admin/categories" style="display:flex; gap:10px; flex-wrap:wrap; align-items:end;">
      <div class="form-field" style="flex:1; min-width:180px;"><label for="name">Name</label><input id="name" name="name" required></div>
      <div class="form-field" style="flex:1; min-width:180px;"><label for="slug">Slug (optional)</label><input id="slug" name="slug" placeholder="e.g. watches"></div>
      <div class="form-field" style="flex:2; min-width:240px;"><label for="description">Description</label><input id="description" name="description"></div>
      <button class="btn btn-gold btn-sm" type="submit"><i class="ic" data-ic="plus"></i> Add</button>
    </form>
  </div>

  <div class="panel">
    <div style="overflow-x:auto;">
      <table class="table">
        <thead><tr><th>Category</th><th>Slug</th><th>Products</th><th></th></tr></thead>
        <tbody>
          <% categories.forEach(function(c){ %>
            <tr>
              <form method="post" action="/admin/categories/<%= c.id %>" id="cf<%= c.id %>"></form>
              <td><input name="name" value="<%= c.name %>" form="cf<%= c.id %>" style="min-width:170px;"></td>
              <td><input name="slug" value="<%= c.slug %>" form="cf<%= c.id %>" style="min-width:140px;"></td>
              <td><b><%= c.product_count %></b></td>
              <td>
                <div class="admin-actions">
                  <button class="btn btn-dark btn-sm" type="submit" form="cf<%= c.id %>"><i class="ic" data-ic="check"></i> Save</button>
                  <form method="post" action="/admin/categories/<%= c.id %>/delete" onsubmit="return confirm('Delete category? Products become uncategorised.');">
                    <button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="trash"></i></button>
                  </form>
                </div>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
<%- include('_foot') %>
