#mainBody{ flex: '', layout: 'row', 'ng-controller' => 'todoCtrl' }
  %md-content.md-padding
    %form{ 'ng-submit' => 'addTodo()' }
      %div{ layout: '', 'layout-align-gt-sm' => 'center center' }
        %md-input-container{ flex: '85' }
          %label= @config['add_label']
          %input{ 'ng-model' => 'todoText' }/
        %md-input-container
          %md-button.md-fab{ 'aria-label' => 'Add todo items', type: 'submit' }
            +
    %div
      .listHeader{ flex: '', layout: '', 'layout-align' => 'end end' }= @config['remaining_label']
      %md-list
        %md-list-item{ 'ng-repeat' => 'todo in todos | filter:{"archieved":  false}:true' }
          %md-checkbox{ 'aria-label' => 'Todo Checkbox', 'ng-model' => 'todo.completed', 'ng-change' => 'saveTodo(todo)'}
          %p{class: "done-{{todo.completed}}"} {{todo.title}}
          .md-secondary
            %md-button.md-raised.md-warn.text-center{'ng-click' => 'deleteItem(todo, $event)'} x
          %md-divider{ 'ng-if' => '!$last' }