<div class="close ">
  <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>

<span class="center">Registrar Usuario</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->

<mat-dialog-content class="mat-typography space mt-40" [autofocus]="['none']">

  <form (ngSubmit)="crearUsuario()" [formGroup]="form" class="grid-container">

    <mat-form-field class="mr-20 input-u grid-item">
      <mat-label>Primer Nombre</mat-label>
      <input matInput maxlength="50" name="primerNombre" formControlName="primerNombre">
      <mat-icon [class.is-invalid-icon]="campoVacio('primerNombre')" matSuffix>badge</mat-icon>
      <mat-hint *ngIf="campoVacio('primerNombre')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Segundo Nombre</mat-label>
      <input matInput maxlength="50" name="segundoNombre" formControlName="segundoNombre">
      <mat-icon matSuffix>badge</mat-icon>
      <!-- <mat-hint>Hint</mat-hint> -->
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Apellido Paterno</mat-label>
      <input matInput maxlength="50" name="apellidoPaterno" formControlName="apellidoPaterno">
      <mat-icon [class.is-invalid-icon]="campoVacio('apellidoPaterno')" matSuffix>badge</mat-icon>
      <mat-hint *ngIf="campoVacio('apellidoPaterno')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Apellido Materno</mat-label>
      <input matInput maxlength="50" name="apellidoMaterno" formControlName="apellidoMaterno">
      <mat-icon matSuffix>badge</mat-icon>
      <!-- <mat-hint>Hint</mat-hint> -->
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>ID Usuario</mat-label>
      <input matInput name="idUsuario" formControlName="idUsuario">
      <mat-icon [class.is-invalid-icon]="campoVacio('idUsuario')" matSuffix>person</mat-icon>
      <mat-hint *ngIf="campoVacio('idUsuario')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Estatus</mat-label>
      <mat-select name="estatus" formControlName="estatus">
        <mat-option *ngFor="let status of statuses" [value]="status.value">{{status.status}}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Tipo de Usuario</mat-label>
      <mat-select name="tipoUsuario" formControlName="tipoUsuario">
        <mat-option *ngFor="let rol of roles" [value]="rol.value">{{rol.rol}}</mat-option>
      </mat-select>
      <mat-hint *ngIf="campoVacio('tipoUsuario')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>


    <mat-form-field class="mr-20  input-u grid-item">
      <mat-label>Validado</mat-label>
      <mat-select name="validado" formControlName="validado">
        <mat-option *ngFor="let valid of validados" [value]="valid.value">{{valid.desc}}</mat-option>
      </mat-select>
      <mat-hint *ngIf="campoVacio('validado')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>

    <mat-form-field class="mr-20 input-u grid-item">
      <mat-label>Grado</mat-label>
      <mat-select name="grado" formControlName="grado">
        <mat-option *ngFor="let grado of grados" [value]="grado.nombreGrado">{{grado.nombreGrado}}</mat-option>

      </mat-select>
    </mat-form-field>

    <mat-form-field class="mr-20  input-u grid-item">
      <input maxlength="100" name="correo" formControlName="correo" matInput placeholder="Correo">
      <mat-icon [class.is-invalid-icon]="campoNoValido('correo')" matSuffix>mail</mat-icon>
      <mat-hint *ngIf="campoNoValido('correo')" class="is-invalid">Correo no válido</mat-hint>
      <!-- <mat-hint>Hint</mat-hint> -->
    </mat-form-field>

    <div class="flex-row items-center">
      <mat-form-field class="mr-20 grid-item" style="width: 85%; margin-right: 20px;">
        <input name="contrasenaHash" formControlName="contrasenaHash" matInput
          type="{{showPassword ? 'text' : 'password'}}" placeholder="Contraseña">
        <mat-icon class="pointer" matSuffix
          (click)="toggleVisibility()">{{showPassword?'visibility_off':'visibility'}}</mat-icon>
        <mat-hint *ngIf="campoNoValido('contrasenaHash')" class="is-invalid">Contraseña no válida</mat-hint>
      </mat-form-field>
      <mat-icon class="cursor-pointer mb-10" matSuffix (click)="tooltip1.toggle()"
        style="color: #f19696;">help</mat-icon>
      <div #tooltip1="matTooltip"
        matTooltip="La contraseña debe contener mayúsculas, minúsculas, números, un carácter especial y al menos 8 caracteres sin espacios."
        matTooltipPosition="right"></div>
    </div>

    <mat-form-field class="mr-20  input-u grid-item">
      <input maxlength="50" name="alias" formControlName="alias" matInput placeholder="Alias">
      <mat-icon matSuffix>person</mat-icon>
      <!-- <mat-hint>Hint</mat-hint> -->
    </mat-form-field>
  </form>


  <div class="align flex-row mt-40">
    <div class="align-items">
      <button type="button" (click)="crearUsuario()" class="yellow">Ingresar <mat-icon class="icon"
          matSuffix>description</mat-icon></button>
    </div>
    <div class="align-items">
      <button class="orange">Limpiar <mat-icon class="icon" matSuffix>delete</mat-icon></button>
    </div>
    <div class="align-items">
      <button class="red" mat-dialog-close>Cerrar <mat-icon class="icon" matSuffix>cancel</mat-icon></button>
    </div>
  </div>
</mat-dialog-content>