<ng-container>
  <div class="form-check" [class.form-check-group]="group" [class.form-check-inline]="inline">
    <input
      [id]="id"
      type="radio"
      [value]="value"
      class="form-check-input"
      [name]="name"
      [class.is-invalid]="isInvalid"
      [class.is-valid]="isValid"
      [formControl]="control"
      [attr.aria-describedby]="id + '-help'" />

    <label class="form-check-label" [for]="id">
      <div #customLabel>
        <ng-content select="[label]"></ng-content>
      </div>
      @if (!customLabel.hasChildNodes()) {
        {{ label }}
      }
    </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'">
        <div #customError>
          <ng-content select="[error]"></ng-content>
        </div>
        @if (!customError.hasChildNodes()) {
          {{ invalidMessage | async }}
        }
      </div>
    }
  </div>

  @if (isInvalid && !group) {
    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
      <div #customError>
        <ng-content select="[error]"></ng-content>
      </div>
      @if (!customError.hasChildNodes()) {
        {{ invalidMessage | async }}
      }
    </div>
  }
</ng-container>
