doctype html
html
  head
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    title Reactive TodoMVC
    link(rel='stylesheet', href='bower_components/todomvc-common/base.css')
    style(type='text/css').
      #cleared {
        border-top: 4px dotted #ccc;
        opacity: 0.5;
      }
  body
    script(src='bower_components/todomvc-common/base.js')
    script(src='bower_components/jquery/dist/jquery.js')
    script(src='bower_components/underscore/underscore.js')
    script(src='bower_components/reactive-coffee/dist/reactive-coffee.js')
    script(src='../../dist/reactive-coffee-debugger.js')
    script
      :coffeescript
        rxd.installDebugger()
        rxd.setEnabled(true)

        bind = rx.bind
        rx.rxt.importTags()

        class Task
          constructor: (title) ->
            @title = rx.cell(title)
            @isEditing = rx.cell(false)
            @isCompleted = rx.cell(false)

        window.tasks = rx.array()
        window.clearedTasks = rx.array()

        incomplete = ->
          (task for task in tasks.all() when not task.isCompleted.get()).length

        $ ->
          $('body').prepend(
            section {id: 'todoapp'}, [
              header {id: 'header'}, [
                h1 'todos'
                input {
                  id: 'new-todo'
                  type: 'text'
                  placeholder: 'What needs to be done?'
                  autofocus: true
                  keydown: (e) ->
                    if e.which == 13
                      tasks.push(new Task(@val().trim()))
                      @val('')
                      false # In IE, don't set focus on the `button` (crazy!)
                      # <http://stackoverflow.com/questions/12325066/button-click-event-fires-when-pressing-enter-key-in-different-input-no-forms>
                }
              ]
              section {id: 'main'}, [
                input {
                  id: 'toggle-all'
                  type: 'checkbox'
                  style: bind -> if tasks.length() > 0 then {display: "block"} else {display: "none"}
                  change: ->
                    for task in tasks.all()
                      task.isCompleted.set(@is(':checked'))
                }
                label {for: 'toggle-all'}, 'Mark all as complete'
                ul {id: 'todo-list'}, tasks.map (task) ->
                  editBox = null
                  li {
                    class: bind -> [
                      'completed' if task.isCompleted.get()
                      'editing' if task.isEditing.get()
                    ].filter((x) -> x?).join(' ')
                  }, bind ->
                    if task.isEditing.get() then [
                      editBox = input {
                        type: 'text'
                        class: 'edit'
                        autofocus: true
                        value: task.title.get()
                        keyup: (e) ->
                          if e.which == 13
                            @blur()
                        blur: ->
                          task.title.set(@val())
                          task.isEditing.set(false)
                      }
                    ] else [
                      input {
                        class: 'toggle'
                        type: 'checkbox'
                        checked: bind -> task.isCompleted.get()
                        change: -> task.isCompleted.set(@is(':checked'))
                      }
                      label {
                        dblclick: ->
                          task.isEditing.set(true)
                          editBox.focus()
                      }, bind -> "#{task.title.get()}"
                      button {
                        class: 'destroy'
                        click: -> tasks.remove(task)
                      }
                    ]
              ]
              section {id: 'cleared'}, [
                ul {id: "todo-list", class: "cleared"}, clearedTasks.map (taskTitle) ->
                  li {class: "completed"}, [
                    label taskTitle
                  ]
              ]
              footer {id: 'footer'}, [
                span {id: 'todo-count'}, bind -> [
                  strong "#{incomplete()}"
                  if incomplete() == 1 then ' item left' else ' items left'
                ]
                button {
                  id: 'clear-completed'
                  click: ->
                    completedTasks = (task.title.get() for task in tasks.all() when task.isCompleted.get())
                    tasks.replace(task for task in tasks.all() when not task.isCompleted.get())
                    clearedTasks.splice(clearedTasks.length(), 0, completedTasks...)
                }, 'Clear completed'
              ]
            ]
          )