<mat-card>
  <mat-card-header>
    <mat-card-title>Navio</mat-card-title>
    <mat-card-subtitle>Nome do Navio: {{ data.nome || 'Não informado' }}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <div class="row" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>ID:</strong> {{ data.id || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>IMO:</strong> {{ data.imo || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>MMSI:</strong> {{ data.mmsi || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Nome:</strong> {{ data.nome || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>LOA:</strong> {{ data.loa || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Boca:</strong> {{ data.boca || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>DWT:</strong> {{ data.dwt || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Pontal:</strong> {{ data.pontal || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Ponte Mfold:</strong> {{ data.ponte_mfold || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Mfold Quilha:</strong> {{ data.mfold_quilha || 'Não informado' }}</p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Categoria:</strong> 
          {{ data.categoria === 1 ? 'Granel Sólido' : (data.categoria === 2 ? 'Granel Líquido' : (data.categoria === 3 ? 'Carga Geral' : 'Não informado')) }}
        </p>
      </div>
      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Flag:</strong> 
          <ng-container *ngIf="data.flag; else flagNotAvailable">
            <img [src]="countries[data.flag].flagUrl" width="20" height="15" alt="{{ countries[data.flag].name }} flag" style="margin-right: 8px" />
            <p>{{ countries[data.flag]?.name }}</p>
          </ng-container>
          <ng-template #flagNotAvailable>Não informado</ng-template>
        </p>
      </div>

      <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
        <p><strong>Observações:</strong> {{ data.obs || 'Não informado' }}</p>
      </div>
    </div>
  </mat-card-content>

  <ng-container *ngIf="data.path">
    <mat-card-actions>
      <button (click)="downloadNavioFunction()">Download Documento Q88</button>
    </mat-card-actions>
  </ng-container>
</mat-card>