.section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"}
  .content
    .section-title-bar.editor-heading{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
      .title
        %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
                  "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()",
                  "select-on-click" => "true"}
      .save-status{"ng-class" => "{'red bold': ctrl.saveError}", "ng-bind-html" => "ctrl.noteStatus"}
      .tags
        %input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && ctrl.updateTagsFromTagsString($event, ctrl.tagsString)",
        "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
      .section-menu
        %ul.nav.nav-pills
          %li.dropdown
            %a.dropdown-toggle{"ng-click" => "ctrl.clickedMenu(); ctrl.showExtensions = false"}
              File
              %span.caret
              %span.sr-only

            %ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"}
              %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"}
                .text Toggle Fullscreen
                .shortcut Cmd + O
              %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleMarkdown()"}
                .text Toggle Markdown Preview
                .shortcut Cmd + M
              %li{"ng-click" => "ctrl.deleteNote()"}
                .text Delete
          %li.sep
          %li.dropdown{"ng-if" => "ctrl.hasAvailableExtensions()"}
            %a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false"}
              Extensions
              %span.caret
              %span.sr-only
            %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}

        .markdown.icon{"ng-if" => "ctrl.editorMode == 'preview'", "ng-click" => "ctrl.showMarkdown = !ctrl.showMarkdown"}
          .icon-markdown
          .panel.panel-default.info-panel{"ng-if" => "ctrl.showMarkdown"}
            .panel-body{"style" => "text-align: center; color: black;"}
              This editor is Markdown enabled.

    .editor-content{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
      %textarea.editable#note-text-editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-show" => "ctrl.editorMode == 'edit'", "ng-model" => "ctrl.note.text",
       "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()"}
      .preview{"ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-if" => "ctrl.editorMode == 'preview'", "ng-bind-html" => "ctrl.renderedContent()", "ng-dblclick" => "ctrl.onPreviewDoubleClick()"}