---
import Admin from '../../../layouts/Admin.astro';
import { listProducts } from '../../../lib/store.js';
import { formatPrice } from '../../../lib/seed.js';
const products = await listProducts();
const stockBadge = (s) => s==null ? ['gray','—'] : s<=20 ? ['red', s+' Stk'] : s<=40 ? ['amber', s+' Stk'] : ['green', s+' Stk'];
---
<Admin title="Produkte" active="produkte" crumbs={[{label:'Produkte'}]}>
  <a slot="actions" href="/admin/produkte/neu" class="s-btn s-btn-primary">+ Produkt hinzufügen</a>
  <div class="s-card">
    <div class="s-table-wrap"><table class="s-table">
      <thead><tr><th>Produkt</th><th>Status</th><th>Kategorie</th><th>Bestand</th><th class="num">Preis</th></tr></thead>
      <tbody>
        {products.map((p) => { const [sc,sl] = stockBadge(p.stock); return (
          <tr onclick={`location.href='/admin/produkte/${p.id}'`}>
            <td><span class="s-prodcell"><img src={p.cardImage} alt=""/><span><span class="nm">{p.shortName}</span><div class="s-muted" style="font-size:12px">{p.slug}</div></span></span></td>
            <td>{p.featured ? <span class="s-badge green">Aktiv · Featured</span> : <span class="s-badge green">Aktiv</span>}</td>
            <td>{p.category}</td>
            <td><span class={`s-badge ${sc}`}>{sl}</span></td>
            <td class="num">{formatPrice(p.priceCents)}</td>
          </tr>); })}
      </tbody>
    </table></div>
  </div>
</Admin>
