problem: can't see how many products ar remaining

src/components/ProductCard.svelte

@@ -1,11 +1,43 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card/index.js';
-	import { Product, Rocket } from '@/event_helpers/rockets';
+	import {
+		Product as ProductEvent,
+		Rocket,
+		RocketProduct,
+		ZapPurchase
+	} from '@/event_helpers/rockets';
 	import AddProductToRocket from './AddProductToRocket.svelte';
 	import PayNow from './PayNow.svelte';
+	import { onMount } from 'svelte';
+	import { devmode } from '@/stores/session';
 
-	export let product: Product;
+	export let product: ProductEvent;
 	export let rocket: Rocket;
+	export let unratifiedZaps: Map<string, ZapPurchase> | undefined = undefined;
+
+	let productFromRocket = rocket.Products().get(product.ID());
+
+	onMount(() => {
+		if (!product.Validate()) {
+			throw new Error('this should not happen');
+		}
+	});
+
+	function remainingProducts(product: RocketProduct, zaps?: Map<string, ZapPurchase>): number {
+		let numberOfPurchases = 0;
+		if (zaps) {
+			for (let [_, zap] of zaps) {
+				if (zap.ProductID == product.ID()) {
+					numberOfPurchases++;
+				}
+			}
+		}
+		let remaining = product.MaxPurchases() - numberOfPurchases;
+		if (remaining < 0) {
+			remaining = 0;
+		}
+		return remaining;
+	}
 </script>
 
 {#if product.Validate()}
@@ -34,18 +66,30 @@
 				<img src={product.CoverImage()} alt="cover" class="aspect-square object-cover" />
 			</div>
 		{/if}
-		<Card.Footer class="flex items-center justify-center pt-2">
-			{#if !rocket.Products().get(product.ID())}
+		<Card.Footer class="flex flex-col items-center justify-center pt-2">
+			{#if !rocket.Products().get(product.ID()) && !productFromRocket}
 				<AddProductToRocket {product} {rocket} />
-			{:else}
-				<PayNow {product} rocketProduct={rocket.Products().get(product.ID())} {rocket} />
+			{:else if productFromRocket}
+				{#if productFromRocket.MaxPurchases() && unratifiedZaps}
+					<div class="flex flex-nowrap">
+						{remainingProducts(productFromRocket, unratifiedZaps)} available
+					</div>
+				{/if}
+				<PayNow
+					disabled={productFromRocket.MaxPurchases() > 0 &&
+						remainingProducts(productFromRocket, unratifiedZaps) == 0}
+					{product}
+					rocketProduct={rocket.Products().get(product.ID())}
+					{rocket}
+				/>
 			{/if}
-			<a
-				href="#"
-				on:click={() => {
-					console.log(product);
-				}}>print to console</a
-			>
+			{#if $devmode}
+				<a
+					href="#"
+					on:click={() => {
+						console.log(product);
+					}}>print to console</a
+				>{/if}
 		</Card.Footer>
 	</Card.Root>
 {/if}