<div>
  <mat-form-field>
    <mat-label>
      <div class="d-flex align-items-center">
        <div class="flex-grow-1" translate>PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_LABEL</div>
        <div
          *ngIf="updates && (totalAvailableUpdateCt$ | async) > 0"
          class="update-badge badge-lg ml-1 text-white"
          translate
          [translateParams]="{ count: totalAvailableUpdateCt$ | async }"
        >
          PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_BADGE
        </div>
      </div>
    </mat-label>
    <mat-select
      class="select pointer"
      [value]="selectedWowInstallationId$ | async"
      (selectionChange)="onClientChange($event)"
      [disabled]="enableControls$ | async | invertBool"
      [disableOptionCentering]="true"
    >
      <mat-select-trigger>
        {{ selectedWowInstallationLabel$ | async }}
      </mat-select-trigger>
      <mat-option [value]="installation.id" *ngFor="let installation of wowInstallations$ | async">
        <div class="d-flex">
          <div class="flex-grow-1">{{ installation.label }}</div>
          <div *ngIf="updates && installation.availableUpdateCount > 0">
            <div class="d-inline update-badge ml-1 text-white">
              {{ installation.availableUpdateCount }}
            </div>
          </div>
        </div>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
