<app-add-search [title]="'Usuários'"></app-add-search>

<div class="main-body">
  <div class="table-container" style="overflow-x: auto">
    <table mat-table [dataSource]="dataSource" matSort>

      <!-- ID do Usuário -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID Usuário</th>
        <td mat-cell *matCellDef="let row">
          {{ row.id || 'N/A' }}
        </td>
      </ng-container>

      <!-- Email -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
        <td mat-cell *matCellDef="let row">
          {{ row.email || "Sem email" }}
        </td>
      </ng-container>

      <!-- Papel -->
      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Papel</th>
        <td mat-cell *matCellDef="let row">
          {{
            row.role === 'COMPANY'
              ? 'ADMIN'
              : row.role === 'CANDIDATE'
              ? 'USUÁRIO'
              : 'Desconhecido'
          }}
        </td>
      </ng-container>

      <!-- Enviar Email -->
      <ng-container matColumnDef="sendEmail">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Enviar Email?</th>
        <td mat-cell *matCellDef="let row">
          <button
            mat-icon-button
            (click)="toggleEmail(row)"
            [ngClass]="{ 'email-enabled': row.sendEmail, 'email-disabled': !row.sendEmail }"
            aria-label="Enviar Email"
          >
            <mat-icon>
              {{ row.sendEmail ? 'toggle_on' : 'toggle_off' }}
            </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>