<style>
  .form-field-stretch {
    padding-top: 20px;
    width: 100%;
  }
</style>

<mat-toolbar color="primary" class="dialog-toolbar">
  <span class="dialog-toolbar-title" [ngSwitch]="data.mode">
    <span *ngSwitchCase="'rename'">Rename plan</span>
    <span *ngSwitchCase="'create'">Create plan</span>
  </span>
  <button mat-button mat-dialog-close class="close-btn">
    <i class="material-icons">clear</i>
  </button>
</mat-toolbar>

<mat-dialog-content class="mat-typography dialog-with-toolbar">
  <ng-container [ngSwitch]="data.mode">
    <div class="rename-plan-content" *ngSwitchCase="'rename'">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field class="form-field-stretch">
          <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
        </mat-form-field>
      </mat-dialog-content>
    </div>

    <div class="create-plan-content" *ngSwitchCase="'create'">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field class="form-field-stretch">
          <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
        </mat-form-field>
      </mat-dialog-content>
    </div>
  </ng-container>

  <mat-dialog-actions align="end">
    <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close dialog" (click)="onCancel()">Cancel</button>

    <button mat-rasied-button class="btn-primary mat-button" [disabled]="form.invalid" (click)="onSubmit()">
      <ng-container [ngSwitch]="data.mode">
        <span *ngSwitchCase="'rename'">Rename plan</span>
        <span *ngSwitchCase="'create'">Create plan</span>
      </ng-container>
    </button>
  </mat-dialog-actions>
</mat-dialog-content>