fake.haml

%text                                                                                             
  class: "branding"
  value: "todos"
     
%vbox  
  %hbox    
    %button              
      image: chevron-down   
      action: `select_all()`
               
    %text-input                      
      label: "What needs to be done?"
      action: `add_todo(this.value)`
       
  %list                 
    for: `todo in todos`
         
    %hbox      
      %checkbox                             
        action: `todo.set_done(!this.value)`
        value: `todo.is_done`
                 
      %text-input         
        label: `todo.text`                    
        class: `todo.is_done ? "is-done" : ""`
        editable: false                        
        on-doubleclick: `toggle-editable(this)`
             
      %button        
        image: delete         
        action: `delete(todo)`
        
       
  %hbox  
    %text                                 
      value: "{todos.length} item(s) left"
           
    %button       
      label: "All"                            
      class: `filter == ALL ? "selected" : ""`
      action: `set_filter(ALL)`
    %button          
      label: "Active"                            
      class: `filter == ACTIVE ? "selected" : ""`
      action: `set_filter(ACTIVE)`
    %button             
      label: "Completed"                            
      class: `filter == COMPLETED ? "selected" : ""`
      action: `set_filter(COMPLETED)`
           
    %button                   
      label: "Clear completed"   
      action: `clear_completed()`