.mp-data-group-selector-container
  .mp-data-group-selector-button-wrapper
    .mp-data-group-selector-button(
      class={
        'mp-data-group-selector-button-disabled': !$helpers.isEnabled(),
      }
      on={
        click: $helpers.clickDataGroupSelector,
      }
    )
      span.mp-data-group-selector-selected-option= selected.displayName
      .mp-data-group-selector-caret
        svg-icon(attrs={icon: `caret-down`})
    if $attrs[`disabled-reason`]
      mp-tooltip(attrs={
        placement: `right`,
        'max-width': `300px`,
      })
        case $attrs[`disabled-reason`]
          when $helpers.DISABLED_REASON.DATASETS
            | Cannot be used with Datasets
    .mp-data-group-selector-options-container
      mp-drop-menu(
        attrs={
          open: optionsMenuOpen,
        }
        on={
          change: $helpers.handleMenuChange,
        }
      )
        mp-items-menu(
          attrs={
            'progressive': true,
            'sections': JSON.stringify($helpers.getDataGroupsList()),
          }
          on={
            clickItem: $helpers.clickDataGroupOption,
          }
        )