<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <p class="fl-detail"
     i18n>Select the products to which this product may be upgraded/downgraded. Only products with the same module are shown.</p>
  <p class="fl-detail" *ngIf="!upgrades.length" i18n>No similar products found</p>
  <mat-selection-list #upgradesList color="primary" *ngIf="upgrades.length">
    <mat-list-option *ngFor="let product of upgrades" [value]="product.id"
                     [selected]="upgradeProducts[product.id] === true">
      {{ product.name}}
    </mat-list-option>
  </mat-selection-list>
  <div class="fl-margin-top" *ngIf="upgrades.length">
    <button mat-button color="primary" (click)="saveUpgradeOptions()" i18n>Save upgrade options</button>
  </div>
</div>
