.mp-tag-selector-container
  mp-tag-input.input-el(
    attrs={
      'display-tags': $attrs[`display-tags`],
      error: $attrs[`error`],
      'min-tags': $attrs[`min-tags`],
      saving: $attrs[`saving`],
      'search-text': $helpers.searchText(),
      tags: JSON.stringify($helpers.getSelectedTagAttrs()),
    },
    style={
      'max-height': $attrs[`max-tag-input-height`],
    }
    on={
      change: $helpers.handleInputChange,
      keydown: $helpers.handleKeyDown,
    }
  )

  .mp-tag-selector-hr

  mp-items-menu(
    attrs={
      'empty-message': $helpers.emptyText(),
      progressive: true,
      'search-filter': inputText,
      sections: JSON.stringify($helpers.getMenuSections()),
    }
    style={
      'max-height': $attrs[`max-tag-items-height`],
    }
    props={
      keydownProxyEl: $helpers.getKeydownProxyEl(),
    }
    on={
      clickItem: ev => $helpers.addTag(ev.detail),
    }
  )

  if !$attrs['read-only']
    if $helpers.showCreateButton()
      mp-button-bar.create-btn(attrs={color: `grey`} on={click: () => $helpers.addNewTag(inputText)})
        .mp-tag-selector-create-tag-btn
          .mp-tag-selector-copy= $helpers.createNewText()
          .mp-tag-selector-label-name= inputText
    else
      mp-button-bar.save-btn(
        attrs={color: `blue`, disabled: $attrs[`saving`], title: `Save Tags (Alt+Enter)`}
        on={click: $helpers.saveTags}
      )
        if $attrs[`saving`]
          mp-spinner(attrs={color: `white`})
        else
          | Save