.section.groups
  .content
    .section-title-bar.groups-title-bar
      .title Groups
      .add-button{"ng-click" => "ctrl.clickedAddNewGroup()"} +
    .group{"ng-if" => "ctrl.allGroup", "ng-click" => "ctrl.selectGroup(ctrl.allGroup)", "ng-class" => "{'selected' : ctrl.selectedGroup == ctrl.allGroup}",
            "droppable" => true, "drop" => "ctrl.handleDrop", "group" => "ctrl.allGroup"}
      %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allGroup.name"}
      .count {{ctrl.noteCount(ctrl.allGroup)}}
    .group{"ng-repeat" => "group in ctrl.groups", "ng-click" => "ctrl.selectGroup(group)", "ng-class" => "{'selected' : ctrl.selectedGroup == group}",
    "droppable" => true, "drop" => "ctrl.handleDrop", "group" => "group"}
      .icon.icon-rss{"ng-if" => "group.presentation"}
      %input.title{"ng-disabled" => "group != ctrl.selectedGroup", "ng-model" => "group.name",
      "ng-keyup" => "$event.keyCode == 13 && ctrl.saveGroup($event, group)", "mb-autofocus" => "true", "should-focus" => "ctrl.newGroup",
      "ng-change" => "ctrl.groupTitleDidChange(group)", "ng-focus" => "ctrl.onGroupTitleFocus(group)"}
      .count {{ctrl.noteCount(group)}}