mixin list-item(bookmark)
  mp-list-item(
    attrs={
      active: activeBookmark && activeBookmark.id === bookmark.id
    }
    on={
      click: () => $helpers.selectBookmark(bookmark),
      mouseover: () => $helpers.activateBookmark(bookmark),
      mouseleave: () => $helpers.activateBookmark(null),
    }
  )
    .mp-bm-menu-bookmark-row
      .mp-bm-menu-bookmark-details
        .mp-bm-menu-name(attrs={title: bookmark.name})
          for token, pos in $helpers.stringFilterMatches(bookmark.name, filterText)
             if pos % 2 === 1
               span= $helpers.truncateMiddle(token, 40)
             else
               b= token
        .mp-bm-menu-creator= bookmark.user

      if $attrs['has-write-permissions']
        .mp-bm-menu-delete-button(on={click: e => $helpers.openConfirmDeleteDialog(e, bookmark)})
          svg-icon(attrs={icon: 'trashcan'})

.mp-bm-container(on={scroll: $helpers.stopPropagation})
  mp-upsell-popup(
    attrs={
      open: showUpsellModal,
      feature: 'bookmark-maximum',
    }
    on={change: $helpers.closeUpsellModal}
  )
  .mp-bm-btn(on={click: $helpers.toggleBookmarksMenu})
    .mp-bm-btn-icon
      svg-icon(attrs={icon: 'bookmarks'})
    span Bookmarks
  .mp-bm-menu(attrs={tabindex: 0})
    mp-drop-menu(attrs={open} on={change: $helpers.handleDropMenuChange})
      .mp-bm-menu-container(attrs={'slot-body': true})
        mp-icon-input.mp-bm-menu-search(
          attrs={
            icon: 'search',
            placeholder: 'Search bookmarks...',
          }
          on={
            change: $helpers.stopPropagation,
            input: $helpers.setFilterText,
          }
        )
        .mp-bm-menu-list
          - const numBookmarkSections = Object.keys(filteredBookmarks).length
          if numBookmarkSections === 0
            mp-list-item(attrs={static: true})
              .mp-bm-menu-empty No bookmarks found, try creating a bookmark.
          else if numBookmarkSections === 1
            for bookmark in Object.values(filteredBookmarks)[0]
              +list-item(bookmark)
          else
            - let sectionIdx = 0
            for bookmarks, sectionName in filteredBookmarks
              mp-list-item(attrs={static: true})
                .mp-bm-menu-section-header= sectionName
              for bookmark in bookmarks
                +list-item(bookmark)
              if ++sectionIdx < numBookmarkSections
                .mp-bm-menu-list-item-divider

        if $attrs['has-write-permissions'] && !$attrs['hide-create']
          .mp-bm-menu-add
            if !$attrs['create-disabled'] && (createMode || saving)
              mp-input-group(
                attrs={autofocus: true, placeholder: 'Name your bookmark', busy: saving}
                on={
                  keydown: $helpers.stopPropagation,
                  change: $helpers.stopPropagation,
                  input: $helpers.setName,
                  submit: $helpers.createBookmark,
                }
              )
            else
              mp-button-bar.mp-button-bar-secondary(
                attrs={disabled: $attrs['create-disabled']}
                on={click: $attrs['over-free-limit'] ? $helpers.openUpsellModal : $helpers.goToCreateMode}
              )
                .mp-bm-menu-button-bar-text(
                  class={'mp-bm-menu-over-free-text': $attrs['over-free-limit']}
                ) Create new bookmark
              if $attrs['over-free-limit']
                .mp-bm-menu-upsell-icon
                  svg-icon(attrs={icon: 'lightning-bolt'})

  if confirmDeleteBookmark
    mp-confirm-delete(
      attrs={closeable: true, open: true}
      on={
        change: $helpers.handleConfirmModalChange,
        submit: $helpers.handleConfirmSubmit,
      }
    )
      .mp-bm-menu-confirm-delete-container(attrs={'slot-body': true})
        .mp-confirm-delete-title Delete bookmark
        if confirmDeleteBookmark.include_in_dashboard
          .mp-confirm-delete-description
            | Are you sure you want to delete the bookmark named "#{confirmDeleteBookmark.name}"?
            br
            br
            | Deleting it will also remove it from all dashboards.
        else
          .mp-confirm-delete-description Are you sure you want to delete the bookmark named "#{confirmDeleteBookmark.name}"?