<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-md-6 mb-2">
        <span *ngIf="!isEditMode" class="mb-0 page-title">{{'ADD_USER' | translate}}</span>
        <span *ngIf="isEditMode" class="mb-0 page-title">{{'EDIT_USER' | translate}}</span>
        <app-page-help-text [code]="'MANAGE_USER'"></app-page-help-text>
      </div>
    </div>

    <div class="card">
      <div class="body">
        <form [formGroup]="userForm">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group ">
                <label>{{'FIRST_NAME' | translate}}</label>
                <input formControlName="firstName" class="form-control" type="text">
                <div *ngIf="userForm.get('firstName').touched && userForm.get('firstName').errors">
                  <div class="text-danger" *ngIf="userForm.get('firstName').errors?.required">
                    {{'FIRST_NAME_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>{{'LAST_NAME' | translate}}</label>
                <input formControlName="lastName" class="form-control" type="text">
                <div *ngIf="userForm.get('lastName').touched && userForm.get('lastName').errors">
                  <div class="text-danger" *ngIf="userForm.get('lastName').errors?.required">
                    {{'LAST_NAME_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>{{'MOBILE_NUMBER' | translate}}</label>
                <input formControlName="phoneNumber" class="form-control" type="text">
                <div *ngIf="userForm.get('phoneNumber').touched && userForm.get('phoneNumber').errors">
                  <div class="text-danger" *ngIf="userForm.get('phoneNumber').errors?.required">
                    {{"MOBILE_IS_REQUIRED" | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>{{"EMAIL" | translate}}</label>
                <input formControlName="email" class="form-control" type="email">
                <div *ngIf="userForm.get('email').touched && userForm.get('email').errors">
                  <div class="text-danger" *ngIf="userForm.get('email').errors?.required">
                    {{'EMAIL_IS_REQUIRED' | translate}}
                  </div>
                  <div class="text-danger" *ngIf="userForm.get('email').errors?.email">
                    {{'PLEASE_ENTER_VALID_EMAIL' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!isEditMode" class="col-md-6">
              <div class="form-group">
                <label>{{'PASSWORD' | translate}}</label>
                <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
                <div *ngIf="userForm.get('password').touched && userForm.get('password').errors">
                  <div class="text-danger" *ngIf="userForm.get('password').errors?.required">
                    {{'PASSWORD_IS_REQUIRED' | translate}}
                  </div>
                  <div class="text-danger" *ngIf="userForm.get('password').errors?.minlength">
                    {{'YOU_HAVE_TO_ENTER_AT_LEAST_DIGIT' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!isEditMode" class="col-md-6">
              <div class="form-group">
                <label>{{"CONFIRM_PASSWORD" | translate}}</label>
                <input autocomplete="new-password" formControlName="confirmPassword" class="form-control"
                  type="password">
                <div *ngIf="userForm.get('confirmPassword').touched && userForm.get('confirmPassword').errors">
                  <div class="text-danger" *ngIf="userForm.get('confirmPassword').errors?.required">
                    {{'CONFIRM_PASSWORD_IS_REQUIRED' | translate}}
                  </div>
                </div>
                <div class="text-danger"
                  *ngIf="userForm.get('confirmPassword').touched && userForm.hasError('notSame')">
                  {{'PASSWORDS_DO_NOT_MATCH' | translate}}
                </div>
              </div>
            </div>
            <div class="form-group col-md-6">
              <mat-label>{{'ROLES' | translate}}</mat-label>
              <mat-select class="form-control" [(value)]="selectedRoles" multiple panelClass="mat-select-control">
                <mat-select-trigger>
                  <span *ngIf="selectedRoles.length > 0">
                    {{selectedRoles[0].name}}
                  </span>
                  <span *ngIf="selectedRoles.length > 1" class="example-additional-selection">
                    (+{{selectedRoles.length - 1}} {{selectedRoles.length === 2 ? 'other' : 'others'}})
                  </span>
                </mat-select-trigger>
                <mat-option *ngFor="let role of roleList" [value]="role">{{role.name}}</mat-option>
              </mat-select>
            </div>
            <div class="form-group col-md-6 status-switch">
              <mat-slide-toggle formControlName="isActive" color="primary">
                <span *ngIf="userForm.get('isActive').value">{{'ACTIVE' | translate}}</span>
                <span *ngIf="!userForm.get('isActive').value">{{'INACTIVE' | translate}}</span>
              </mat-slide-toggle>
            </div>
            <div class="form-group col-md-6">
              <div class="form-group">
                <label>{{'ADDRESS' | translate}}</label>
                <textarea formControlName="address" class="form-control"></textarea>
              </div>
            </div>
            <div class="col-md-3">
              <div class="" formArrayName="userAllowedIPs"
                *ngFor="let ip of userAllowedIPs.controls; let i=index">
                <ng-container [formGroupName]="i">
                  <label *ngIf="i==0">  <b> {{'ALLOW_USER_WITH_SPECIFIC_IP' | translate}}:</b> </label>
                  <div class="row">
                    <div class="form-group col-md mb-1 col">
                      <input (change)="onMetatagChange($event,i)" formControlName="ipAddress" class="form-control"
                        type="text">
                    </div>
                    <div class="form-group col-md-auto col-auto ps-0">
                      <button *ngIf="i==0" (click)="addIP()" class="btn btn-outline-success"
                        type="button"> <i-feather name="plus" class="small-icon"></i-feather>
                      </button>
                      <button *ngIf="i!=0" (click)="removeIP(i)" class="btn btn-outline-danger" type="button">
                        <i-feather name="trash" class="small-icon"></i-feather></button>
                    </div>
                  </div>
                </ng-container>
              </div>
            </div>
            <div class="m-top-10 col-md-12">
              <ng-container *ngIf="isEditMode">
                <button *hasClaim="'user_edit'" class="btn btn-success btn-sm me-2" (click)="saveUser()"
                  cdkFocusInitial><i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
              </ng-container>
              <ng-container *ngIf="!isEditMode">
                <button *hasClaim="'user_add'" class="btn btn-success btn-sm me-2" (click)="saveUser()"
                  cdkFocusInitial><i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
              </ng-container>
              <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/users']"><i-feather name="x-circle"
                  class="small-icon"></i-feather>
                {{'CANCEL' | translate}}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>