<form>
  <label class="hk-label db mb2" for={{inputId}}>{{labelWithAssert}}</label>
  <div class="flex flex-column flex-row-ns items-center-ns w-100">
    {{hk-input type='text'
            value=deferredValue
            disabled=isDisabled
            maxlength=maxlength
            placeholder=placeholder
            id=inputId
            autocomplete="off"
            data-test-target="hk-inline-value"
            class="mr2 mb2 w-100 mw6"
            key-up=(action 'valueChanged' valueHasChanged)}}
    <div class="flex items-center mb2 {{unless valueHasChanged 'clip'}}" data-test-target="hk-inline-buttons">
      {{hk-button
        onClick=(action 'save' deferredValue)
        type="submit"
        default="Save"
        disableWhen=isUpdateDisabled
        buttonType="primary"
        data-test-target="hk-inline-submit"
        class="mr1"
      }}
      {{hk-button
        onClick=(action 'cancelEdit')
        type="cancel"
        default="Cancel"
        buttonType="secondary"
        data-test-target="hk-inline-cancel"
      }}
    </div>
  </div>
</form>
