<app-add-search
  [title]="'Berços'"
  [primaryButtonText]="'Adicionar Berço'"
  [primaryButtonColor]="'primary'"
  [primaryButtonAction]="openAddBercoForm.bind(this)"
  [secondaryButtonText]="'Buscar Berço'"
  [secondaryButtonColor]="'accent'"
  [secondaryButtonAction]="openSearchBercoForm.bind(this)"
>
</app-add-search>
<div class="main-body">
  <div class="table-container">
    <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>

      <!-- 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>

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

      <!-- Compri_util Column -->
      <ng-container matColumnDef="compri_util">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          Comprimento Útil
        </th>
        <td mat-cell *matCellDef="let row">{{ row.compri_util || "Null" }}</td>
      </ng-container>

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

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

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

      <!-- Calado_max Column -->


      <!-- 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)"  *ngIf="user.role === 'COMPANY'">
            <mat-icon style="color: coral">edit</mat-icon>
          </button>
          <button mat-icon-button color="primary" (click)="getBercoById(row)">
            <mat-icon>visibility</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="deleteBerco(row.id)"  *ngIf="user.role === 'COMPANY'">
            <mat-icon>delete</mat-icon>
          </button>
          <!-- Use *ngIf instead of @if -->
        </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>