<app-add-search
  [title]="'Navios'"
  [primaryButtonText]="'Adicionar Navio'"
  [primaryButtonColor]="'primary'"
  [primaryButtonAction]="openAddEmpForm.bind(this)"
  [secondaryButtonText]="'Buscar Navio'"
  [secondaryButtonColor]="'accent'"
  [secondaryButtonAction]="openAddEmpFormSearch.bind(this)"
>
</app-add-search>

<div class="main-body">
  <div class="table-container" style="overflow-x: auto">
    <table mat-table [dataSource]="dataSource" matSort>
      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
        <td mat-cell *matCellDef="let row">{{ row.id }}</td>
      </ng-container>

      <!-- IMO Column -->
      <ng-container matColumnDef="imo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>IMO</th>
        <td mat-cell *matCellDef="let row">{{ row.imo || "Null" }}</td>
      </ng-container>

      <!-- MMSI Column -->
      <ng-container matColumnDef="mmsi">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>MMSI</th>
        <td mat-cell *matCellDef="let row">{{ row.mmsi || "Null" }}</td>
      </ng-container>

      <!-- Nome Column -->
      <ng-container matColumnDef="nome">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Nome</th>
        <td mat-cell *matCellDef="let row">{{ row.nome || "Null" }}</td>
      </ng-container>

      <!-- Categoria Column -->
      <ng-container matColumnDef="categoria">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Categoria</th>
        <td mat-cell *matCellDef="let row">
          {{ row.categoria == 1 ? "Granel Sólido" : "Granel Líquido" }}
        </td>
      </ng-container>

      <!-- Flag Column -->
      <ng-container matColumnDef="flag">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Flag</th>
        <td mat-cell *matCellDef="let row">
          <ng-container *ngIf="row.flag; else noFlag">
            <div style="display: inline-flex; align-items: center;">
              <img
                [src]="countries[row.flag]?.flagUrl"
                width="20"
                height="15"
                alt="{{ countries[row.flag]?.name }} flag"
                style="margin-right: 8px"
              />
              <span>{{ countries[row.flag]?.name }}</span>
            </div>
          </ng-container>
          <ng-template #noFlag>Não Informado</ng-template>
        </td>
      </ng-container>

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>Action</th>
        <td mat-cell *matCellDef="let row" style="white-space: nowrap">
          <button mat-icon-button (click)="openEditForm(row)">
            <mat-icon style="color: coral">edit</mat-icon>
          </button>
          <button mat-icon-button color="primary" (click)="getAceiteById(row)">
            <mat-icon>visibility</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="deleteEmployee(row.id)" *ngIf="user.role === 'COMPANY'">
            <mat-icon>delete</mat-icon>
          </button>
          <button
            *ngIf="user.role === 'COMPANY'"
            mat-icon-button
            color="accent"
            (click)="addBlackList(row)"
          >
            <mat-icon>block</mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>

  <!-- Add paginator reference #paginator="matPaginator" -->
  <mat-paginator
    #paginator
    [length]="totalItems"
    [pageSize]="pageSize"
    (page)="loadData($event)"
  >
  </mat-paginator>

  <!-- Buttons for navigating to the first and last page -->
  <button
    mat-button
    (click)="paginator.firstPage()"
    [disabled]="paginator.pageIndex === 0"
  >
    Primeira Página
  </button>

  <button
    mat-button
    (click)="paginator.lastPage()"
    [disabled]="paginator.pageIndex === paginator.getNumberOfPages() - 1"
  >
    Última Página
  </button>
</div>