<form novalidate [formGroup]="formGroup">
  <div class="sky-form-group">
    <sky-input-box>
      <label class="sky-control-label" [for]="urlInput.id">
        URL - ruleset v{{ skyUrlValidationOptions.rulesetVersion }}
      </label>
      <input
        #urlInput="skyId"
        class="sky-form-control"
        formControlName="url"
        skyId
      />
    </sky-input-box>
  </div>

  @if (urlControl.errors && urlControl.touched) {
    @if (urlControl.errors.required) {
      <div class="sky-error-label">URL is required.</div>
    }

    @if (urlControl.errors.skyUrl && urlControl.dirty) {
      <div class="sky-error-label">
        Enter a valid URL in the "http(s)://site.domain" format.
      </div>
    }
  }
</form>

<button
  class="sky-btn sky-btn-default sky-col-picker-btn"
  type="button"
  attr.aria-label="ruleset-toggle-button"
  attr.title="ruleset-toggle-button"
  (click)="toggleRuleset()"
>
  <span class="sky-column-selector-action-btn-text"> Toggle Ruleset </span>
</button>
