mixin autoresizing-builder-filter-input(placeholder)
  mp-autoresizing-input(
    attrs={
      'focus': true,
      'initial-width': 140,
      'input-style-overrides': JSON.stringify({
        'font-size': `16px`,
      }),
      'placeholder': placeholder,
    }
    on={input: $helpers.searchFilterInput}
    hook={insert: $helpers.addBuilderKeydownProxyEl}
    props={value: builder.searchFilter}
  )

.mp-event-selector-wrapper
  - const eventLabel = $helpers.getEventLabel()
  .selector-section
    .event-clickable.selector-event-name(
      on={click: $helpers.clickEventName}
    )
      if $helpers.isEventsBuilderOpen()
        +autoresizing-builder-filter-input(eventLabel)
      else
        span= eventLabel
      .event-builder-container(
        class={[$helpers.ELEMENTS_BY_CSS_CLASS.EVENT_DROPDOWN_PLACEHOLDER]: true}
      )

    - const propertyFilters = $helpers.getPropertyFilters()
    - const isAddingPropertyFilter = $helpers.isPropertyFilterMenuOpen(propertyFilters.length)
    if propertyFilters.length > 0
      .property-filter-separator-label.where-label where

    each propertyFilter, propertyFilterIndex in propertyFilters
      .property-filter-clickable.property-filter(
        on={click: ev => $helpers.clickPropertyFilter(ev, propertyFilterIndex)}
      )
        .property-filter-builder-container(
          class={[$helpers.ELEMENTS_BY_CSS_CLASS.PROPERTY_FILTER_DROPDOWN_PLACEHOLDER]: true}
        )
        if $helpers.isPropertyFilterMenuOpen(propertyFilterIndex)
          +autoresizing-builder-filter-input($helpers.truncateMiddle($helpers.getPropertyFilterLabel(propertyFilterIndex), 100))
        else
          div
            each part in $helpers.getPropertyFilterLabelParts(propertyFilterIndex)
              span.property-filter-label-part(
                attrs={
                  title: part.label,
                }
                class={'highlight': part.highlight}
              )= $helpers.truncateMiddle(part.label, 25)
        .property-filter-remove(
          on={click: ev => $helpers.removePropertyFilter(ev, propertyFilterIndex)}
        )
          svg-icon(attrs={icon: `x`})

      if propertyFilterIndex !== propertyFilters.length - 1
        .property-filter-separator-label and

    if $helpers.hasSelectedEvent()
      .property-filter-add-section.property-filter-clickable(
        class={'property-filter-pane-open': isAddingPropertyFilter}
      )
        .property-filter-builder-container(
          class={[$helpers.ELEMENTS_BY_CSS_CLASS.PROPERTY_FILTER_DROPDOWN_PLACEHOLDER]: true}
        )
        .property-filter-search-wrapper
          .property-filter-search-icon-wrapper
            svg-icon(attrs={icon: `search`})
          input.remove-chrome-form-style.property-filter-search-input(
            class={
              'property-filter-search-active': isAddingPropertyFilter,
            }
            props={
              autoFocus: true,
              placeholder: `Search`,
              type: `text`,
              value: builder.searchFilter,
            }
            on={
              input: $helpers.searchFilterInput,
            }
          )
        mp-button.mp-button-secondary.property-filter-filter-button(
          attrs={
            icon: `plus`,
            size: `small`,
          }
          on={
            click: $helpers.clickAddPropertyFilter,
          }
        ) Filter

  if stagedCustomEvent.eventSelectors.length > 1
    .selector-remove(
      class={'property-filter-pane-open': isAddingPropertyFilter}
      on={click: () => $helpers.removeSelector()}
    )
      svg-icon(attrs={icon: 'x'})