#editor-column.section.editor.sn-component(aria-label='Note')
  .sn-component
    .sk-app-bar.no-edges(
      ng-if='self.state.note.locked', 
      ng-init="self.lockText = 'Note Locked'", 
      ng-mouseleave="self.lockText = 'Note Locked'", 
      ng-mouseover="self.lockText = 'Unlock'"
      )
      .left
        .sk-app-bar-item(ng-click='self.toggleLockNote()')
          .sk-label.warning
            i.icon.ion-locked
            |             {{self.lockText}}
  #editor-title-bar.section-title-bar(
    ng-class="{'locked' : self.state.note.locked}", 
    ng-show='self.state.note && !self.state.note.errorDecrypting'
    )
    .title
      input#note-title-editor.input(
        ng-blur='self.onNameBlur()', 
        ng-change='self.onTitleChange()', 
        ng-disabled='self.state.note.locked', 
        ng-focus='self.onNameFocus()', 
        ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)', 
        ng-model='self.state.note.title', 
        select-on-click='true', 
        spellcheck='false')
    #save-status
      .message(
        ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
        ) {{self.state.noteStatus.message}}
      .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
    .editor-tags
      #note-tags-component-container(ng-if='self.state.tagsComponent')
        component-view.component-view(
          component='self.state.tagsComponent', 
          ng-class="{'locked' : self.state.note.locked}", 
          ng-style="self.state.note.locked && {'pointer-events' : 'none'}"
          )
      input.tags-input(
        ng-blur='self.saveTags()', 
        ng-disabled='self.state.note.locked', 
        ng-if='!(self.state.tagsComponent && self.state.tagsComponent.active)', 
        ng-keyup='$event.keyCode == 13 && $event.target.blur();', 
        ng-model='self.state.mutable.tagsString', 
        placeholder='#tags', 
        spellcheck='false', 
        type='text'
        )
  .sn-component(ng-if='self.state.note')
    #editor-menu-bar.sk-app-bar.no-edges
      .left
        .sk-app-bar-item(
          click-outside=`self.setMenuState('showOptionsMenu', false)`, 
          is-open='self.state.showOptionsMenu', 
          ng-class="{'selected' : self.state.showOptionsMenu}", 
          ng-click="self.toggleMenu('showOptionsMenu')"
          )
          .sk-label Options
          .sk-menu-panel.dropdown-menu(ng-if='self.state.showOptionsMenu')
            .sk-menu-panel-section
              .sk-menu-panel-header
                .sk-menu-panel-header-title Note Options
              menu-row(
                action='self.selectedMenuItem(true); self.togglePin()', 
                desc="'Pin or unpin a note from the top of your list'", 
                label="self.state.note.pinned ? 'Unpin' : 'Pin'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.toggleArchiveNote()', 
                desc="'Archive or unarchive a note from your Archived system tag'", 
                label="self.state.note.archived ? 'Unarchive' : 'Archive'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.toggleLockNote()', 
                desc="'Locking notes prevents unintentional editing'", 
                label="self.state.note.locked ? 'Unlock' : 'Lock'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.toggleProtectNote()', 
                desc=`'Protecting a note will require credentials to view 
                      it (Manage Privileges via Account menu)'`, 
                label="self.state.note.content.protected ? 'Unprotect' : 'Protect'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.toggleNotePreview()', 
                circle="self.state.note.content.hidePreview ? 'danger' : 'success'", 
                circle-align="'right'", 
                desc="'Hide or unhide the note preview from the list of notes'", 
                label="'Preview'"
                )
              menu-row(
                action='self.selectedMenuItem(); self.deleteNote()', 
                desc="'Send this note to the trash'", 
                label="'Move to Trash'", 
                ng-show='!self.state.altKeyDown && !self.state.note.content.trashed && !self.state.note.errorDecrypting', 
                stylekit-class="'warning'"
                )
              menu-row(
                action='self.selectedMenuItem(); self.deleteNotePermanantely()', 
                desc="'Delete this note permanently from all your devices'", 
                label="'Delete Permanently'", 
                ng-show='!self.state.note.content.trashed && self.state.note.errorDecrypting', 
                stylekit-class="'danger'"
                )
            div(ng-if='self.state.note.content.trashed || self.state.altKeyDown')
              menu-row(
                action='self.selectedMenuItem(true); self.restoreTrashedNote()', 
                desc="'Undelete this note and restore it back into your notes'", 
                label="'Restore'", 
                ng-show='self.state.note.content.trashed', 
                stylekit-class="'info'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.deleteNotePermanantely()', 
                desc="'Delete this note permanently from all your devices'", 
                label="'Delete Permanently'", 
                stylekit-class="'danger'"
                )
              menu-row(
                action='self.selectedMenuItem(true); self.emptyTrash()',
                desc="'Permanently delete all notes in the trash'", 
                label="'Empty Trash'", 
                ng-show='self.state.note.content.trashed || !self.state.altKeyDown', 
                stylekit-class="'danger'", 
                subtitle="self.getTrashCount() + ' notes in trash'"
                )
            .sk-menu-panel-section
              .sk-menu-panel-header
                .sk-menu-panel-header-title Global Display
              menu-row(
                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeyMonospace)", 
                circle="self.state.monospaceEnabled ? 'success' : 'neutral'", 
                desc="'Toggles the font style for the default editor'", 
                disabled='self.state.selectedEditor', 
                label="'Monospace Font'", 
                subtitle="self.state.selectedEditor ? 'Not available with editor extensions' : null"
                )
              menu-row(
                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeySpellcheck)", 
                circle="self.state.spellcheck ? 'success' : 'neutral'", 
                desc="'Toggles spellcheck for the default editor'", 
                disabled='self.state.selectedEditor', 
                label="'Spellcheck'", 
                subtitle=`
                  self.state.selectedEditor 
                    ? 'Not available with editor extensions' 
                    : (self.state.isDesktop ? 'May degrade editor performance' : null)
                  `)
              menu-row(
                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeyMarginResizers)", 
                circle="self.state.marginResizersEnabled ? 'success' : 'neutral'", 
                desc="'Allows for editor left and right margins to be resized'", 
                faded='!self.state.marginResizersEnabled', 
                label="'Margin Resizers'"
                )
        .sk-app-bar-item(
          click-outside=`self.setMenuState('showEditorMenu', false)`
          is-open='self.state.showEditorMenu', 
          ng-class="{'selected' : self.state.showEditorMenu}", 
          ng-click="self.toggleMenu('showEditorMenu')"
          )
          .sk-label Editor
          editor-menu(
            callback='self.editorMenuOnSelect', 
            current-item='self.state.note', 
            ng-if='self.state.showEditorMenu', 
            selected-editor='self.state.selectedEditor',
            application='self.application'
            )
        .sk-app-bar-item(
          click-outside=`self.setMenuState('showExtensions', false)`, 
          is-open='self.state.showExtensions', 
          ng-class="{'selected' : self.state.showExtensions}", 
          ng-click="self.toggleMenu('showExtensions')"
          )
          .sk-label Actions
          actions-menu(
            item='self.state.note', 
            ng-if='self.state.showExtensions',
            application='self.application'
            )
        .sk-app-bar-item(
          click-outside=`self.setMenuState('showSessionHistory', false)`, 
          is-open='self.state.showSessionHistory', 
          ng-click="self.toggleMenu('showSessionHistory')"
          )
          .sk-label Session History
          session-history-menu(
            item='self.state.note', 
            ng-if='self.state.showSessionHistory',
            application='self.application'
            )
  #editor-content.editor-content(
    ng-if='self.state.noteReady && !self.state.note.errorDecrypting'
    )
    panel-resizer.left(
      control='self.leftPanelPuppet', 
      hoverable='true', 
      min-width='300', 
      ng-if='self.state.marginResizersEnabled', 
      on-resize-finish='self.onPanelResizeFinish()', 
      panel-id="'editor-content'", 
      property="'left'"
      )
    component-view.component-view(
      component='self.state.selectedEditor', 
      ng-if='self.state.selectedEditor', 
      on-load='self.onEditorLoad',
      application='self.application'
      )
    textarea#note-text-editor.editable(
      dir='auto', 
      ng-attr-spellcheck='{{self.state.spellcheck}}', 
      ng-change='self.contentChanged()', 
      ng-click='self.clickedTextArea()', 
      ng-focus='self.onContentFocus()',
      ng-if='!self.state.selectedEditor', 
      ng-model='self.state.note.text', 
      ng-model-options='{ debounce: self.state.editorDebounce}', 
      ng-readonly='self.state.note.locked', 
      ng-trim='false'
      )
      | {{self.onSystemEditorLoad()}}
    panel-resizer(
      control='self.rightPanelPuppet', 
      hoverable='true', min-width='300', 
      ng-if='self.state.marginResizersEnabled', 
      on-resize-finish='self.onPanelResizeFinish()', 
      panel-id="'editor-content'", 
      property="'right'"
      )
  .section(ng-show='self.state.note.errorDecrypting')
    p.medium-padding(style='padding-top: 0 !important;')
      | There was an error decrypting this item. Ensure you are running the 
      | latest version of this app, then sign out and sign back in to try again.
  #editor-pane-component-stack(ng-show='self.state.note')
    #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.componentStack.length')
      .left
        .sk-app-bar-item(
          ng-click='self.toggleStackComponentForCurrentItem(component)', 
          ng-repeat='component in self.state.componentStack'
          )
          .sk-app-bar-item-column
            .sk-circle.small(
              ng-class="{'info' : !component.hidden && component.active, 'neutral' : component.hidden  || !component.active}"
              )
          .sk-app-bar-item-column
            .sk-label {{component.name}}
    .sn-component
      component-view.component-view.component-stack-item(
        component='component', 
        manual-dealloc='true', 
        ng-if='component.active', 
        ng-repeat='component in self.state.componentStack', 
        ng-show='!component.hidden',
        application='self.application'
        )