<div class="flex">
  {{hk-input
    isValid=isValid
    isInvalid=isInvalid
    key-up=(action "onChange")
    id=id
    value=inputValue
    name=name
    class=inputClasses
    autofocus=autofocus
    disabled=disabled
    maxlength=maxlength
    placeholder=placeholder
    readonly=inputReadonly
    aria-describedby=errorsListId
    }}

  {{#if isShowingStatus}}
    {{#if isValidating}}
      <div class="flex items-center bg-light-silver br1 br--right bt br bb b--light-gray ph2" data-test-target="loading-icon">
        <MalibuIcon @name="loading-16" @iconClass="malibu-fill-gradient-dark-gray" @size={{16}} @title="Loading" />
      </div>
    {{else if isValid}}
      <div class="flex items-center bg-lightest-green br1 br--right bt br bb b--light-green ph2" data-test-target="valid-icon">
        <MalibuIcon @name="success-badge-16" @iconClass="malibu-fill-gradient-green" @size={{16}} @title="{{name}} is valid" />
      </div>
    {{else}}
      <div class="flex items-center bg-lightest-red br1 br--right bt br bb b--light-red ph2" data-test-target="invalid-icon">
        <MalibuIcon @name="failure-badge-16" @iconClass="malibu-fill-gradient-red" @size={{16}} @title="{{name}} is invalid" />
      </div>
    {{/if}}
  {{/if}}
</div>
