#notes-column.sn-component.section.notes(aria-label='Notes')
  .content
    #notes-title-bar.section-title-bar
      .padded
        .section-title-bar-header
          .title {{self.state.panelTitle}}
          .sk-button.contrast.wide(
            ng-click='self.createNewNote()',
            title='Create a new note in the selected tag'
            )
            .sk-label
              i.icon.ion-plus.add-button
        .filter-section(role='search')
          input#search-bar.filter-bar(
            ng-blur='self.onFilterEnter()',
            ng-change='self.filterTextChanged()',
            ng-keyup='$event.keyCode == 13 && self.onFilterEnter();',
            ng-model='self.state.noteFilter.text',
            placeholder='Search',
            select-on-click='true',
            title='Searches notes in the currently selected tag'
            )
          #search-clear-button(
            ng-click='self.clearFilterText();',
            ng-show='self.state.noteFilter.text'
            ) ✕
      #notes-menu-bar.sn-component
        .sk-app-bar.no-edges
          .left
            .sk-app-bar-item(
              ng-class="{'selected' : self.state.mutable.showMenu}",
              ng-click='self.state.mutable.showMenu = !self.state.mutable.showMenu'
              )
              .sk-app-bar-item-column
                .sk-label
                  | Options
              .sk-app-bar-item-column
                .sk-sublabel {{self.optionsSubtitle()}}
            #notes-options-menu.sk-menu-panel.dropdown-menu(
              ng-show='self.state.mutable.showMenu'
              )
              .sk-menu-panel-header
                .sk-menu-panel-header-title Sort By
                a.info.sk-h5(ng-click='self.toggleReverseSort()')
                  | {{self.state.sortReverse === true ? 'Disable Reverse Sort' : 'Enable Reverse Sort'}}
              menu-row(
                action="self.selectedMenuItem(); self.selectedSortByCreated()"
                circle="self.state.sortBy == 'created_at' && 'success'"
                desc="'Sort notes by newest first'"
                label="'Date Added'"
                )
              menu-row(
                action="self.selectedMenuItem(); self.selectedSortByUpdated()"
                circle="self.state.sortBy == 'client_updated_at' && 'success'"
                desc="'Sort notes with the most recently updated first'"
                label="'Date Modified'"
                )
              menu-row(
                action="self.selectedMenuItem(); self.selectedSortByTitle()"
                circle="self.state.sortBy == 'title' && 'success'"
                desc="'Sort notes alphabetically by their title'"
                label="'Title'"
                )
              .sk-menu-panel-section
                .sk-menu-panel-header
                  .sk-menu-panel-header-title Display
                menu-row(
                  action="self.selectedMenuItem(); self.toggleWebPrefKey('showArchived')"
                  circle="self.state.showArchived ? 'success' : 'danger'"
                  desc=`'Archived notes are usually hidden.
                    You can explicitly show them with this option.'`
                  faded="!self.state.showArchived"
                  label="'Archived Notes'"
                  )
                menu-row(
                  action="self.selectedMenuItem(); self.toggleWebPrefKey('hidePinned')"
                  circle="self.state.hidePinned ? 'danger' : 'success'"
                  desc=`'Pinned notes always appear on top. You can hide them temporarily
                    with this option so you can focus on other notes in the list.'`
                  faded="self.state.hidePinned"
                  label="'Pinned Notes'"
                  )
                menu-row(
                  action="self.selectedMenuItem(); self.toggleWebPrefKey('hideNotePreview')"
                  circle="self.state.hideNotePreview ? 'danger' : 'success'"
                  desc="'Hide the note preview for a more condensed list of notes'"
                  faded="self.state.hideNotePreview"
                  label="'Note Preview'"
                  )
                menu-row(
                  action="self.selectedMenuItem(); self.toggleWebPrefKey('hideDate')"
                  circle="self.state.hideDate ? 'danger' : 'success'"
                  desc="'Hide the date displayed in each row'"
                  faded="self.state.hideDate"
                  label="'Date'"
                  )
                menu-row(
                  action="self.selectedMenuItem(); self.toggleWebPrefKey('hideTags')"
                  circle="self.state.hideTags ? 'danger' : 'success'"
                  desc="'Hide the list of tags associated with each note'"
                  faded="self.state.hideTags"
                  label="'Tags'"
                  )
    .scrollable
      #notes-scrollable.infinite-scroll(
        can-load='true',
        infinite-scroll='self.paginate()',
        threshold='200'
        )
        .note(
          ng-repeat='note in self.state.renderedNotes track by note.uuid'
          ng-class="{'selected' : self.activeEditorNote == note}"
          ng-click='self.selectNote(note)'
        )
          .note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
            .flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]')
              .label {{flag.text}}
          .name(ng-show='note.title')
            | {{note.title}}
          .note-preview(
            ng-if=`
              !self.state.hideNotePreview &&
              !note.hidePreview &&
              !note.protected`
            )
            .html-preview(
              ng-bind-html='note.preview_html',
              ng-show='note.preview_html'
              )
            .plain-preview(
              ng-show='!note.preview_html && note.preview_plain'
              ) {{note.preview_plain}}
            .default-preview(
              ng-show='!note.preview_html && !note.preview_plain'
              ) {{note.text}}
          .date.faded(ng-show='!self.state.hideDate')
            span(ng-show="self.state.sortBy == 'client_updated_at'")
              | Modified {{note.updatedAtString || 'Now'}}
            span(ng-show="self.state.sortBy != 'client_updated_at'")
              | {{note.createdAtString || 'Now'}}

  panel-resizer(
    collapsable="true" 
    control="self.panelPuppet" 
    default-width="300" 
    hoverable="true" 
    on-resize-finish="self.onPanelResize()" 
    panel-id="'notes-column'"
    )