{{#if this.hideToggle}}
  <span class="ttl-picker-label">{{this.label}}</span><br />
  <div class="sub-text">
    <span>{{this.helperText}}</span>
    {{#if this.description}}
      <ToolTip @verticalPosition="below" as |T|>
        <T.Trigger data-test-tooltip-trigger tabindex="-1">
          <Icon @name="info" aria-label="description" />
        </T.Trigger>
        <T.Content @defaultClass="tool-tip">
          <div class="box" data-test-hover-copy-tooltip-text>
            {{this.description}}
          </div>
        </T.Content>
      </ToolTip>
    {{/if}}
  </div>
{{else}}
  <Toggle
    @name={{this.label}}
    @status="success"
    @size="small"
    @onChange={{action "toggleEnabled"}}
    @checked={{this.enableTTL}}
    data-test-ttl-toggle
  >
    <span class="ttl-picker-label is-large">{{this.label}}</span><br />
    <div class="description has-text-grey">
      <span>{{this.helperText}}</span>
      {{#if this.description}}
        <ToolTip @verticalPosition="below" as |T|>
          <T.Trigger data-test-tooltip-trigger tabindex="-1">
            <Icon @name="info" aria-label="description" />
          </T.Trigger>
          <T.Content @defaultClass="tool-tip">
            <div class="box" data-test-hover-copy-tooltip-text>
              {{this.description}}
            </div>
          </T.Content>
        </ToolTip>
      {{/if}}
    </div>
  </Toggle>
{{/if}}
{{#if (or this.enableTTL this.hideToggle)}}
  <div class={{unless this.hideToggle "ttl-show-picker"}} data-test-ttl-picker-group={{this.label}}>
    <div class="field is-grouped is-marginless">
      <div class="control is-marginless">
        <input
          data-test-ttl-value={{this.label}}
          value={{this.time}}
          id="time-{{this.elementId}}"
          type="text"
          name="time"
          class="input{{if this.errorMessage ' has-error'}}"
          oninput={{perform this.updateTime value="target.value"}}
          pattern="[0-9]*"
        />
      </div>
      <div class="control">
        <Select
          data-test-ttl-unit={{this.label}}
          @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}}
  </div>
  {{yield}}
{{/if}}