<div class="items-container">
    <div id="navigation" class="mb-8">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
            <mat-icon style="color: white;">arrow_back</mat-icon>
            <div class="page-name ml-4">Usuarios y Perfiles</div>
        </div>
    </div>
    <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
        <mat-card-title style="text-align: center;">Administración de usuarios</mat-card-title>
        <mat-card-content>
            <div class="loader-container prevent-select" *ngIf="isLoading">
                <mat-spinner></mat-spinner>
                <h2 class="loader-label">Cargando...</h2>
            </div>
            <div class="error-container prevent-select" *ngIf="!isLoading && hasError">
                <mat-icon style="color: #e53935; transform: scale(5); margin: 48px;">error</mat-icon>
                <h1 style="color: #e53935;">¡Error!</h1>
                <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
            </div>
            <div class="table-container" [hidden]="!(!isLoading && !hasError)" style="overflow: hidden;">
                <div class="actions-container pt-8">
                    <mat-form-field appearance="outline" style="width:calc(85% - 8px);margin-right: 8px;box-sizing:border-box">
                        <mat-label>Filtro</mat-label>
                        <input matInput (keyup)="applyFilter($event)" placeholder="Escriba algo para iniciar una búsqueda" #input>
                        <mat-icon matSuffix>search</mat-icon>
                    </mat-form-field>
                    <button mat-flat-button color="primary" style="width: 15%;" (click)="openUser('insert', '')">Crear nueva cuenta</button>
                </div>
                <div class="table-content-container">
                    <table mat-table [dataSource]="dataSource!" matSort style="width:100%">
                        <ng-container matColumnDef="ID">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
                            <td mat-cell *matCellDef="let row">{{ row.IDUSUARIO }}</td>
                        </ng-container>

                        <ng-container matColumnDef="NOMBRE">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre</th>
                            <td mat-cell *matCellDef="let row">{{ row.NOMBRE }}</td>
                        </ng-container>

                        <ng-container matColumnDef="APEPAT">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Primer Apellido</th>
                            <td mat-cell *matCellDef="let row">{{ row.APEPAT }}</td>
                        </ng-container>

                        <ng-container matColumnDef="APEMAT">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Segundo Apellido</th>
                            <td mat-cell *matCellDef="let row">{{ row.APEMAT }}</td>
                        </ng-container>

                        <ng-container matColumnDef="PERFIL">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Perfil</th>
                            <td mat-cell *matCellDef="let row">{{ row.PERFIL }}</td>
                        </ng-container>

                        <ng-container matColumnDef="ESTATUS">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Estatus</th>
                            <td mat-cell *matCellDef="let row">{{ row.ESTATUS }}</td>
                        </ng-container>

                        <ng-container matColumnDef="EMAIL">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Correo Electrónico</th>
                            <td mat-cell *matCellDef="let row">{{ row.EMAIL }}</td>
                        </ng-container>

                        <ng-container matColumnDef="ACCIONES">
                            <th mat-header-cell *matHeaderCellDef>Acciones</th>
                            <td mat-cell *matCellDef="let row">
                                <button mat-mini-fab color="primary" #tooltip="matTooltip" matTooltip="Editar registro" (click)="openUser('edit', row.IDUSUARIO)"
                                class="no-shadow">
                                    <mat-icon>edit</mat-icon>
                                </button>
                                <button mat-mini-fab #tooltip="matTooltip" matTooltip="{{ row.ESTATUS == 'Activo' ? 'Bloquear acceso' : 'Permitir acceso'}}"
                                (click)="blockUser(row.IDUSUARIO)" [disabled]="row.ESTATUS == 'Eliminado'" class="no-shadow ml-4"
                                [ngClass]="{ amber_primary_background: row.ESTATUS != 'Eliminado' }">
                                    <mat-icon *ngIf="row.ESTATUS == 'Activo' || row.ESTATUS == 'Eliminado'">block</mat-icon>
                                    <mat-icon *ngIf="row.ESTATUS == 'Inactivo'">check_circle</mat-icon>
                                </button>
                                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Reasignar contraseña" class="no-shadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
                                [ngClass]="{ blue_dark_background: row.ESTATUS != 'Eliminado' }" (click)="openDialog(row.IDUSUARIO)">
                                    <mat-icon>lock</mat-icon>
                                </button>
                                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Eliminar usuario" class="no-shadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
                                [ngClass]="{ red_primary_background: row.ESTATUS != 'Eliminado' }" (click)="openAlert(row.IDUSUARIO)">
                                    <mat-icon>delete</mat-icon>
                                </button>
                            </td>
                        </ng-container>

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

                        <tr class="mat-row" *matNoDataRow>
                            <td class="mat-cell" colspan="8" *ngIf="users.length > 0">Ningún resultado coincide con su búsqueda "{{ input.value }}"</td>
                            <td class="mat-cell" colspan="8" *ngIf="users.length == 0">No se encontraron registros</td>
                        </tr>
                    </table>
                </div>
                <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" aria-label="Selecciona la página de usuarios"></mat-paginator>
            </div>
        </mat-card-content>
    </mat-card>
</div>
