<h1 mat-dialog-title></h1>
<mat-dialog-content>
  <form [formGroup]="form">
    <mat-form-field>
      <input matInput type="text" min="3" [(ngModel)]="profileField.name" formControlName="name"
        placeholder="{{'profileField.name' | i18n}}">
    </mat-form-field>


    <mat-form-field>
      <mat-select [(ngModel)]="profileField.type" formControlName="type" placeholder="{{'profileField.type' | i18n}}">
        <mat-option *ngFor="let type of types" [value]="type">
          {{'profileField.type.' + type | i18n}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div [ngSwitch]="profileField.type">
      <mat-form-field *ngSwitchCase="'TEXT'">
        <input matInput type="text" max="255" [(ngModel)]="profileField.value" formControlName="value"
          placeholder="{{'profileField.value' | i18n}}">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'DATE'">
        <input matInput [matDatepicker]="picker" [(ngModel)]="profileField.value" formControlName="value"
          placeholder="{{'profileField.value' | i18n}}">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'URL'">
        <input matInput type="url" [(ngModel)]="profileField.value" formControlName="value"
          placeholder="{{'profileField.value' | i18n}}">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'EMAIL'">
        <input matInput type="email" [(ngModel)]="profileField.value" formControlName="value"
          placeholder="{{'profileField.value' | i18n}}">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'NUMBER'">
        <input matInput type="number" [(ngModel)]="profileField.value" formControlName="value"
          placeholder="{{'profileField.value' | i18n}}">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'BLOB'">
        <textarea matInput [(ngModel)]="profileField.blob" formControlName="blob"
          placeholder="{{'profileField.value' | i18n}}"></textarea>
      </mat-form-field>
    </div>


    <mat-form-field>
      <mat-select [(ngModel)]="profileField.visibility" formControlName="visibility"
        placeholder="{{'profileField.visibility' | i18n}}">
        <mat-option *ngFor="let visibility of visibilities" [value]="visibility">
          {{'profileField.visibility.' + visibility | i18n}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="number" min="0" [(ngModel)]="profileField.index" formControlName="index"
        placeholder="{{'profileField.index' | i18n}}">
    </mat-form-field>
  </form>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
  <button [disabled]="form.invalid" mat-raised-button [mat-dialog-close]="profileField" color="accent">{{'save' | i18n}}</button>
</mat-dialog-actions>