root = Card([header, searchForm, thresholdCallout, itemsList])
header = CardHeader("Low Inventory Warning", "Items below reorder threshold")
searchForm = Form("inventory-search", searchButtons, [searchField])
searchField = FormControl("Search items", searchInput, "Type to filter by name or SKU")
searchInput = Input("search", "Search items...", "text")
searchButtons = Buttons([clearBtn])
clearBtn = Button("Clear", null, "tertiary")
thresholdCallout = Callout("info", "Reorder Threshold", "Items with 10 or fewer units remaining trigger this warning. Current threshold: 10 units")
itemsList = Card([item1Row, item2Row, item3Row, item4Row, item5Row], "clear", "column", "m")
item1Row = Card([item1Info, item1Action], "card", "row", "m", "center", "between")
item1Info = Card([item1Name, item1Stock], "clear", "column", "xs")
item1Name = TextContent("Organic Almond Milk 1L", "large-heavy")
item1Stock = TextContent("Remaining: 3 units", "small")
item1Action = Buttons([reorderBtn1])
reorderBtn1 = Button("Reorder", ["reorder", "SKU-ALM-1L"], "primary", "normal", "small")
item2Row = Card([item2Info, item2Action], "card", "row", "m", "center", "between")
item2Info = Card([item2Name, item2Stock], "clear", "column", "xs")
item2Name = TextContent("Whole Grain Bread Loaf", "large-heavy")
item2Stock = TextContent("Remaining: 7 units", "small")
item2Action = Buttons([reorderBtn2])
reorderBtn2 = Button("Reorder", ["reorder", "SKU-BRD-WG"], "primary", "normal", "small")
item3Row = Card([item3Info, item3Action], "card", "row", "m", "center", "between")
item3Info = Card([item3Name, item3Stock], "clear", "column", "xs")
item3Name = TextContent("Free-Range Eggs 12ct", "large-heavy")
item3Stock = TextContent("Remaining: 2 units", "small")
item3Action = Buttons([reorderBtn3])
reorderBtn3 = Button("Reorder", ["reorder", "SKU-EGG-12"], "primary", "normal", "small")
item4Row = Card([item4Info, item4Action], "card", "row", "m", "center", "between")
item4Info = Card([item4Name, item4Stock], "clear", "column", "xs")
item4Name = TextContent("Greek Yogurt Plain 500g", "large-heavy")
item4Stock = TextContent("Remaining: 9 units", "small")
item4Action = Buttons([reorderBtn4])
reorderBtn4 = Button("Reorder", ["reorder", "SKU-YOG-GR5"], "primary", "normal", "small")
item5Row = Card([item5Info, item5Action], "card", "row", "m", "center", "between")
item5Info = Card([item5Name, item5Stock], "clear", "column", "xs")
item5Name = TextContent("Avocados (Hass) 4pk", "large-heavy")
item5Stock = TextContent("Remaining: 5 units", "small")
item5Action = Buttons([reorderBtn5])
reorderBtn5 = Button("Reorder", ["reorder", "SKU-AVO-4PK"], "primary", "normal", "small")