<%- include('../partials/head',{pageTitle,bodyClass:'admin-shell'}) %><%- include('nav') %>
<main class="admin-main">
  <h1>Products</h1>
  <div class="dual-admin wide">
    <section class="admin-panel">
      <h2><%= editItem?'Edit product':'Add product' %></h2>
      <form method="post" enctype="multipart/form-data" action="<%= editItem?'/admin/products/'+editItem.id+'?_method=PUT':'/admin/products' %>" class="stack-form">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <label><span>Name</span><input name="name" value="<%= editItem?.name||'' %>" required></label>
        <label><span>URL slug</span><input name="slug" value="<%= editItem?.slug||'' %>" placeholder="auto from name if blank"></label>
        <label><span>Category</span><select name="category_id"><% cats.forEach(cat=>{ %><option value="<%= cat.id %>" <%= String(editItem?.category_id)===String(cat.id)?'selected':'' %>><%= cat.name %></option><% }) %></select></label>
        <div class="two-col">
          <label><span>Price</span><input name="price" type="number" step="0.01" value="<%= editItem?.price||'' %>"></label>
          <label><span>Compare-at price</span><input name="compare_price" type="number" step="0.01" value="<%= editItem?.compare_price||'' %>"></label>
        </div>
        <label class="full-row" data-media-field>
          <span>Product image</span>
          <input name="image" value="<%= editItem?.image||'' %>" data-media placeholder="Choose from the library">
        </label>
        <div class="two-col">
          <label><span>Badge</span><input name="badge" value="<%= editItem?.badge||'' %>" placeholder="e.g. In stock"></label>
          <label><span>Style / system tag</span><input name="style_tag" value="<%= editItem?.style_tag||'' %>"></label>
        </div>
        <label><span>Room / type tag</span><input name="room_tag" value="<%= editItem?.room_tag||'' %>"></label>
        <label><span>Short description</span><input name="short_description" value="<%= editItem?.short_description||'' %>"></label>
        <label><span>Full description</span><textarea name="description" rows="5"><%= editItem?.description||'' %></textarea></label>
        <div class="three-col">
          <label class="check-row"><input type="checkbox" name="is_featured" <%= editItem?.is_featured?'checked':'' %>> Featured</label>
          <label class="check-row"><input type="checkbox" name="is_new" <%= editItem?.is_new?'checked':'' %>> New</label>
          <label class="check-row"><input type="checkbox" name="fast_shipping" <%= editItem?.fast_shipping?'checked':'' %>> Fast shipping</label>
        </div>
        <label><span>Stock</span><input name="stock" type="number" value="<%= editItem?.stock||0 %>"></label>
        <label><span>SEO title</span><input name="seo_title" value="<%= editItem?.seo_title||'' %>"></label>
        <label><span>SEO description</span><textarea name="seo_description" rows="3"><%= editItem?.seo_description||'' %></textarea></label>
        <button class="btn btn-primary"><%= editItem?'Update product':'Create product' %></button>
      </form>
    </section>
    <section class="admin-panel">
      <h2>All products</h2>
      <table>
        <tr><th>Name</th><th>Category</th><th>Price</th><th></th></tr>
        <% items.forEach(item=>{ %>
          <tr>
            <td><%= item.name %></td>
            <td><%= item.category_name %></td>
            <td><%= money(item.price) %></td>
            <td class="row-actions">
              <a href="/admin/products?edit=<%= item.id %>">Edit</a>
              <form method="post" action="/admin/products/<%= item.id %>/delete"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button>Delete</button></form>
            </td>
          </tr>
        <% }) %>
      </table>
    </section>
  </div>
</main>
</body></html>
