<kt-portlet>
	<kt-portlet-header [title]="(isNewUsuario)? 'Crear nuevo usuario' : 'Editar usuario'"
					   [class]="'kt-portlet__head--lg'">
		<div ktPortletTools class="d-flex">
			<button [routerLink]="(isNewUsuario)? ['../']: ['../../']"
					class="btn btn-primary kt-margin-r-10"
					[disabled]="loading"
					mat-raised-button matTooltip="Regresar">
				<i class="la la-arrow-left"></i>
				<span class="kt-hidden-mobile">Regresar</span>
			</button>
			<!--<button *ngxPermissionsOnly="(isNewUsuario)? 'web.usuarios.store' : 'web.usuarios.update'"-->
			<button class="btn btn-primary kt-margin-r-10" (click)="onSubmit()"
					[ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': loading}"
					[disabled]="loading"
					mat-raised-button matTooltip="{{(isNewUsuario) ? 'Guardar' : 'Actualizar'}} y salir">
				<i class="la la-save"></i>
				<span class="kt-hidden-mobile">{{(isNewUsuario) ? 'Guardar' : 'Actualizar'}}</span>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>
		<mat-tab-group [(selectedIndex)]="selectedTab">
			<mat-tab>
				<ng-template mat-tab-label>
					<!--i class="mat-tab-label-icon fa fa-building"></i--> Información básica
				</ng-template>
				<ng-template matTabContent>
					<!--begin::Form-->
					<!--<div *ngxPermissionsOnly="'web.usuarios.show'">-->
					<div>
						<div class="mat-table__bottom justify-content-center" *ngIf="isLoading">
							<mat-spinner [diameter]="25"></mat-spinner>
							<div class="mat-table__message ml-3">
								Espera un momento....
							</div>
						</div>
						<form [formGroup]="usuarioForm" class="kt-form kt-form--group-seperator-dashed"
							  [hidden]="isLoading">
							<div class="kt-form__section kt-form__section--first">
								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile mt-3">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Nombre(s)" formControlName="nombre" required>
											<mat-hint *ngIf="isControlValid('nombre')">Por favor introduce el
												<strong>nombre</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('nombre')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('nombre','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('nombre','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile mt-3">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Apellido paterno" formControlName="apellido_paterno" required>
											<mat-hint *ngIf="isControlValid('apellido_paterno')">Por favor introduce los
												<strong>apellido paterno</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('apellido_paterno')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('apellido_paterno','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('apellido_paterno','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile mt-3">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Apellido materno" formControlName="apellido_materno" required>
											<mat-hint *ngIf="isControlValid('apellido_materno')">Por favor introduce los
												<strong>apellido materno</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('apellido_materno')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('apellido_materno','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('apellido_materno','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile mt-3">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Correo electrónico" formControlName="email" required>
											<mat-hint *ngIf="isControlValid('email')">Por favor introduce el
												<strong>el usuario</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('email')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('email','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','email')">
												<strong>Correo inválido, ej. correo@mail.com</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile mt-3">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="tel" placeholder="Teléfono" formControlName="telefono" required>
											<mat-hint *ngIf="isControlValid('telefono')">Por favor introduce el
												<strong>el teléfono</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('telefono')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('telefono','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('telefono','minlength')">
												Debe contener mínimo <strong>10</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('telefono','maxlength')">
												Debe contener máximo <strong>10</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput [type]="hidePassword ? 'password' : 'text'" placeholder="Contraseña" formControlName="password">
											<mat-icon matSuffix type="button"
													  (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
											<mat-hint *ngIf="isControlValid('password')">Por favor introduce la
												<strong>contraseña</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('password')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('password','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('password','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('password','minlength')">
												Debe contener mínimo <strong>5</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput [type]="hidePassword ? 'password' : 'text'" placeholder="Confirmación de contraseña" formControlName="confirmPassword">
											<mat-icon matSuffix type="button"
													  (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
											<mat-hint *ngIf="isControlValid('confirmPassword')">Por favor confirma la
												<strong>contraseña</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('confirmPassword')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('confirmPassword','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('confirmPassword','minlength')">
												<strong>Debes introducir al menos 3 caracteres</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('confirmPassword','maxlength')">
												<strong>El límite es de 128 caracteres</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('confirmPassword', 'ConfirmPassword')">
												<strong>Las contraseñas no coinciden</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="role_id" placeholder="Roles">
												<mat-option [value]="rol.id" *ngFor="let rol of roles">
													{{rol.name}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('role_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="sucursal_id" placeholder="Sucursales">
												<mat-option [value]="sucursal.id" *ngFor="let sucursal of sucursales">
													{{sucursal.nombre}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('sucursal_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="tipo_empleado_id" placeholder="Tipo Empleado">
												<mat-option [value]="tipo_empleado.id" *ngFor="let tipo_empleado of tipos_empleados">
													{{tipo_empleado.nombre}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('tipo_empleado_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>
							</div>
						</form>
					</div>
					<!--end::Form-->
				</ng-template>
			</mat-tab>
		</mat-tab-group>
	</kt-portlet-body>
</kt-portlet>
