- const disabled = $attrs[`disabled`];
- let saveableInput = true;
- let emptiable = false;
.mp-settings-li(class={
  'mp-settings-li-disabled': disabled,
  'mp-settings-li-editing': editing,
  'mp-settings-li-select': $component.isSelect,
  'mp-settings-li-uploading': uploading,
})
  .mp-settings-li-label= $helpers.label()

  .mp-settings-li-value-cont
    case $helpers.inputType()
      when `text`
        input.remove-chrome-form-style(
          attrs={
            disabled: disabled || !editing || saving,
            placeholder: $attrs[`placeholder`],
            type: `text`,
          }
          props={value: inputValue}
          on={input: $helpers.inputUpdated, keydown: $helpers.handleKeydown}
          hook={insert: $helpers.inputInserted}
        )
        if validationError
          mp-tooltip(attrs={'always-show': true, style: `error`})= validationError
        - emptiable = $attrs[`emptiable`];
        - saveableInput = !!inputValue || emptiable;
      when `password`
        input.remove-chrome-form-style(
          attrs={
            disabled: disabled || !editing || saving,
            placeholder: `New password`,
            type: `password`,
          }
          props={value: editing ? password1 : inputValue}
          on={input: ev => $helpers.passwordUpdated(1, ev)}
          hook={insert: $helpers.inputInserted}
        )
        if editing
          input.remove-chrome-form-style(
            attrs={
              disabled: disabled || saving,
              placeholder: `Confirm password`,
              type: `password`,
            }
            props={value: password2}
            on={input: ev => $helpers.passwordUpdated(2, ev)}
          )
        - saveableInput = !!password1 && password1 === password2;
      when `tag`
        if editing || saving
          .mp-settings-li-menu
            .mp-settings-li-menu-container
              mp-drop-menu(
                attrs={open: selectTagOpen}
                on={change: $helpers.handleTagMenuChange}
              )
                mp-tag-selector(
                  attrs={
                    'selected-tags': JSON.stringify(selectedTags),
                    'all-tags': JSON.stringify(allTags),
                    'saving': saving,
                    'input-text': JSON.stringify({search: 'Search tags...', empty: 'No tags found', create: 'Create new tag:'}),
                    'min-tags': 0,
                  }
                  on={
                    save: $helpers.clickedSave,
                    change: $helpers.tagSelectorChanged,
                  }
                  hook={
                    insert: $helpers.inputInserted,
                  }
                )
        else
          for tagName in Array.from(selectedTags)
            mp-tag(
              attrs={
                'tag-name': tagName,
                clickable: false,
                removable: false,
              }
            )
      when `select`
        if editing || saving
          .mp-settings-li-menu
            mp-button.mp-button-secondary.settings-li-select-button(
              attrs={size: `small`}
              on={click: $helpers.toggleSelectMenu}
            )= selectedValue.label
            .mp-settings-li-menu-container
              mp-drop-menu(
                attrs={open: selectMenuOpen}
                on={change: $helpers.handleSelectMenuChange}
              )
                mp-items-menu.mp-settings-li-menu-list(
                  attrs={sections: JSON.stringify([{items: selectItems}])}
                  on={clickItem: $helpers.selectItem}
                )
        else
          input.remove-chrome-form-style(
            attrs={disabled: true, type: `text`}
            props={value: selectedValue.label}
            hook={insert: $helpers.inputInserted}
          )
      when `file`
        input.remove-chrome-form-style(
          attrs={disabled: true, type: `text`}
          props={value: inputValue}
        )
      when `phone-number`
        input.remove-chrome-form-style(
          attrs={
            disabled: disabled || !editing || saving,
            placeholder: editing ? `+1` : `+1 (415) 123-1322`,
            type: `text`,
            name: editing ? `country-code` : `formatted-phone`,
          }
          props={value: editing ? $helpers.parsePhoneNumber(inputValue).countryCode : inputValue}
          on={input: ev => $helpers.phoneNumberUpdated(ev)}
          hook={insert: $helpers.inputInserted}
        )
        if editing
          input.remove-chrome-form-style(
            attrs={
              disabled: disabled || saving,
              placeholder: `(415) 123-1322`,
              type: `text`,
              name: `local-phone-number`,
            }
            props={value: $helpers.parsePhoneNumber(inputValue).localPhoneNumber}
            on={input: ev => $helpers.phoneNumberUpdated(ev)}
          )
        if validationError
          mp-tooltip(attrs={'always-show': true, style: `error`})= validationError
        - saveableInput = !!localPhoneNumber && !!countryCode;
      when `slot`
        slot
    .mp-settings-li-button
      - const buttonText = $attrs[`button`];
      - const isDeleteButton = $attrs[`delete-button`];
      if isSwitch
        mp-switch(
          attrs={on: switchOn}
          on={change: $helpers.switchChanged}
        )
      else if isFile
        if uploading
          if removable
            .trash.mp-settings-li-icon-btn(on={click: $helpers.clickedRemove})
              svg-icon(attrs={icon: `trashcan`})
          mp-button.mp-button-secondary(
            attrs={size: `small`, disabled: saving}
            on={click: $helpers.stopUploading}
          ) Cancel
          mp-button.mp-button-primary.mp-settings-li-file-save-button(
            attrs={size: `small`, disabled: saving}
            on={click: $helpers.clickedUpload}
          ) #{$attrs[`buttontext`]}
          input.mp-settings-li-hidden(
            attrs={type: `file`, accept: $attrs[`fileaccept`]},
            on={change: $helpers.fileDialogEnded}
            hook={insert: $helpers.fileInserted}
          )
        else
          .mp-settings-li-icon-btn(on={click: $helpers.uploadFile})
            svg-icon(attrs={icon: `edit`})
      else if editing && !$attrs[`hide-buttons`]
        - const saveHandler = $attrs[`custom-handling`] ? $helpers.customSave : $helpers.clickedSave;
        - const cancelHandler = $attrs[`custom-handling`] ? $helpers.customCancel : $helpers.stopEditing;
        mp-button.mp-button-secondary(
          attrs={size: `small`, disabled: saving}
          on={click: cancelHandler}
        ) Cancel
        mp-button.mp-button-primary.mp-settings-li-save-button(
          attrs={size: `small`, disabled: saving || !saveableInput || saveDisabled}
          on={click: saveHandler}
        )
          if saving
            mp-spinner(attrs={color: `white`})
          else
            | Save
      else if !editing && $attrs[`editable`]
        .mp-settings-li-icon-btn(on={click: $helpers.startEditing})
          svg-icon(attrs={icon: `edit`})
      else if buttonText
        mp-button(
          class={
            'mp-button-red': isDeleteButton,
            'mp-button-secondary': !isDeleteButton,
          }
          attrs={
            disabled,
            icon: isDeleteButton ? `trashcan` : ``,
            size: `small`,
          }
          on={click: $helpers.clickedButton}
        )= buttonText