mixin list-option-label(item)
  .option-label-section
    .option-label(
      attrs={title: item.label}
      class={'theme-strong': item.labelTheme === `strong`}
    )
      if item.matches
        each substr, si in item.matches
          span.substr(class={'matches-search': !(si % 2)})= substr
      else
        span.label= item.label
     if item.subLabel
      .option-sub-label(
        attrs={title: item.subLabel}
        class={'truncate': !item.wrapSubLabel}
      )= item.subLabel

mixin list-option-icon(item)
  if item.icon
    .option-icon(
      attrs={icon: item.icon}
      class={[`align-${item.iconSide || 'left'}`]: true}
    )
      svg-icon(attrs={icon: item.icon, empty: !item.icon})

mixin list-option-action(item, isFocused, isPillFocused)
  if item.hasPill
    .secondary-action.pill(
      class={
        focused: isFocused && isPillFocused,
        disabled: item.isPillDisabled,
      }
      on={
        click: !item.isPillDisabled ? (ev) => $helpers.handleClickPill(item, ev) : null,
        mouseenter: () => $controller.handleMouseenterPill(item),
        mouseleave: () => $controller.handleMouseleavePill(item),
      }
    )
      span= item.pillLabel
      .pill-caret
        svg-icon(attrs={icon: `caret-right`})

  else if item.hasCaret
    .secondary-action.caret
      svg-icon(attrs={icon: `caret-right`})

mixin list-option-content(item, isFocused, isPillFocused)
  +list-option-icon(item)
  +list-option-label(item)
  +list-option-action(item, isFocused, isPillFocused)

.screen-list-container(
  attrs={tabindex: 0}
  hook={postpatch: () => $controller.handlePostPatch()}
)
  -
    const {
      emptyMessage,
      focusedItemIndex,
      isPillFocused,
      searchFilter,
      sections,
      sectionsHint,
    } = $controller.getDisplayState()

  if !sections.length
    if searchFilter
      li.list-option.list-empty Your search returned no results
    else if emptyMessage
      li.list-option.list-empty= emptyMessage
  else
    if sectionsHint
      .sections-hint= sectionsHint
    each section, idx in sections
      if idx > 0
        .section-divider
      if section.label
        .section-label
          span.label= section.label
          if section.datasetDisplayName
            span.dataset-name= section.datasetDisplayName

      if section.isLoading
        .loading-items
          mp-spinner
      else
        ul.screen-options-list
          each item in section.items
            - const isFocused = focusedItemIndex === item.index
            - const optionType = $attrs[`multiple`] ? `multiple` : `select`;
            li.list-option(
              class={
                [`for-${optionType}-type`]: true,
                disabled: item.isDisabled,
                expander: item.isExpander,
                focused: isFocused,
                selectable: !item.isDisabled,
                selected: item.isSelected,
              }
              on={
                click: !item.isDisabled ? ev => $helpers.handleClickItem(item, ev) : null,
                mouseenter: () => $controller.handleMouseenterItem(item),
              }
            )
              if $attrs[`multiple`] && !item.isExpander
                mp-checkbox(
                  attrs={
                    checked: item.isSelected,
                    disabled: item.isDisabled,
                    focused: isFocused,
                  }
                )
                  +list-option-content(item, isFocused, isPillFocused)
              else
                +list-option-content(item, isFocused, isPillFocused)