#editor-column.section.editor.sn-component(aria-label='Note')
  protected-note-panel.h-full.flex.justify-center.items-center(
    ng-if='self.state.showProtectedWarning'
    app-state='self.appState'
    has-protection-sources='self.application.hasProtectionSources()'
    on-view-note='self.dismissProtectedWarning()'
  )
  .flex-grow.flex.flex-col(
    ng-if='!self.appState.notes.showProtectedWarning'
  )
    .sn-component
      .sk-app-bar.no-edges(
        ng-if='self.noteLocked',
        ng-init="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
        ng-mouseleave="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
        ng-mouseover="self.lockText = 'Enable editing'; self.showLockedIcon = false"
        )
        .sk-app-bar-item(
            ng-click='self.appState.notes.setLockSelectedNotes(!self.noteLocked)'
          )
          .sk-label.warning.flex.items-center
            icon.flex(
              type="pencil-off"
              class-name="fill-current mr-2"
              ng-if="self.showLockedIcon"
            )
            | {{self.lockText}}
    #editor-title-bar.section-title-bar.w-full(
      ng-show='self.note && !self.note.errorDecrypting'
      )
      div.flex.items-center.justify-between.h-8
        div.flex-grow(
          ng-class="{'locked' : self.noteLocked}"
        )
          .title.overflow-auto
            input#note-title-editor.input(
              ng-change='self.onTitleChange()',
              ng-disabled='self.noteLocked',
              ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
              ng-model='self.editorValues.title',
              select-on-focus='true',
              spellcheck='false'
              )
        div.flex.items-center
          #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}}
          pin-note-button(
            class='mr-3'
            app-state='self.appState',
            ng-if='self.appState.notes.selectedNotesCount > 0'
          )
          notes-options-panel(
            application='self.application',
            app-state='self.appState',
            ng-if='self.appState.notes.selectedNotesCount > 0'
          )
      note-tags-container(
        app-state='self.appState'
      )
    .sn-component(ng-if='self.note')
      #editor-menu-bar.sk-app-bar.no-edges
        .left
          .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.note',
              ng-if='self.state.showEditorMenu',
              selected-editor-uuid='self.state.editorComponentViewer && self.state.editorComponentViewer.component.uuid',
              application='self.application'
              )
          .sk-app-bar-item(
            click-outside=`self.setMenuState('showActionsMenu', false)`,
            is-open='self.state.showActionsMenu',
            ng-class="{'selected' : self.state.showActionsMenu}",
            ng-click="self.toggleMenu('showActionsMenu')"
            )
            .sk-label Actions
            actions-menu(
              item='self.note',
              ng-if='self.state.showActionsMenu',
              application='self.application'
              )
          .sk-app-bar-item(
            click-outside=`self.setMenuState('showHistoryMenu', false)`,
            is-open='self.state.showHistoryMenu',
            ng-class="{'selected' : self.state.showHistoryMenu}",
            ng-click="self.toggleMenu('showHistoryMenu')"
            )
            .sk-label History
            history-menu(
              item='self.note',
              ng-if='self.state.showHistoryMenu',
              application='self.application'
              )
    #editor-content.editor-content(ng-if='!self.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-viewer='self.state.editorComponentViewer',
        ng-if='self.state.editorComponentViewer',
        on-load='self.onEditorComponentLoad',
        request-reload='self.editorComponentViewerRequestsReload'
        application='self.application'
        app-state='self.appState'
        )
      textarea#note-text-editor.editable.font-editor(
        dir='auto',
        ng-attr-spellcheck='{{self.state.spellcheck}}',
        ng-change='self.contentChanged()',
        ng-click='self.clickedTextArea()',
        ng-focus='self.onContentFocus()',
        ng-if='self.state.editorStateDidLoad && !self.state.editorComponentViewer && !self.state.textareaUnloading',
        ng-model='self.editorValues.text',
        ng-model-options='{ debounce: self.state.editorDebounce}',
        ng-readonly='self.noteLocked',
        ng-trim='false'
        autocomplete='off'
        )
        | {{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.note.errorDecrypting')
      .sn-component#error-decrypting-container
        .sk-panel#error-decrypting-panel
          .sk-panel-header
            .sk-panel-header-title {{self.note.waitingForKey ? 'Waiting for Key' : 'Unable to Decrypt'}}
          .sk-panel-content
            .sk-panel-section
              p.sk-p(ng-if='self.note.waitingForKey')
                | This note is awaiting its encryption key to be ready. Please wait for syncing to complete
                | for this note to be decrypted.
              p.sk-p(ng-if='!self.note.waitingForKey')
                | 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-if='!self.note.errorDecrypting' ng-show='self.note')
      #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.availableStackComponents.length')
        .left
          .sk-app-bar-item(
            ng-repeat='component in self.state.availableStackComponents track by component.uuid'
            ng-click='self.toggleStackComponent(component)',
            )
            .sk-app-bar-item-column
              .sk-circle.small(
                ng-class="{'info' : self.stackComponentExpanded(component) && component.active, 'neutral' : !self.stackComponentExpanded(component)}"
                )
            .sk-app-bar-item-column
              .sk-label {{component.name}}
      .sn-component
        component-view.component-view.component-stack-item(
          ng-repeat='viewer in self.state.stackComponentViewers track by viewer.componentUuid',
          component-viewer='viewer',
          manual-dealloc='true',
          application='self.application'
          app-state='self.appState'
        )