{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<label for={{@attr.name}} class="is-label" data-test-readonly-label>
  {{this.labelString}}
  {{#if @attr.options.helpText}}
    <InfoTooltip>
      <span data-test-help-text>
        {{@attr.options.helpText}}
      </span>
    </InfoTooltip>
  {{/if}}
</label>
{{#if @attr.options.subText}}
  <p class="sub-text">{{@attr.options.subText}}</p>
{{/if}}

{{#if @attr.options.possibleValues}}
  <div class="control is-expanded field is-readOnly">
    <div class="select is-fullwidth">
      <select name={{@attr.name}} id={{@attr.name}} disabled readonly data-test-input={{@attr.name}}>
        <option selected="true" value={{@value}}>
          {{@value}}
        </option>
      </select>
    </div>
  </div>
{{else}}
  <input
    data-test-input={{@attr.name}}
    id={{@attr.name}}
    autocomplete="off"
    spellcheck="false"
    value={{@value}}
    disabled={{true}}
    readonly
    class="field input is-readOnly"
    type={{@attr.type}}
  />
{{/if}}