mixin searchable-text(value, placeholder, searchTokens)
  if !value
    i= placeholder
  else if searchTokens
    for token, pos in searchTokens
      if pos % 2 === 1
        = token
      else
        b= token
  else
    = value
mp-drop-menu(
  attrs={open}
  on={change: $helpers.handleMenuChange}
)
  .mp-dashboard-selector-container
    .mp-dashboard-selector-search-container
      mp-icon-input(
        attrs={
          icon: `search`,
          placeholder: `Search dashboards...`,
        }
        on={input: $helpers.handleSearchInput}
        props={value: searchFilter}
        hook={insert: $helpers.handleSearchInputInsertHook}
      )

    if !(controller && controller.getLoaded())
      .mp-dashboard-selector-loading
        mp-spinner
    else
      .mp-dashboard-selector-items-container
        if sections.length === 0
          .mp-dashboard-selector-empty-state
            = searchFilter ? `No dashboards found.` : `No dashboards available, try creating a dashboard.`
        else
          each section, sectionIndex in sections
            if sectionIndex !== 0
              .mp-dashboard-selector-divider

            section
              .mp-dashboard-selector-section-header
                = section.title

              each item in section.items
                .mp-dashboard-selector-item-row(
                  key=item.dashboard.id
                  class={
                    'mp-dashboard-selector-active': activeItem && (activeItem.dashboard.id === item.dashboard.id),
                    'mp-dashboard-selector-disabled': $helpers.getCheckDisabled(item),
                    'mp-dashboard-selector-starred': item.dashboard.is_starred,
                  }
                  on={
                    click: $helpers.getItemActionHandler(item),
                    mouseover: $helpers.getItemMouseOverHandler(item),
                  }
                  hook={insert: $helpers.handleItemRowInsertHook}
                )
                  if multiselect
                    .mp-dashboard-selector-checkbox(
                      class={'mp-dashboard-selector-checked': $helpers.getChecked(item)}
                    )
                      svg-icon(attrs={icon: `check-checkbox`})

                  .mp-dashboard-selector-text
                    .mp-dashboard-selector-title(
                      class={'mp-dashboard-selector-placeholder': !item.dashboard.title}
                    )
                      +searchable-text(item.dashboard.title, `Untitled dashboard`, item.titleSearchTokens)

                    .mp-dashboard-selector-description(
                      class={'mp-dashboard-selector-placeholder': !item.dashboard.description}
                    )
                      +searchable-text(item.dashboard.description, `No description`, item.descriptionSearchTokens)

                  if !multiselect
                    .mp-dashboard-selector-action.mp-dashboard-selector-star(
                      on={click: $helpers.getStarActionHandler(item)}
                    )
                      svg-icon.mp-dashboard-selector-icon(attrs={icon: `star-favorite`})

      if busy
        .mp-dashboard-selector-busy
          mp-spinner
      else if creating
        .mp-dashboard-selector-create-field
          mp-input-group(
            attrs={placeholder: `New dashboard title`, busy}
            on={
              input: $helpers.handleCreateInput,
              submit: $helpers.handleCreateSubmit,
            }
            props={value: newTitle}
            hook={insert: $helpers.handleCreateInputInsertHook}
          )
      else if multiselect && (selectionChanges.size > 0)
        mp-button-bar.mp-button-bar-secondary(
          on={click: $helpers.handleApplyClick}
        )
          | Apply
      else if !disableCreateDashboard
        mp-button-bar.mp-button-bar-secondary(
          on={click: $helpers.handleCreateClick}
        )
          | Create new dashboard