<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p *ngIf="!loading && alternativePlans && alternativePlans.length && data.planToDelete.services_count; else areYouSureMsg"
       i18n>Select another plan to migrate services from {{data.planToDelete.name}}</p>
    <ng-template #areYouSureMsg>
      <p i18n>Are you sure you want to delete plan {{data.planToDelete.name}}?</p>
    </ng-template>
    <form [formGroup]="deleteOptions">
      <app-form-errors #formErrors [formGroup]="deleteOptions"></app-form-errors>
      <span class="fl-important-text" *ngIf="alternativePlans && !alternativePlans.length && data.planToDelete.services_count" i18n>
        Cannot delete this plan. No other plan to migrate to.
      </span>
      <mat-form-field *ngIf="alternativePlans && alternativePlans.length && data.planToDelete.services_count" class="fl-margin-top-medium">
        <mat-label i18n>Plan to migrate</mat-label>
        <mat-select formControlName="selectedPlan" placeholder="Plan to migrate" i18n-placeholder>
          <mat-option *ngFor="let alternativePlan of alternativePlans" [value]="alternativePlan.id">
            {{alternativePlan.name}}
          </mat-option>
        </mat-select>
        <mat-error>{{deleteOptions.controls.selectedPlan.errors | errorFormatter}}</mat-error>
      </mat-form-field>
    </form>
  </ng-template>
</app-common-dialog>
