root = Card([header, cohortSelector, kpiRow, enrollmentChart, engagementChart, atRiskSection, messageAction], "card", "column", "l")

header = CardHeader("Training Platform Analytics", "Weekly cohort performance overview")

cohortSelector = Form("cohort-filter", cohortButtons, [cohortField])
cohortField = FormControl("Select Cohort", cohortSelect, "Filter all metrics by cohort")
cohortSelect = Select("cohort_id", cohortOptions, "All cohorts")
cohortOptions = [optAll, optNewHires, optEngineering, optSales, optMarketing]
optAll = SelectItem("all", "All Cohorts")
optNewHires = SelectItem("new-hires-2024", "New Hires 2024")
optEngineering = SelectItem("eng-q1-2024", "Engineering Q1 2024")
optSales = SelectItem("sales-q1-2024", "Sales Q1 2024")
optMarketing = SelectItem("mktg-q1-2024", "Marketing Q1 2024")
cohortButtons = Buttons([applyFilterBtn])
applyFilterBtn = Button("Apply Filter", null, "primary")

kpiRow = Card([activeLearnersCard, completionRateCard, avgQuizCard], "clear", "row", "m", "stretch", "start", true)
activeLearnersCard = Card([activeLabel, activeValue], "sunk", "column", "s", "center")
activeLabel = TextContent("Active Learners This Week", "small-heavy")
activeValue = TextContent("1,247", "large-heavy")
completionRateCard = Card([completionLabel, completionValue], "sunk", "column", "s", "center")
completionLabel = TextContent("Course Completion Rate", "small-heavy")
completionValue = TextContent("78.4%", "large-heavy")
avgQuizCard = Card([quizLabel, quizValue], "sunk", "column", "s", "center")
quizLabel = TextContent("Average Quiz Score", "small-heavy")
quizValue = TextContent("84.2", "large-heavy")

enrollmentChart = Card([enrollmentHeader, enrollmentTable], "sunk", "column", "m")
enrollmentHeader = Heading("Courses Ranked by Enrollment", "h3")
enrollmentTable = Table([courseCol, enrolledCol, completedCol, inProgressCol, completionRateCol])
courseCol = Col("Course", ["React Fundamentals", "Python for Data Science", "AWS Cloud Practitioner", "Agile Project Management", "SQL Essentials", "TypeScript Advanced", "Docker & Kubernetes", "Machine Learning Basics"])
enrolledCol = Col("Enrolled", [342, 287, 256, 234, 218, 198, 176, 145], "number")
completedCol = Col("Completed", [267, 201, 189, 178, 162, 142, 128, 98], "number")
inProgressCol = Col("In Progress", [58, 62, 45, 38, 41, 39, 32, 31], "number")
completionRateCol = Col("Completion %", ["78.1%", "70.0%", "73.8%", "76.1%", "74.3%", "71.7%", "72.7%", "67.6%"])

engagementChart = Card([engagementHeader, engagementLineChart], "sunk", "column", "m")
engagementHeader = Heading("Engagement Across Past 8 Weeks", "h3")
engagementLineChart = LineChart(engagementWeeks, [activeSeries, sessionSeries, completionSeries], "natural", "Week", "Count")
engagementWeeks = ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7", "Week 8"]
activeSeries = Series("Active Learners", [892, 945, 1023, 1087, 1156, 1198, 1234, 1247])
sessionSeries = Series("Sessions", [1240, 1380, 1520, 1650, 1780, 1890, 1945, 2010])
completionSeries = Series("Completions", [156, 189, 234, 267, 298, 312, 345, 367])

atRiskSection = Card([atRiskHeader, atRiskList], "sunk", "column", "m")
atRiskHeader = Heading("Learners at Risk of Dropping Out", "h3")
atRiskList = ListBlock(atRiskItems, "number")
atRiskItems = [risk1, risk2, risk3, risk4, risk5]
risk1 = ListItem("Sarah Chen", "Last active 14 days ago • Python for Data Science • 23% complete", null, "Reach out")
risk2 = ListItem("Marcus Johnson", "Last active 11 days ago • AWS Cloud Practitioner • 31% complete", null, "Reach out")
risk3 = ListItem("Emily Rodriguez", "Last active 16 days ago • React Fundamentals • 18% complete", null, "Reach out")
risk4 = ListItem("David Park", "Last active 12 days ago • TypeScript Advanced • 41% complete", null, "Reach out")
risk5 = ListItem("Lisa Thompson", "Last active 18 days ago • SQL Essentials • 15% complete", null, "Reach out")

messageAction = Card([messageHeader, messageForm], "clear", "column", "m")
messageHeader = Heading("Message Cohort", "h3")
messageForm = Form("message-cohort", messageButtons, [messageCohortField, messageSubjectField, messageBodyField])
messageCohortField = FormControl("Recipient Cohort", messageCohortSelect, "Select cohort to message")
messageCohortSelect = Select("message_cohort", messageCohortOptions, "Choose cohort")
messageCohortOptions = [msgOptAll, msgOptNewHires, msgOptEngineering, msgOptSales, msgOptMarketing]
msgOptAll = SelectItem("all", "All Cohorts")
msgOptNewHires = SelectItem("new-hires-2024", "New Hires 2024")
msgOptEngineering = SelectItem("eng-q1-2024", "Engineering Q1 2024")
msgOptSales = SelectItem("sales-q1-2024", "Sales Q1 2024")
msgOptMarketing = SelectItem("mktg-q1-2024", "Marketing Q1 2024")
messageSubjectField = FormControl("Subject", messageSubjectInput, "Brief subject line")
messageSubjectInput = Input("subject", "Enter subject")
messageBodyField = FormControl("Message", messageBodyArea, "Your message to the cohort")
messageBodyArea = TextArea("body", "Type your message here...", 4)
messageButtons = Buttons([sendBtn, previewBtn], "row")
sendBtn = Button("Send Message", null, "primary")
previewBtn = Button("Preview", null, "secondary")