root = Card([header, searchForm, thresholdCallout, separator, itemRow1, itemRow2, itemRow3, itemRow4], "card", "column", "l")
header = CardHeader("Low Inventory Warning", "Items currently below the reorder threshold")
searchForm = Form("inventory-search", searchButtons, [searchField])
searchField = FormControl("Search items", searchInput, "Filter by product name or SKU")
searchInput = Input("search", "Search products...", "text")
searchButtons = Buttons([searchBtn, clearBtn], "row")
searchBtn = Button("Search", null, "primary")
clearBtn = Button("Clear", null, "tertiary")
thresholdCallout = Callout("info", "Reorder Threshold: 20 units", "Any product with stock at or below 20 units appears here. Threshold is configurable in Settings → Inventory.")
separator = Separator()
itemRow1 = Card([itemInfo1, reorderBtn1], "clear", "row", "m", "center", "between")
itemInfo1 = Card([itemName1, itemDetails1], "clear", "column", "xs")
itemName1 = TextContent("Organic Almond Milk 1L", "large-heavy")
itemDetails1 = TextContent("SKU: ALM-100 | Remaining: 12 units | Threshold: 20", "small")
reorderBtn1 = Button("Reorder", null, "primary", "normal", "medium")
itemRow2 = Card([itemInfo2, reorderBtn2], "clear", "row", "m", "center", "between")
itemInfo2 = Card([itemName2, itemDetails2], "clear", "column", "xs")
itemName2 = TextContent("Whole Grain Bread Loaf", "large-heavy")
itemDetails2 = TextContent("SKU: BRD-205 | Remaining: 8 units | Threshold: 20", "small")
reorderBtn2 = Button("Reorder", null, "primary", "normal", "medium")
itemRow3 = Card([itemInfo3, reorderBtn3], "clear", "row", "m", "center", "between")
itemInfo3 = Card([itemName3, itemDetails3], "clear", "column", "xs")
itemName3 = TextContent("Free-Range Eggs (12-pack)", "large-heavy")
itemDetails3 = TextContent("SKU: EGG-312 | Remaining: 15 units | Threshold: 20", "small")
reorderBtn3 = Button("Reorder", null, "primary", "normal", "medium")
itemRow4 = Card([itemInfo4, reorderBtn4], "clear", "row", "m", "center", "between")
itemInfo4 = Card([itemName4, itemDetails4], "clear", "column", "xs")
itemName4 = TextContent("Greek Yogurt Plain 500g", "large-heavy")
itemDetails4 = TextContent("SKU: YOG-450 | Remaining: 5 units | Threshold: 20", "small")
reorderBtn4 = Button("Reorder", null, "primary", "normal", "medium")