{{#if @attr}}
  <div class="field" data-test-regex-validator-pattern>
    <div class="regex-label-wrapper">
      <div class="regex-label">
        <label for={{@attr.name}} class="is-label">
          {{@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}}
            {{#if @attr.options.docLink}}
              <DocLink @path={{@attr.options.docLink}}>
                See our documentation
              </DocLink>
              for help.
            {{/if}}
          </p>
        {{/if}}
      </div>
      <div>
        <Toggle
          @name={{concat @attr.name "-validation-toggle"}}
          @status="success"
          @size="small"
          @checked={{this.showTestValue}}
          @onChange={{this.toggleTestValue}}
        >
          <span class="has-text-grey">Validation</span>
        </Toggle>
      </div>
    </div>
    <input
      id={{@attr.name}}
      data-test-input={{@attr.name}}
      autocomplete="off"
      spellcheck="false"
      {{on "change" @onChange}}
      value={{@value}}
      class="input"
    />
  </div>
{{/if}}
{{#if this.showTestValue}}
  <div data-test-regex-validator-test-string>
    <label for="regex-test-val" class="is-label">
      {{this.testInputLabel}}
    </label>
    {{#if @testInputSubText}}
      <p class="sub-text">{{@testInputSubText}}</p>
    {{/if}}
    <input
      data-test-input="regex-test-val"
      id="regex-test-val"
      autocomplete="off"
      spellcheck="false"
      value={{this.testValue}}
      {{on "change" this.updateTestValue}}
      class="input {{if this.regexError 'has-error'}}"
    />

    {{#if this.testValue}}
      <div data-test-regex-validation-message>
        {{#if (not @value)}}
          <AlertInline
            @type="warning"
            @message={{concat
              "A pattern has not been entered. Enter a pattern to check this "
              (lowercase this.testInputLabel)
              " against it."
            }}
          />
        {{else if this.regexError}}
          <AlertInline @type="danger" @message="This test string does not match the pattern regex." />
        {{else}}
          <div class="message-inline">
            <Icon @name="check-circle-fill" class="has-text-success" />
            <p data-test-inline-success-message>
              This test string matches the pattern regex.
            </p>
          </div>
        {{/if}}
      </div>
    {{/if}}
  </div>
{{/if}}
{{#if @showGroups}}
  <div class="has-top-margin-l">
    <label class="is-label">Groups</label>
    {{! check with design but should likely show a placeholder if testValue is blank }}
    {{#if (and @value this.testValue (not this.regexError))}}
      <div class="regex-group">
        {{#each this.captureGroups as |group|}}
          <span class="regex-group-position" data-test-regex-group-position={{group.position}}>
            <span>{{group.position}}</span>
          </span>
          <span class="regex-group-value" data-test-regex-group-value={{group.position}}>
            {{group.value}}
          </span>
        {{/each}}
      </div>
    {{else}}
      <p class="sub-text" data-test-regex-validator-groups-placeholder>
        Enter pattern and test string to show groupings.
      </p>
    {{/if}}
  </div>
{{/if}}