ul.mp-checkbox-list-list(
  attrs={tabindex: 0}
  hook={postpatch: $helpers.handlePostPatch}
)
  - const allSelected = $helpers.allSelected()
  - const checkboxItems = $helpers.getItems()

  if checkboxItems.length
    if showSelectAll
      li.mp-checkbox-list-checkbox-item.mp-checkbox-list-checkbox-select-all(
        class={
            'mp-checkbox-list-two-columns': numColumns === 2,
            'mp-checkbox-list-three-columns': numColumns === 3,
            'mp-checkbox-list-four-columns': numColumns === 4,
        }
        on={click: $helpers.toggleSelectAll}
      )
        .mp-checkbox-list-checkbox-select-icon(
          class={'mp-checkbox-list-checkbox-dash': !allSelected}
        )
          svg-icon(attrs={icon: allSelected ? 'check-checkbox' : 'dash'})
        .mp-checkbox-list-checkbox-label Select all
    each item in checkboxItems
      - const isFocused = focusedItemIndex === item.index
      - const isSelected = item.isSelected
      li.mp-checkbox-list-checkbox-item(
        class={
          'mp-checkbox-list-focused': isFocused,
          'mp-checkbox-list-two-columns': numColumns === 2,
          'mp-checkbox-list-three-columns': numColumns === 3,
          'mp-checkbox-list-four-columns': numColumns === 4,
        }
        on={
          click: () => $helpers.handleClickItem(item),
          mouseenter: () => $helpers.handleMouseenterItem(item),
        }
      )
        .mp-checkbox-list-checkbox-select-icon(
          class={'mp-checkbox-list-colored': isSelected}
        )
          svg-icon(attrs={icon: 'check-checkbox', empty: !isSelected})
        .mp-checkbox-list-checkbox-label
          if item.matches
            each substr, si in item.matches
              span.substr(class={'matches-search': !(si % 2)})= substr
          else
            span.label= item.label