<div mat-dialog-title>
  <h1>{{ 'Editar Berço' }}</h1>
</div>

<form [formGroup]="bercoForm" (ngSubmit)="onFormSubmit()">
  <div mat-dialog-content class="content">
    <div class="row">
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>Nome</mat-label>
        <input matInput type="text" formControlName="nome">
        <mat-error *ngIf="bercoForm.get('nome')?.invalid">{{ getErrorMessage('nome') }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <mat-form-field class="field full-medium" appearance="outline">
        <mat-label>Comprimento Estrutural</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="compri_estrutural">
        <mat-error *ngIf="bercoForm.get('compri_estrutural')?.invalid">{{ getErrorMessage('compri_estrutural') }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field full-small" appearance="outline">
        <mat-label>Comprimento Útil</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="compri_util">
        <mat-error *ngIf="bercoForm.get('compri_util')?.invalid">{{ getErrorMessage('compri_util') }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <mat-form-field class="field full-medium" appearance="outline">
        <mat-label>DWT</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="dwt">
        <mat-error *ngIf="bercoForm.get('dwt')?.invalid">{{ getErrorMessage('dwt') }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field full-small" appearance="outline">
        <mat-label>Largura</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="largura">
        <mat-error *ngIf="bercoForm.get('largura')?.invalid">{{ getErrorMessage('largura') }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <mat-form-field class="field full-medium" appearance="outline">
        <mat-label>Profundidade</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="profundidade">
        <mat-error *ngIf="bercoForm.get('profundidade')?.invalid">{{ getErrorMessage('profundidade') }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field full-small" appearance="outline">
        <mat-label>Calado Máximo</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="calado_max">
        <mat-error *ngIf="bercoForm.get('calado_max')?.invalid">{{ getErrorMessage('calado_max') }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <mat-form-field class="field medium" appearance="outline">
        <mat-label>Boca Máxima</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="boca_max">
        <mat-error *ngIf="bercoForm.get('boca_max')?.invalid">{{ getErrorMessage('boca_max') }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field small" appearance="outline">
        <mat-label>LOA Máxima</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="loa_max">
        <mat-error *ngIf="bercoForm.get('loa_max')?.invalid">{{ getErrorMessage('loa_max') }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <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.id">
            {{ cat.nome }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="bercoForm.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">Salvar</button>
  </div>
</form>