<form novalidate>
  <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"
        #urlControl="ngModel"
        class="sky-form-control"
        name="url"
        skyId
        [skyUrlValidation]="skyUrlValidationOptions"
        [(ngModel)]="demoModel.url"
      />
    </sky-input-box>
  </div>

  @if (urlControl.errors?.skyUrl && urlControl.dirty && urlControl.touched) {
    <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>
