<section class="content">
  <div class="content-block">
    <div class="block-header">
      <div class="breadcrumb-main">
        <div class="row">
          <div class="col-6">
            <div class="breadcrumb-title">
              <h2>{{'PROFILE' | translate}}</h2>
            </div>
          </div>
          <div class="col-6">
            <ul class="breadcrumb-list">
              <li class="breadcrumb-item bcrumb-1">
                <a (click)="changePassword()" class="btn btn-outline-success btn-sm">
                  <i-feather name="key" class="btn-success"></i-feather>
                  {{'CHANGE_PASSWORD' | translate}}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <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>
                </div>
                <div class="m-t-10 col-md-12">
                  <button class="btn btn-success btn-sm m-r-10" (click)="updateProfile()" cdkFocusInitial>
                    <i-feather name="save" class="small-icon"></i-feather>
                    {{'SAVE' | translate}}</button>
                  <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/']">
                    <i-feather name="x-circle" class="small-icon"></i-feather>
                    {{'CANCEL' | translate}}</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>