<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">Administración de usuarios</div>
        </div>
    </div>
    <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
        <mat-card-title style="text-align: center;">{{ action }} Usuario</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" *ngIf="!isLoading && !hasError" style="height: calc(100vh - 272px); overflow-y: auto; overflow-x: hidden;">
                <form [formGroup]="userForm">
                    <div class="form-container">
                        <div class="form-input pt-8" *ngIf="!isNew">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>ID Usuario</mat-label>
                                <input matInput placeholder="" formControlName="id" [readonly]="true">
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Nombre</mat-label>
                                <input matInput placeholder="" formControlName="name" oninput="this.value = this.value.toUpperCase()" [readonly]="!saveEnabled">
                                <mat-error *ngIf="userForm.invalid">{{ getErrorMessage("name") }}</mat-error>
                                <mat-icon matSuffix>badge</mat-icon>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Primer Apellido</mat-label>
                                <input matInput placeholder="" formControlName="fApe" oninput="this.value = this.value.toUpperCase()" [readonly]="!saveEnabled">
                                <mat-error *ngIf="userForm.invalid">{{ getErrorMessage("fApe") }}</mat-error>
                                <mat-icon matSuffix>badge</mat-icon>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Segundo Apellido</mat-label>
                                <input matInput placeholder="" formControlName="sApe" oninput="this.value = this.value.toUpperCase()" [readonly]="!saveEnabled">
                                <mat-icon matSuffix>badge</mat-icon>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Correo Electrónico</mat-label>
                                <input matInput placeholder="" formControlName="email" [readonly]="!saveEnabled">
                                <mat-error *ngIf="userForm.invalid">{{ getErrorMessage("email") }}</mat-error>
                                <mat-icon matSuffix>email</mat-icon>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8" *ngIf="isNew">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Contraseña</mat-label>
                                <input matInput placeholder="Ingrese una contraseña" [type]="hide ? 'password' : 'text'" formControlName="password">
                                <button mat-icon-button matSuffix (click)="hide = !hide">
                                    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                                </button>
                                <mat-error *ngIf="userForm.invalid">{{ getErrorMessage("password") }}</mat-error>
                                <mat-hint align="end">
                                    <a class="hint-button" (click)="generatePass()">Generar contraseña</a>
                                </mat-hint>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8" *ngIf="isNew">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Confirmar Contraseña</mat-label>
                                <input matInput placeholder="Ingrese de nuevo su contraseña" [type]="hide ? 'password' : 'text'" formControlName="password_confirmation"
                                [errorStateMatcher]="passMatcher">
                                <button matSuffix mat-icon-button (click)="hide = !hide">
                                    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                                </button>
                                <mat-error *ngIf="userForm.invalid">
                                    {{ getErrorMessage("password_confirmation") }}
                                </mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input pt-8">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Perfil</mat-label>
                                <mat-select formControlName="perf" [disabled]="!saveEnabled">
                                    <mat-option *ngFor="let profile of profiles" [value]="profile.IDPRO">{{ profile.NAPRO.toUpperCase() }}</mat-option>
                                </mat-select>
                                <mat-error *ngIf="userForm.invalid">{{ getErrorMessage("perf") }}</mat-error>
                                <mat-icon matSuffix>account_circle</mat-icon>
                            </mat-form-field>
                        </div>
                    </div>
                </form>
            </div>
        </mat-card-content>
        <mat-card-actions *ngIf="!isLoading && !hasError" align="end">
            <button *ngIf="saveEnabled" mat-button [disabled]="!userForm.valid" (click)="save()">
                {{ isNew ? 'Registrar usuario' : 'Guardar cambios' }}
            </button>
        </mat-card-actions>
    </mat-card>
</div>