{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<Hds::Form::Field @layout="vertical" @isInvalid={{this.errorMessage}} data-test-ttl-picker-v2 as |F|>
  <F.Label data-test-form-field-label={{@ttlKey}}>{{this.formField.label}}</F.Label>
  <F.HelperText data-test-help-text={{@ttlKey}}>{{this.formField.helperText}}</F.HelperText>
  <F.Control>
    <Hds::SegmentedGroup as |SG|>
      <SG.TextInput
        @width="100px"
        size="32"
        @value={{this.time}}
        {{on "input" this.setTtlTime}}
        name="{{@ttlKey}}-time"
        aria-label={{concat this.formField.label "time"}}
        autocomplete="off"
        data-test-input={{@ttlKey}}
      />
      <SG.Select
        @width="100px"
        name="{{@ttlKey}}-unit"
        {{on "input" this.setUnit}}
        aria-label={{concat this.formField.label "unit"}}
        data-test-select={{@ttlKey}}
        as |S|
      >
        <S.Options>
          {{#each this.unitOptions as |unit|}}
            <option value={{unit.value}} selected={{eq unit.value this.selectedUnit}}>{{unit.label}}</option>
          {{/each}}
        </S.Options>
      </SG.Select>
    </Hds::SegmentedGroup>
  </F.Control>
  {{#if this.errorMessage}}
    <F.Error data-test-message-error>{{this.errorMessage}}</F.Error>
  {{/if}}
</Hds::Form::Field>