<form autocomplete="off">
  <div class="multiselect-panel">
    <div class="multiselect-panel__content">
      <fieldset
        class="multiselect-panel__fieldset"
        *ngIf="availableOptions?.length > 0 else noOptionsWithCurrentFilters"
      >
        <legend class="multiselect-panel__legend">{{ multiselectTitle }}</legend>
        <p *ngIf="description" class="multiselect-panel__description">{{ description }}</p>

        <div class="multiselect-panel__checkboxes">
          <ul class="multiselect-panel__checkboxes-list">
            <li
              class="multiselect-panel__checkboxes-item"
              *ngFor="let multiselectOption of availableOptions; let i = index"
            >
              <digi-ng-form-checkbox
                [afLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
                (change)="setOptionState(multiselectOption, $event.target.checked)"
                [ngModel]="isSelected(multiselectOption)"
                [name]="multiselectOption.id"
              ></digi-ng-form-checkbox>
            </li>
            <ng-container *ngIf="selectedUnavailableOptions.length">
              <li
                class="multiselect-panel__checkboxes-item"
                [ngClass]="{'multiselect-panel__checkboxes-item--unavailable': i === 0}"
                *ngFor="let multiselectOption of selectedUnavailableOptions; let i = index"
              >
                <digi-ng-form-checkbox
                  [afLabel]="multiselectOption.label + ' (0)'"
                  (change)="setOptionState(multiselectOption, $event.target.checked)"
                  [ngModel]="isSelected(multiselectOption)"
                  [name]="multiselectOption.id"
                  [afSecondary]="true"
                ></digi-ng-form-checkbox>
              </li>
            </ng-container>
          </ul>
        </div>
      </fieldset>
    </div>

    <div class="multiselect-panel__footer">
      <digi-button (click)="emitSelectedOptions()" af-size="m">
        <span>{{confirmButtonText}}</span>
        <span class="msfa__a11y-sr-only">&nbsp;och stäng dialogen för filter {{ multiselectTitle }}</span>
      </digi-button>
    </div>
  </div>
</form>

<ng-template #noOptionsWithCurrentFilters>
  <div class="multiselect-panel__no-options-available">
    <p>
      I kombination med dina nuvarande filterval, finns det inga nya deltagare med {{ multiselectTitlePlural }} att
      filtrera på.
    </p>
  </div>
</ng-template>
