<div mat-dialog-title>
  <h1>{{ "Buscar Berço" }}</h1>
</div>

<form [formGroup]="empForm" (ngSubmit)="onFormSubmit()">
  <div mat-dialog-content class="content">
    <div class="row">
      <!-- Nome -->
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>Nome</mat-label>
        <input matInput type="text" formControlName="nome" />
        <mat-error *ngIf="empForm.get('nome')?.invalid">{{
          getErrorMessage("nome")
        }}</mat-error>
      </mat-form-field>

      <!-- Categoria -->
      <mat-form-field class="field medium" appearance="outline">
        <mat-label>Categoria</mat-label>
        <mat-select formControlName="categoria">
          <mat-option *ngFor="let cat of categoria" [value]="cat">
            {{ cat === 1 ? "Granel Sólido" : "Granel Líquido" }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="empForm.get('categoria')?.invalid">{{
          getErrorMessage("categoria")
        }}</mat-error>
      </mat-form-field>
    </div>
  </div>

  <div mat-dialog-actions class="action">
    <button
      mat-raised-button
      type="button"
      color="warn"
      [mat-dialog-close]="false"
    >
      Cancelar
    </button>
    <button mat-raised-button color="primary" type="submit">Buscar</button>
  </div>
</form>