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

<mat-toolbar color="primary" class="dialog-toolbar">
  <span class="dialog-toolbar-title">Modify Plan</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">
    <div class="create-plan-content" *ngIf="true">
        <mat-dialog-content [formGroup]="form">
          <mat-form-field class="form-field-stretch">
            <input matInput placeholder="Name" formControlName="planName">
          </mat-form-field>
        </mat-dialog-content>
      </div>

    <div class="rename-plan-content" *ngIf="false">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field class="form-field-stretch">
          <input matInput placeholder="Name" formControlName="planName">
        </mat-form-field>
      </mat-dialog-content>
    </div>

    <div class="delete-plan-content" *ngIf="false">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field>
          <input matInput placeholder="Name" formControlName="planName">
        </mat-form-field>
      </mat-dialog-content>
    </div>

    <div class="make-plan-primary-content" *ngIf="false">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field>
          <input matInput placeholder="Name" formControlName="planName">
        </mat-form-field>
      </mat-dialog-content>
    </div>

    <mat-dialog-actions align="end">
      <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog"> Cancel </button>
      <button mat-raised-button class="btn-primary mat-button" (click)="createPlanSave()" *ngIf="false">Save</button>
      <button mat-raised-button class="btn-primary mat-button" (click)="renamePlanSave()">Save</button>
    </mat-dialog-actions>
</mat-dialog-content>