<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p *ngIf="currentPlan" i18n>Current plan: {{currentPlan.name}}</p>
    <div *ngIf="(availablePlans && !availablePlans.length) || hasOnlySelectedPlan()" class="fl-detail" i18n>
      No other plans to choose from.
    </div>
    <form appFormSubmit (ngSubmit)="changePlan()"
          *ngIf="(availablePlans && availablePlans.length) && !hasOnlySelectedPlan()" [formGroup]="changePlanFrom">
      <mat-form-field appFlex="90">
        <mat-label i18n>New plan</mat-label>
        <mat-select formControlName="selectedPlan" placeholder="New plan" i18n-placeholder>
          <mat-option *ngFor="let plan of availablePlans" [value]="plan.id">
            {{plan.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </form>
  </ng-template>
</app-common-dialog>
