<div mat-dialog-title>
  <h1>{{ "Buscar Navio" }}</h1>
</div>

<form [formGroup]="empForm" (ngSubmit)="onFormSubmit()">
  <div mat-dialog-content class="content">
    <div class="row">
      <!-- IMO -->
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>IMO</mat-label>
        <input
          matInput
          type="number"
          (keydown)="preventNegative($event)"
          min="0"
          formControlName="imo"
        />
        <mat-error *ngIf="empForm.get('imo')?.invalid">{{
          getErrorMessage("imo")
        }}</mat-error>
      </mat-form-field>
    </div>
    <!--
      <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" : cat === 2 ? "Granel Líquido" : "Carga Geral" }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="empForm.get('categoria')?.invalid">{{
          getErrorMessage("categoria")
        }}</mat-error>
      </mat-form-field>

      <mat-form-field class="field small" appearance="outline">
        <mat-label>Flag</mat-label>
        <mat-select formControlName="flag">
          <mat-select-trigger>
            <img
              *ngIf="selectedCountry"
              [src]="selectedCountry.flagUrl"
              width="20"
              height="15"
              alt="{{ selectedCountry.name }} flag"
              style="margin-right: 8px"
            />
            {{ selectedCountry?.name }}
          </mat-select-trigger>
          <mat-option
            *ngFor="let country of countries"
            [value]="country.id"
            (onSelectionChange)="onCountrySelected(country)"
          >
            <img
              [src]="country.flagUrl"
              width="20"
              height="15"
              alt="{{ country.name }} flag"
              style="margin-right: 8px"
            />
            {{ country.name }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="empForm.get('flag')?.invalid">
          {{ getErrorMessage("flag") }}
        </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>