<ng-container>
  <div class="form-check" [class.form-check-group]="group" [class.form-check-inline]="inline">
    @if (toggle) {
      <div class="toggles">
        <label [for]="id">
          <ng-container *ngTemplateOutlet="htmlLabel"></ng-container>
          <input
            [id]="id"
            type="checkbox"
            [formControl]="control"
            [attr.aria-describedby]="id + '-help'"
            (click)="$event.stopPropagation()" />
          <span class="lever"></span>
        </label>
      </div>
    } @else {
      <input
        [id]="id"
        type="checkbox"
        class="form-check-input"
        [class.is-invalid]="isInvalid"
        [class.is-valid]="isValid"
        [class.semi-checked]="indeterminate"
        [formControl]="control"
        [attr.aria-describedby]="id + '-help'"
        (click)="$event.stopPropagation()" />
      <label class="form-check-label" [for]="id">
        <ng-container *ngTemplateOutlet="htmlLabel"></ng-container>
      </label>
    }

    @if (group) {
      <small [id]="id + '-help'" class="form-text">
        <ng-content></ng-content>
      </small>
    }

    @if (isInvalid && group) {
      <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
        <ng-container *ngTemplateOutlet="error"></ng-container>
      </div>
    }
  </div>

  @if (isInvalid && !group) {
    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
      <ng-container *ngTemplateOutlet="error"></ng-container>
    </div>
  }
</ng-container>

<ng-template #error>
  <div #customError>
    <ng-content select="[error]"></ng-content>
  </div>
  @if (!customError.hasChildNodes()) {
    {{ invalidMessage | async }}
  }
</ng-template>

<ng-template #htmlLabel>
  <div #customLabel>
    <ng-content select="[label]"></ng-content>
  </div>
  @if (!customLabel.hasChildNodes()) {
    {{ label }}
  }
</ng-template>
