<div class="select-wrapper">
  @if (label) {
    <label [for]="id">{{ label }}</label>
  }
  <select
    [id]="id"
    [formControl]="control"
    [class.is-invalid]="isInvalid"
    [class.is-valid]="isValid"
    (blur)="markAsTouched()"
    [attr.aria-describedby]="id + '-description'">
    @if (defaultOption) {
      <option [ngValue]="null" disabled selected>
        {{ defaultOption }}
      </option>
    }

    <ng-content></ng-content>

    @if (options) {
      @for (option of options; track option.value) {
        <option [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
          {{ option.text ?? option.value }}
        </option>
      }
    }

    @if (groups) {
      @for (group of groups; track group) {
        <optgroup [label]="group.label">
          @for (option of group.options; track option.value) {
            <option [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
              {{ option.text ?? option.value }}
            </option>
          }
        </optgroup>
      }
    }
  </select>
  @if (description) {
    <small [id]="id + '-description'" class="form-text">{{ description }}</small>
  }

  @if (isInvalid) {
    <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>
