<!-- user profile -->

<app-menu></app-menu>

<div class="tab-pane fade show active" id="profile">
  <div class="container">
    <div class="row flex-lg-nowrap">
      <div class="col">
        <div class="row">
          <div class="col mb-3">
            <div class="card">
              <div class="card-body">
                <div class="e-profile">
                  <div class="row">
                    <div class="col-12 col-sm-auto">
                      <div class="mx-auto" style="width: 120px;">
                        <div class="d-flex justify-content-center align-items-center rounded">
                          <img class="rounded" height="135" width="135" src="{{loggedInUser?.profileImageUrl}}"
                               alt="">
                        </div>
                        <div *ngIf="fileUploadStatus?.status==='progress'" class="progress mt-1">
                          <div class="progress-bar bg-info" role="progressbar"
                               [style.width.%]="fileUploadStatus?.percentage" aria-valuenow="0" aria-valuemin="0"
                               aria-valuemax="100">{{fileUploadStatus?.percentage}}%
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col d-flex flex-column flex-sm-row justify-content-between mb-3">
                      <div class="text-center text-sm-left mb-2 mb-sm-0">
                        <h4
                          class="pt-sm-2 pb-1 mb-0 text-nowrap">{{loggedInUser?.firstName}} {{loggedInUser?.lastName}}</h4>
                        <p class="mb-0">{{loggedInUser?.username}}</p>
                        <div *ngIf="loggedInUser?.lastLoginDateDisplay !== null" class="text-muted"><small>Last
                          login:
                          {{loggedInUser?.lastLoginDateDisplay | date:'medium'}}</small></div>
                        <div class="mt-2">
                          <button (click)="updateProfileImage()" class="btn btn-primary" type="button">
                            <i class="fa fa-fw fa-camera"></i>
                            <span>Change Photo</span>
                          </button>
                        </div>
                      </div>
                      <div class="text-center text-sm-right">
                        <div class="text-muted"><small>Joined {{loggedInUser?.joinDate | date:'mediumDate'}}</small>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-content pt-3">
                    <div class="tab-pane active">
                      <form #profileUserForm="ngForm" (ngSubmit)="onUpdateCurrentUser(profileUserForm.value)"
                            class="form" novalidate>
                        <div class="row">
                          <div class="col">
                            <div class="row">
                              <div class="col">
                                <div class="form-group">
                                  <label>First Name</label>
                                  <input type="text" name="firstName" required [(ngModel)]="loggedInUser.firstName"
                                         class="form-control">
                                </div>
                              </div>
                              <div class="col">
                                <div class="form-group">
                                  <label>Last Name</label>
                                  <input type="text" name="lastName" required [(ngModel)]="loggedInUser.lastName"
                                         class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col">
                                <div class="form-group">
                                  <label>Username</label>
                                  <input type="text" name="username" required [(ngModel)]="loggedInUser.username"
                                         class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col">
                                <div class="form-group">
                                  <label>Email</label>
                                  <input type="text" name="email" required [(ngModel)]="loggedInUser.email"
                                         class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col mb-3">
                                <div class="form-group">
                                  <label>Role</label><small [hidden]="isAdmin">(read only)</small>
                                  <select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role"
                                          class="form-control">
                                    <option value="ROLE_USER">USER</option>
                                    <option value="ROLE_HR">HR</option>
                                    <option value="ROLE_MANAGER">MANAGER</option>
                                    <option value="ROLE_ADMIN">ADMIN</option>
                                    <option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
                                  </select>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-12 col-sm-5 offset-sm-1 mb-3">
                            <div class="mb-2"><b>Account Settings</b></div>
                            <div class="row">
                              <div class="col">
                                <div class="custom-controls-stacked px-2">
                                  <div class="custom-control custom-checkbox">
                                    <input [disabled]="!isAdmin" name="active" type="checkbox"
                                           [(ngModel)]="loggedInUser.active"
                                           class="custom-control-input">
                                    <label class="custom-control-label">Active</label>
                                  </div>
                                  <div class="custom-control custom-checkbox">
                                    <input [disabled]="!isAdmin" name="notLocked" type="checkbox"
                                           [(ngModel)]="loggedInUser.notLocked" class="custom-control-input">
                                    <label class="custom-control-label">Unlocked</label>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col d-flex justify-content-end">
                            <button class="btn btn-primary" type="submit">
                              <i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
                              <span>{{refreshing ? 'Loading...' : 'Save Changes'}}</span>
                            </button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-3 mb-3">
            <div class="card mb-3">
              <div class="card-body">
                <div class="px-xl-3">
                  <button (click)="onLogOut()" class="btn btn-block btn-secondary">
                    <span>Logout</span>
                    <i class="fas fa-sign-in-alt ml-1"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-body">
                <h6 class="card-title font-weight-bold">Permissions From Role</h6>
                <h6 *ngFor="let authority of loggedInUser?.authorities" class="card-text">{{authority}}</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- profile image change form -->
<form enctype="multipart/form-data" style="display:none;">
  <input type="file"
         (change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
         name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*"/>
</form>
