root = Card([header, filterSection, statsSection, completionCard, quizCard, enrollmentSection, riskSection, engagementSection, messageSection])

header = CardHeader("Training Platform Analytics", "Overview of learner performance and engagement")

filterSection = Card([filterTitle, filterForm], "sunk")
filterTitle = Heading("Filter by cohort", "h3")
filterForm = Form("cohort-filter", filterButtons, [cohortField])
cohortField = FormControl("Cohort", cohortSelect)
cohortSelect = Select("cohort", [cohortAll, cohortQ1, cohortQ2, cohortQ3], "Select a cohort")
cohortAll = SelectItem("all", "All cohorts")
cohortQ1 = SelectItem("q1-2024", "Q1 2024")
cohortQ2 = SelectItem("q2-2024", "Q2 2024")
cohortQ3 = SelectItem("q3-2024", "Q3 2024")
filterButtons = Buttons([applyFilter])
applyFilter = Button("Apply filter", null, "primary")

statsSection = Card([activeStat, completionStat, quizStat], "clear", "row")
activeStat = Card([activeValue, activeLabel], "sunk")
activeValue = Heading("1,284", "h2")
activeLabel = TextContent("Active learners this week", "small")
completionStat = Card([completionValue, completionLabel], "sunk")
completionValue = Heading("78%", "h2")
completionLabel = TextContent("Course completion rate", "small")
quizStat = Card([quizValue, quizLabel], "sunk")
quizValue = Heading("86%", "h2")
quizLabel = TextContent("Average quiz score", "small")

completionCard = Card([completionHeading, completionChart], "sunk")
completionHeading = Heading("Completion rate by course", "h3")
completionChart = HorizontalBarChart(["Intro to SQL", "Data Visualization", "Python Basics", "Machine Learning", "Cloud Fundamentals"], [completionSeries], "grouped", "Completion %", "Course")
completionSeries = Series("Completion rate", [92, 84, 78, 65, 71])

quizCard = Card([quizHeading, quizChart], "sunk")
quizHeading = Heading("Average quiz score by course", "h3")
quizChart = BarChart(["Intro to SQL", "Data Visualization", "Python Basics", "Machine Learning", "Cloud Fundamentals"], [quizSeries], "grouped", "Course", "Score %")
quizSeries = Series("Avg score", [89, 91, 84, 78, 82])

enrollmentSection = Card([enrollHeading, enrollTable], "sunk")
enrollHeading = Heading("Courses ranked by enrollment", "h3")
enrollTable = Table([rankCol, courseCol, enrolledCol, completionCol])
rankCol = Col("Rank", ["1", "2", "3", "4", "5"])
courseCol = Col("Course", ["Intro to SQL", "Python Basics", "Data Visualization", "Cloud Fundamentals", "Machine Learning"])
enrolledCol = Col("Enrolled", [542, 487, 431, 298, 265])
completionCol = Col("Completion", ["92%", "78%", "84%", "71%", "65%"])

riskSection = Card([riskHeading, riskList], "sunk")
riskHeading = Heading("Learners at risk of dropping out", "h3")
riskList = ListBlock([riskItem1, riskItem2, riskItem3, riskItem4], "number")
riskItem1 = ListItem("Maria Chen", "Last active 14 days ago · 32% course progress", null, "Message")
riskItem2 = ListItem("James Patel", "Last active 11 days ago · 45% course progress", null, "Message")
riskItem3 = ListItem("Aisha Rahman", "Last active 9 days ago · 28% course progress", null, "Message")
riskItem4 = ListItem("Tom Becker", "Last active 16 days ago · 51% course progress", null, "Message")

engagementSection = Card([engagementHeading, engagementChart], "sunk")
engagementHeading = Heading("Engagement over the past 8 weeks", "h3")
engagementChart = AreaChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"], [engagementSeries], "natural", "Week", "Active learners")
engagementSeries = Series("Active learners", [920, 1050, 1120, 1180, 1240, 1210, 1284, 1270])

messageSection = Card([messageHeading, messageNote, messageForm], "sunk")
messageHeading = Heading("Message a cohort", "h3")
messageNote = TextCallout("info", "Send a message", "Compose a message to send to all learners in the selected cohort.")
messageForm = Form("cohort-message", messageButtons, [messageTargetField, messageSubjectField, messageBodyField])
messageTargetField = FormControl("Recipients", messageTargetInput)
messageTargetInput = Input("recipients", "Q1 2024 cohort", "text")
messageSubjectField = FormControl("Subject", messageSubjectInput)
messageSubjectInput = Input("subject", "Reminder: Complete your course")
messageBodyField = FormControl("Message", messageBodyArea)
messageBodyArea = TextArea("message", "Write your message to the cohort...", 4)
messageButtons = Buttons([sendMessageBtn, cancelMessageBtn])
sendMessageBtn = Button("Send message", null, "primary")
cancelMessageBtn = Button("Cancel", null, "tertiary")