.mp-tag-input-container
  .mp-tag-input-top-input-wrapper
    .mp-tag-input-input-wrapper(on={click: $helpers.focusInput})
      - const showSearchIcon = !tags.size
      if showSearchIcon
        .mp-tag-input-mp-icon
          svg-icon(attrs={icon: 'search'})
      else
        for tag in Array.from(tags)
          mp-tag(
            attrs=Object.assign({
              'removable': $helpers.canRemoveTag(tag),
              'size': 'small',
              'tag-name': tag.label,
            },
              tag.attrs
            )
            key=`tag-${tag}`,
            on={remove: () => $helpers.removeTag(tag)}
          )
      input.mp-tag-input-search-input(
        class={'mp-tag-input-empty': showSearchIcon}
        props={type: 'text', value: inputText, placeholder: showSearchIcon ? $attrs['search-text'] : ''}
        on={
          input: $helpers.setInputText,
          keydown: $helpers.handleKeyDown,
        }
        style={width: showSearchIcon ? '100%' : inputWidth}
      )
      .mp-tag-input-border(class={'mp-tag-input-error': $attrs['error']})