Admin Login

<!-- Add/Edit Product Form -->
<div id="product-form-container" style="background: rgb(var(--color-neutral)); border: 1px solid rgb(var(--color-neutral-200)); border-radius: 12px; padding: 2rem; margin-bottom: 2rem;">
  <h2 id="form-title">Add New Product</h2>
  <form id="product-form">
    <input type="hidden" id="product-id">
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
      <div>
        <label for="product-name" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Product Name *</label>
        <input type="text" id="product-name" required style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
      </div>
      <div>
        <label for="product-slug" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">URL Slug *</label>
        <input type="text" id="product-slug" required style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
        <small style="color: rgb(var(--color-neutral-500)); font-size: 0.875rem;">e.g., warhammer-starter-set</small>
      </div>
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="product-description" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Description</label>
      <textarea id="product-description" rows="3" style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px; font-family: inherit;"></textarea>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
      <div>
        <label for="product-price" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Price (pence) *</label>
        <input type="number" id="product-price" required style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
        <small style="color: rgb(var(--color-neutral-500)); font-size: 0.875rem;">£10.00 = 1000 pence</small>
      </div>
      <div>
        <label for="product-stock" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Stock Quantity *</label>
        <input type="number" id="product-stock" required value="0" style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
      </div>
      <div>
        <label for="product-category" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Category</label>
        <input type="text" id="product-category" style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
      </div>
    </div>

    <div style="margin-bottom: 1rem;">
      <label for="product-image" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Image URL</label>
      <input type="text" id="product-image" placeholder="https://..." style="width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--color-neutral-300)); border-radius: 6px;">
    </div>

    <div style="margin-bottom: 1.5rem;">
      <label style="display: flex; align-items: center; cursor: pointer;">
        <input type="checkbox" id="product-active" checked style="margin-right: 0.5rem;">
        <span style="font-weight: 600;">Active (visible in shop)</span>
      </label>
    </div>

    <div style="display: flex; gap: 1rem;">
      <button type="submit" id="save-btn" style="flex: 1; padding: 0.75rem; background: rgb(var(--color-primary-600)); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">
        Save Product
      </button>
      <button type="button" id="cancel-btn" style="display: none; padding: 0.75rem 1.5rem; background: rgb(var(--color-neutral-200)); border: none; border-radius: 6px; cursor: pointer;">
        Cancel
      </button>
    </div>
  </form>
</div>

<!-- Products List -->
<div style="background: rgb(var(--color-neutral)); border: 1px solid rgb(var(--color-neutral-200)); border-radius: 12px; padding: 2rem;">
  <h2>Products</h2>
  <div id="products-list"></div>
</div>