<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="createDatabase()" [formGroup]="createDatabaseForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="createDatabaseForm"></app-form-errors>
      <mat-form-field>
        <mat-label i18n>Name</mat-label>
        <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
        <mat-error>{{createDatabaseForm.controls.name.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <mat-form-field class="full-width">
        <mat-label i18n>Character set</mat-label>
        <mat-select formControlName="character_set" placeholder="Character set" i18n-placeholder>
          <mat-option *ngFor="let charset of availableCharsetKeys"
                      [value]="charset" i18n>
            {{charset}} ({{availableCharsets[charset].display}})
          </mat-option>
        </mat-select>
        <mat-error>{{createDatabaseForm.controls.character_set.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Collate</mat-label>
        <input matInput placeholder="Collate" i18n-placeholder type="text" formControlName="collate">
        <mat-error>{{createDatabaseForm.controls.collate.errors | errorFormatter}}</mat-error>
      </mat-form-field>
    </form>
  </ng-template>
</app-common-dialog>
