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