.ps-container(
  class={
    'ps-display-context-custom-event': $helpers.getDisplayContext() === $helpers.DisplayContext.CustomEvent,
  }
)
  .ps-title-section
    .ps-title-label Filter by a property
  - const tabs = $helpers.getTabs()
  if tabs
    mp-toggle(
      attrs={
        theme: `lite`,
        selected: selectedTab,
      }
      on={
        select: $helpers.selectTab,
      }
    )
      for tab in tabs
        mp-toggle-option(
          attrs={
            value: tab.value,
            disabled: tab.disabled,
          }
        )= tab.label
  mp-items-menu(
    attrs={
      progressive: true,
      'search-filter': $helpers.getSearchFilter(),
      sections: JSON.stringify($helpers.getMenuSections())
    }
    props=$helpers.getItemsMenuProps()
    on={
      clickItem: $helpers.clickMenuItem,
    }
  )