root = Card([header, kpiSection, ticketsHeading, ticketsTabs, newTicket, followUps], "card", "column", "l")

header = CardHeader("Support Inbox", "Morning view · Tuesday, 3 June 2025")

kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("At a glance", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Open tickets", "Avg first response", "Resolved last 24h"])
kpiValue = Col("Value", ["6", "1h 42m", "23"])

ticketsHeading = Heading("Recent tickets", "h3")
ticketsTabs = Tabs([allTab, highTab])

allTab = TabItem("all", "All tickets", [allTicketsTable])
allTicketsTable = Table([ticketId, ticketSubject, ticketCustomer, ticketPriority])
ticketId = Col("ID", ["#4281", "#4280", "#4279", "#4278", "#4277"])
ticketSubject = Col("Subject", ["Login failure on mobile app", "Invoice doesn't match order total", "Dark mode toggle missing in settings", "Refund not processed after 5 days", "Rate limit errors on webhook"])
ticketCustomer = Col("Customer", ["j.martin@acme.io", "s.kim@northwind.co", "a.ross@globex.com", "p.ng@initech.net", "c.lee@umbrella.org"])
ticketPriority = Col("Priority", ["High", "Medium", "Low", "High", "Medium"])

highTab = TabItem("high", "High priority", [highCallout, highTicketsTable])
highCallout = Callout("warning", "2 high-priority tickets", "Both are past the 2-hour SLA window and need attention today.")
highTicketsTable = Table([highId, highSubject, highCustomer, highPriority])
highId = Col("ID", ["#4281", "#4278"])
highSubject = Col("Subject", ["Login failure on mobile app", "Refund not processed after 5 days"])
highCustomer = Col("Customer", ["j.martin@acme.io", "p.ng@initech.net"])
highPriority = Col("Priority", ["High", "High"])

newTicket = DialogBlock("New ticket", "Open a new ticket", "Add the essentials — priority routes it to the right person.", [ticketForm], "primary")
ticketForm = Form("new-ticket", formActions, [subjectField, customerField, priorityField, descriptionField])
formActions = Buttons([createBtn, cancelBtn])
createBtn = Button("Create ticket", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
subjectField = FormControl("Subject", subjectInput)
subjectInput = Input("subject", "Short summary of the issue")
customerField = FormControl("Customer email", customerInput)
customerInput = Input("customer", "customer@company.com", "email")
priorityField = FormControl("Priority", prioritySelect)
prioritySelect = Select("priority", [prioHigh, prioMed, prioLow], "Select a priority")
prioHigh = SelectItem("high", "High")
prioMed = SelectItem("medium", "Medium")
prioLow = SelectItem("low", "Low")
descriptionField = FormControl("Description", descriptionArea, "Include steps to reproduce and any error messages.")
descriptionArea = TextArea("description", "What happened? What did you expect?", 4)

followUps = FollowUpBlock([fup1, fup2, fup3])
fup1 = FollowUpItem("Draft a reply to #4281")
fup2 = FollowUpItem("Show tickets past SLA")
fup3 = FollowUpItem("Summarize top issues this week")