store Tasks {
  @tasks = []
  @undone <- @tasks.filter(task => !task.done)

  makeTask(task) { return { title: title, done: false } }

  addTask(newText) { @tasks.push(makeTask(newText)) }
  clear() { @tasks = @undone }
}

view Task {
  <h2>{^title}</h2>
  <input type="checkbox" checked={^done} change={^change}>
}

view Main {
  @newText = ""

  add() { Tasks.addTask(@newText); @newText = "" }

  <h1>Todo List</h1>
  <Task[Task.tasks] change = {bool => task.done = bool} />

  <div.toolbar>
    <div.undone> {Tasks.undone.length} tasks left</div>
    <button click={Tasks.clear()}>clear completed</button>
  </div>

  <input enter={add} sync={@newText} placeholder="New Task" />
}