<div class="animated fadeIn prevent-select" (window:resize)="onResize()" [ngClass]="{ items_container: screenSize > 640, 
items_container_full_width: screenSize <= 640 }">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-8" (click)="goBack(1)">
      Administración de usuarios<mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <mat-card style="width: 100%; height: 100%;" [ngClass]="{ override_elevation_z8: screenSize > 640, override_elevation_z0: screenSize <= 640 }">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} Usuario</mat-card-title>
    <mat-card-content>
      <div class="form-order-container" *ngIf="isLoading">
        <div class="is-loading animated fadeIn fast">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40 mt-32" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>

      <div class="form-order-container animated fadeIn pt-2" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="userForm">
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }" *ngIf="!isNew">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>ID Usuario</mat-label>
                <input matInput placeholder="" formControlName="id">
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" 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-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" 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-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" 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-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" 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-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }" *ngIf="isNew">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Contraseña</mat-label>
                <input matInput placeholder="Ingrese una contraseña" [type]="hidePassword ? 'password' : 'text'" formControlName="password" 
                [errorStateMatcher]="generalMatcher!">
                <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword">
                  <mat-icon>{{hidePassword ? '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-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }" *ngIf="isNew">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Confirmar Contraseña</mat-label>
                <input matInput placeholder="Ingrese de nuevo su contraseña" [type]="hideConfirmPassword ? 'password' : 'text'" formControlName="password_confirmation"
                [errorStateMatcher]="samePassMatcher!">
                <button matSuffix mat-icon-button (click)="hideConfirmPassword = !hideConfirmPassword">
                  <mat-icon>{{hideConfirmPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
                <mat-error *ngIf="userForm.invalid">
                  {{ getErrorMessage("password_confirmation") }}
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C04: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Perfil</mat-label>
                <mat-select formControlName="perf">
                  <mat-option *ngFor="let profile of profiles" [value]="profile.IDPERFIL">
                    {{ profile.NOMBREPERFIL }}
                  </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>
        </div>
      </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>