{{this.yeild}}
<div class="field is-grouped">
  <div class="control">
    <input
      data-test-ttlform-value
      value={{this.time}}
      id="time-foobar"
      type="text"
      name="time"
      class="input"
      pattern="[0-9]*"
      oninput={{perform this.updateTime value="target.value"}}
    />
  </div>
  <div class="control">
    <Select
      data-test-ttlform-unit
      @name="ttl-unit"
      @options={{this.unitOptions}}
      @onChange={{action "updateUnit"}}
      @selectedValue={{this.unit}}
      @isFullwidth={{true}}
    />
  </div>
</div>
{{#if this.errorMessage}}
  <div class="columns is-mobile is-variable is-1 ttl-value-error">
    <div class="is-narrow message-icon">
      <Icon @name="x-square-fill" class="has-text-danger" />
    </div>
    <div class="has-text-danger">
      {{this.errorMessage}}
    </div>
  </div>
{{/if}}