root = Card([header, balancesSection, transactionsSection, spendingSection, billsSection, goalSection, creditScoreSection, moveMoneySection, freezeSection, statementSection, alertsSection, disputeSection], "clear")
header = CardHeader("Personal banking", "Good morning, Alex")
balancesSection = Card([balancesHeading, balancesTable], "sunk")
balancesHeading = Heading("Account balances", "h2")
balancesTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit card"])
balanceCol = Col("Balance", ["$4,250.80", "$12,680.45", "$1,240.00"])
transactionsSection = Card([transactionsHeading, transactionsTable], "sunk")
transactionsHeading = Heading("Recent transactions", "h2")
transactionsTable = Table([txnMerchantCol, txnAmountCol, txnDateCol])
txnMerchantCol = Col("Merchant", ["Whole Foods", "Spotify", "Shell", "Amazon", "Rent"])
txnAmountCol = Col("Amount", ["-$84.20", "-$10.99", "-$42.00", "-$23.50", "-$1,850.00"])
txnDateCol = Col("Date", ["Feb 12", "Feb 11", "Feb 10", "Feb 9", "Feb 1"])
spendingSection = Card([spendingHeading, spendingChart], "sunk")
spendingHeading = Heading("Spending by category this month", "h2")
spendingChart = PieChart(["Groceries", "Dining", "Rent", "Shopping", "Utilities"], [420, 310, 1850, 260, 180])
billsSection = Card([billsHeading, billsTable], "sunk")
billsHeading = Heading("Bills due soon", "h2")
billsTable = Table([billsNameCol, billsDueCol, billsAmountCol])
billsNameCol = Col("Bill", ["Electric", "Internet", "Credit card"])
billsDueCol = Col("Due", ["Feb 18", "Feb 20", "Feb 25"])
billsAmountCol = Col("Amount", ["$95.00", "$70.00", "$250.00"])
goalSection = Card([goalHeading, goalProgress], "sunk")
goalHeading = Heading("Vacation savings goal", "h2")
goalProgress = Progress(72, "$7,200 of $10,000 saved")
creditScoreSection = Card([creditHeading, scoreText, scoreTag, scoreUpdated], "sunk")
creditHeading = Heading("Credit score", "h2")
scoreText = TextContent("742", "large-heavy")
scoreTag = Tag("Excellent", null, null, "success")
scoreUpdated = TextContent("Updated Feb 1", "small")
moveMoneySection = Card([moveHeading, moveForm], "sunk")
moveHeading = Heading("Move money", "h2")
moveForm = Form("move-money", moveButtons, [fromField, toField, amountField])
moveButtons = Buttons([moveBtn])
moveBtn = Button("Transfer", null, "primary")
fromField = FormControl("From", fromSelect)
fromSelect = Select("from_account", [fromChecking, fromSavings], "Select account")
fromChecking = SelectItem("checking", "Checking •••• 4821")
fromSavings = SelectItem("savings", "Savings •••• 7713")
toField = FormControl("To", toSelect)
toSelect = Select("to_account", [toSavings, toChecking], "Select account")
toSavings = SelectItem("savings", "Savings •••• 7713")
toChecking = SelectItem("checking", "Checking •••• 4821")
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
freezeSection = Card([freezeHeading, freezeForm], "sunk")
freezeHeading = Heading("Freeze credit line", "h2")
freezeForm = Form("freeze-credit", freezeButtons, [freezeField])
freezeField = FormControl("Status", freezeSwitch)
freezeSwitch = SwitchGroup("freeze_credit", [freezeItem])
freezeItem = SwitchItem("Freeze credit line", "Prevent new purchases and cash advances", "freeze_credit")
freezeButtons = Buttons([freezeSaveBtn])
freezeSaveBtn = Button("Save", null, "secondary")
statementSection = Card([statementHeading, statementForm], "sunk")
statementHeading = Heading("Statement period", "h2")
statementForm = Form("statement-period", statementButtons, [statementField])
statementField = FormControl("Period", statementSelect)
statementSelect = Select("statement_period", [periodThis, periodLast, periodLast3], "Select a period")
periodThis = SelectItem("current", "This month")
periodLast = SelectItem("last", "Last month")
periodLast3 = SelectItem("last3", "Last 3 months")
statementButtons = Buttons([applyPeriodBtn])
applyPeriodBtn = Button("Apply", null, "secondary")
alertsSection = Card([alertsHeading, alertsForm], "sunk")
alertsHeading = Heading("Manage alerts", "h2")
alertsForm = Form("alert-preferences", alertsButtons, [alertField])
alertField = FormControl("Notify me when", alertsCheckbox)
alertsCheckbox = CheckBoxGroup("alerts", [alertLarge, alertLow, alertFraud], null, ["fraud"])
alertLarge = CheckBoxItem("Large purchases", "Over $500", "large")
alertLow = CheckBoxItem("Low balance", "Below $200", "low")
alertFraud = CheckBoxItem("Suspicious activity", "Unusual transactions", "fraud", true)
alertsButtons = Buttons([saveAlertsBtn])
saveAlertsBtn = Button("Save alert preferences", null, "primary")
disputeSection = Card([disputeHeading, disputeDialog], "sunk")
disputeHeading = Heading("Dispute a transaction", "h2")
disputeDialog = DialogBlock("Dispute a transaction", "Dispute a transaction", "Tell us which transaction and why.", [disputeForm], "secondary")
disputeForm = Form("dispute", disputeButtons, [txnField, reasonField])
txnField = FormControl("Transaction", txnSelect)
txnSelect = Select("transaction", [txnShell, txnSpotify, txnAmazon], "Select transaction")
txnShell = SelectItem("shell", "Shell - $42.00 - Feb 10")
txnSpotify = SelectItem("spotify", "Spotify - $10.99 - Feb 11")
txnAmazon = SelectItem("amazon", "Amazon - $23.50 - Feb 9")
reasonField = FormControl("Reason", reasonTextarea)
reasonTextarea = TextArea("reason", "Describe the issue...", 4)
disputeButtons = Buttons([disputeSubmit])
disputeSubmit = Button("Submit dispute", null, "primary")