.select-container
  - const displayedOption = $helpers.displayedOption()
  .select-choose-option(style={'text-transform': $helpers.textTransform()} on={click: () => $helpers.toggleMenu()})
    span.select-button-flex-wrapper
      span.select-selected-option(
        class={
          'select-disabled-option': $helpers.disabledOptions().includes(displayedOption),
        }
      )= displayedOption
      svg-icon(attrs={icon: `caret-down`})
  .select-drop-menu-container
    mp-drop-menu(
      attrs={open: isOpen}
      on={change: ev => $helpers.menuChange(ev)}
    )
      ul.select-options(
        style={
          width: $helpers.dropMenuWidth(),
          'max-height': $helpers.dropMenuHeight(),
        }
      )
        each option in $helpers.options()
          li.select-option(
            style={'text-transform': $helpers.textTransform()}
            class={
              'select-selected-option': option === displayedOption,
              'select-disabled-option': $helpers.disabledOptions().includes(option),
            }
            on={click: () => $helpers.chooseOption(option)}
          )= option