-- DreamStack TodoMVC
-- Full todo app demonstrating lists, input bindings, filtering,
-- and dynamic DOM manipulation — all with compile-time reactivity.

let todos = []
let filter = "all"
let next_id = 0
let input_text = ""

-- Derived: filtered list
let visible_todos = todos
let active_count = 0
let completed_count = 0

view app =
  column [
    text "todos" { class: "title" }

    row [
      input "" { placeholder: "What needs to be done?", value: input_text, class: "new-todo", keydown: input_text += "" }
    ]

    column [
      text visible_todos { class: "todo-list" }
    ]

    row [
      text active_count { class: "count" }
      row [
        button "All" { click: filter = "all", class: "filter-btn" }
        button "Active" { click: filter = "active", class: "filter-btn" }
        button "Done" { click: filter = "completed", class: "filter-btn" }
      ]
    ]
  ]