<ng-container *transloco="let t; prefix: 'multi-check-box-form'">
  <div class="d-flex justify-content-between">
    <div class="w-70">
      <h4>{{title()}}</h4>
      @if (tooltip(); as tooltipValue) {
        <span class="text-muted d-block">{{tooltipValue}}</span>
      }
      @if (warning(); as warningValue) {
        <span class="d-block invalid-feedback">{{warningValue}}</span>
      }
    </div>

    @if (!isLoading() && options().length > 0) {
      <span class="form-check float-end" (click)="toggleAll()">
        <input id="select-all" type="checkbox" class="form-check-input"
               [indeterminate]="selectedValues().length > 0 && !allSelected()"
               [checked]="allSelected()" [disabled]="disabled()"
        >
        <label class="form-check-label" for="select-all text-nowrap">{{ allSelected() ? t('deselect-all') : t('select-all')}}</label>
      </span>
    }

  </div>

  <app-loading [loading]="isLoading()" />

  <div class="list-group mt-2">
    <ul class="ps-0">
      @for (opt of options(); track opt.value; let index = $index) {
        <li class="list-group-item">
          <div class="form-check">
            <input id="{{id()}}--option--{{index}}" type="checkbox" class="form-check-input"
                   [checked]="isChecked(opt)" (change)="onCheckboxChange(opt, $event)"
                   [disabled]="isDisabled(opt)"
            >
            <label class="form-check-label" for="{{id()}}--option--{{index}}">{{opt.label}}</label>
            @if (opt.colour) {
              @let c = opt.colour;
              <i class="fas fa-circle" [ngStyle]="{ 'color': `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})` }"></i>
            }
          </div>
        </li>
      } @empty {
        <li class="list-group-item">
          {{t('no-data')}}
        </li>
      }
    </ul>
  </div>

</ng-container>
