.section.notes#notes-column
  .content
    .section-title-bar#notes-title-bar
      .padded
        .section-title-bar-header
          .title {{ctrl.panelTitle()}}
          .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()"} +
        .filter-section
          %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
            #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
      %ul.section-menu-bar#notes-menu-bar.no-h-padding
        %li.item-with-subtitle.full-width{"ng-class" => "{'selected' : ctrl.showMenu}"}
          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
            %label
              Options
              %span.subtitle {{ctrl.optionsSubtitle()}}
          .sectioned-menu.dropdown-menu.full-width{"ng-if" => "ctrl.showMenu"}
            %ul
              .header
                .title Sort By
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
                  By Date Added
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
                  By Date Modified
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
                  By Title
            %ul{"ng-if" => "!ctrl.tag.archiveTag"}
              .header
                .title Display
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
                  Show Archived Notes
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hidePinned == true"} ✓
                  Hide Pinned Notes
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideNotePreview == true"} ✓
                  Hide Note Preview
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideDate == true"} ✓
                  Hide Date
              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
                %label
                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideTags == true"} ✓
                  Hide Tags

    .scrollable
      .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy| limitTo:ctrl.notesToDisplay)) track by note.uuid",
            "ng-click" => "ctrl.selectNote(note)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
          %strong.red.medium{"ng-if" => "note.conflict_of"} Conflicted copy
          %strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting

          .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
            %i.icon.ion-ios-flag
            %strong.medium Pinned

          .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
            %i.icon.ion-ios-box
            %strong.medium Archived

          .tags-string{"ng-if" => "ctrl.tag.all && !ctrl.hideTags"}
            .faded {{note.tagsString()}}

          .name{"ng-if" => "note.title"}
            {{note.title}}
          .note-preview{"ng-if" => "!ctrl.hideNotePreview"}
            {{note.text}}
          .date.faded{"ng-if" => "!ctrl.hideDate"}
            %span{"ng-if" => "ctrl.sortBy == 'updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
            %span{"ng-if" => "ctrl.sortBy != 'updated_at'"} {{note.createdAtString() || 'Now'}}

  %panel-resizer{"panel-id" => "'notes-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}