<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <%- include('partials/head') %>
</head>
<body class="bg-surface text-on-surface selection:bg-primary-fixed">
<%- include('partials/sidebar') %>
<%- include('partials/flash') %>

<div class="ml-64 min-h-screen flex flex-col">
  <%- include('partials/topbar') %>

  <main class="p-8 bg-surface-container-low flex-1">
    <div class="max-w-6xl mx-auto space-y-8">

      <!-- Page Header -->
      <div class="flex items-end justify-between">
        <div>
          <h1 class="text-3xl font-extrabold font-headline text-on-surface tracking-tight">Products</h1>
          <p class="text-on-surface-variant mt-1">Manage your product catalog and inventory.</p>
        </div>
        <div class="flex gap-3">
          <button class="px-4 py-2 bg-secondary-container text-on-secondary-container rounded-lg font-medium flex items-center gap-2 hover:bg-surface-container-high transition-colors text-sm">
            <span class="material-symbols-outlined text-[18px]">file_download</span>
            Import
          </button>
          <a href="/products/new" class="px-4 py-2 bg-gradient-to-r from-primary to-primary-container text-on-primary rounded-lg font-semibold flex items-center gap-2 shadow-sm text-sm">
            <span class="material-symbols-outlined text-[18px]">add</span>
            Add Product
          </a>
        </div>
      </div>

      <!-- Status Tabs + Products Grid -->
      <div class="bg-surface-container-lowest rounded-xl border border-outline-variant/10 overflow-hidden shadow-sm">
        <div class="p-4 flex items-center gap-1 bg-surface-container p-1 rounded-lg m-4 w-fit">
          <a href="/products?status=all" class="px-4 py-1.5 rounded-md text-sm font-semibold transition-colors
            <%= status === 'all' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">
            All (<%= (active_count||0)+(draft_count||0)+(archived_count||0) %>)
          </a>
          <a href="/products?status=active" class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
            <%= status === 'active' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">
            Active (<%= active_count||0 %>)
          </a>
          <a href="/products?status=draft" class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
            <%= status === 'draft' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">
            Draft (<%= draft_count||0 %>)
          </a>
          <a href="/products?status=archived" class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
            <%= status === 'archived' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">
            Archived (<%= archived_count||0 %>)
          </a>
        </div>

        <div class="overflow-x-auto">
          <table class="w-full text-left">
            <thead>
              <tr class="bg-surface-container/30">
                <th class="py-4 px-6"><input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/></th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Product</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">Price</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-center">Stock</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">SKU</th>
                <th class="py-4 px-4"></th>
              </tr>
            </thead>
            <tbody class="divide-y divide-outline-variant/10">
              <% if (products.length === 0) { %>
              <tr>
                <td colspan="7" class="px-6 py-16 text-center">
                  <span class="material-symbols-outlined text-4xl text-on-surface-variant mb-4 block">inventory_2</span>
                  <p class="text-on-surface-variant font-medium">No products yet.</p>
                  <a href="/products/new" class="mt-4 inline-block bg-primary text-white px-6 py-2.5 rounded-lg font-bold text-sm">Add Your First Product</a>
                </td>
              </tr>
              <% } %>
              <% products.forEach(function(p, i) { %>
              <tr class="hover:bg-surface-container-low transition-colors group <%= i % 2 === 1 ? 'bg-surface-container-low/20' : '' %>">
                <td class="py-4 px-6"><input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/></td>
                <td class="py-4 px-4">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center flex-shrink-0">
                      <span class="material-symbols-outlined text-on-surface-variant">inventory_2</span>
                    </div>
                    <div>
                      <p class="font-bold text-sm text-on-surface"><%= p.title %></p>
                      <p class="text-xs text-on-surface-variant truncate max-w-[200px]"><%= p.seo_description || '' %></p>
                    </div>
                  </div>
                </td>
                <td class="py-4 px-4">
                  <% if (p.status === 'active') { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-primary-fixed text-on-primary-fixed-variant">Active</span>
                  <% } else if (p.status === 'draft') { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-secondary-container text-on-secondary-container">Draft</span>
                  <% } else { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-surface-container-highest text-on-surface-variant">Archived</span>
                  <% } %>
                </td>
                <td class="py-4 px-4 text-right font-bold text-sm">$<%= parseFloat(p.price).toFixed(2) %></td>
                <td class="py-4 px-4 text-center">
                  <% if (p.stock > 10) { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-primary-fixed text-on-primary-fixed-variant"><%= p.stock %> in stock</span>
                  <% } else if (p.stock > 0) { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary-fixed text-on-tertiary-fixed-variant"><%= p.stock %> left</span>
                  <% } else { %>
                  <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-error-container text-on-error-container">Out of stock</span>
                  <% } %>
                </td>
                <td class="py-4 px-4 text-sm text-on-surface-variant font-mono"><%= p.sku || '—' %></td>
                <td class="py-4 px-4 text-right">
                  <div class="opacity-0 group-hover:opacity-100 flex items-center gap-2 justify-end transition-all">
                    <a href="/products/<%= p.id %>/edit" class="p-1 hover:bg-surface-container rounded transition-colors">
                      <span class="material-symbols-outlined text-on-surface-variant text-sm">edit</span>
                    </a>
                    <form action="/products/<%= p.id %>/delete" method="POST" onsubmit="return confirm('Delete this product?')">
                      <button type="submit" class="p-1 hover:bg-error-container rounded transition-colors">
                        <span class="material-symbols-outlined text-error text-sm">delete</span>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </main>
</div>
</body>
</html>
