---
const mockInventory = [
  { name: "Charizard", set: "Base Set", condition: "NM", qty: 2, price: 350, market: 400, gain: 50 },
  { name: "Pikachu", set: "Shining Legends", condition: "LP", qty: 5, price: 15, market: 20, gain: 5 },
];
---

<div class="table-responsive">
  <table class="table table-dark table-striped table-hover align-middle">
    <thead>
      <tr>
        <th>Card</th>
        <th>Set</th>
        <th>Condition</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Market</th>
        <th>Gain/Loss</th>
      </tr>
    </thead>
    <tbody>
      {mockInventory.map(card => (
        <tr>
          <td>{card.name}</td>
          <td>{card.set}</td>
          <td>{card.condition}</td>
          <td>{card.qty}</td>
          <td>${card.price}</td>
          <td>${card.market}</td>
          <td class={card.gain >= 0 ? "text-success" : "text-danger"}>
            {card.gain >= 0 ? "+" : "-"}${Math.abs(card.gain)}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
</div>