<ng-container *transloco="let t; read: 'library-selector'">
  <h4>{{t('title')}}</h4>
  <div class="list-group" *ngIf="!isLoading">
    <div class="form-check" *ngIf="allLibraries.length > 0">
      <input id="select-all" type="checkbox" class="form-check-input"
             [ngModel]="selectAll" (change)="toggleAll()" [indeterminate]="hasSomeSelected">
      <label for="select-all" class="form-check-label">{{selectAll ? t('deselect-all') : t('select-all')}} All</label>
    </div>
    <ul>
      <li class="list-group-item" *ngFor="let library of allLibraries; let i = index">
        <div class="form-check">
          <input id="library-{{i}}" type="checkbox" class="form-check-input"
                 [ngModel]="selections.isSelected(library)" (change)="handleSelection(library)">
          <label for="library-{{i}}" class="form-check-label">{{library.name}}</label>
        </div>
      </li>
      <li class="list-group-item" *ngIf="allLibraries.length === 0">
        {{t('no-data')}}
      </li>
    </ul>
  </div>
</ng-container>
