<div id="admin-header-container">
  <table class="table" cellpadding="0" border="0" width="100%" cellspacing="0">
    <tbody>
        <tr>
            <td>
                <!-- [ngStyle]="{'background': 'url(' + adminDetails.profile_pic + ') center center / cover no-repeat'}" -->
                <div class="user-avatar">
                    <div *ngIf="!adminDetails.profile_pic" class="user-profile-pic"></div>
                    <img src="{{adminDetails?.profile_pic}}" />    
                </div>   
            </td>
            <td>
              <table *ngIf="adminDetails.name">
                <tbody>
                  <tr>
                    <h3 class="text-left txt-bottom">{{adminDetails.name}}</h3>
                  </tr>
                </tbody>
              </table>

              <table *ngIf="adminDetails.email"><tbody><tr><span class="txt-gray">{{adminDetails.email}}</span></tr></tbody></table>
            </td>
            <td>
                <table *ngIf="adminDetails.location"><tbody><tr><span class="txt-gray">{{adminDetails.location}}</span></tr></tbody></table>

                <table *ngIf="adminDetails.age || adminDetails.gender"><tbody><tr><span class="txt-gray txt-position">{{ (adminDetails.age == null || adminDetails.age == 0) ? "-" : adminDetails.age}} Yrs, {{adminDetails.gender}}</span></tr></tbody></table>
            </td>
            <td  width="14%">
                <div *ngIf="adminDetails.country_code"><span class="txt-gray">{{adminDetails.country_code}}</span></div>

                <div *ngIf="adminDetails.mobile_number"><span class="txt-gray">{{adminDetails.mobile_number}}</span></div>

                <div *ngIf="adminDetails.level"><span class="txt-gray txt-position">{{adminDetails.level}}</span></div>
            </td>
            <td>
                 <table><tbody><tr><button class="prof-btn" (click)="editProf();">Edit Profile</button></tr></tbody></table>
            </td>
            <td>
                <table><tbody><tr><button class="password-btn" (click)="openModal();this.showModal = true;">Change Password</button></tr></tbody></table>
            </td>
        </tr>
    </tbody>
</table>
</div>

 <div id="edit-pass-modal" [ngClass]="{'show': this.showModal, 'hide' : !this.showModal}">
    <div class="loader loader-background" *ngIf="showLoader" style="z-index: 2000"></div>
    <div class="container-fluid">
        <div class="row">    
            <div id="myModal" class="modal">
            <div class="modal-content" id="changePassword">          
                <div class="col-md-12 portfolio-item left-info">
                    <div class="list-container center-block">
                    <span class="close"  (click)="closeModal()">&times;</span>
                    <span class="add-head">Change Password</span>
                    <form #form="ngForm" class="form-horizontal edit-pass-form" ngControl="formElem" (ngSubmit)="updatePass(form)" autocomplete="off" novalidate>
                        <div class="form-group">
                            <input type="password" name="oldPass" [(ngModel)]="oldPass" placeholder="Current Password" autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <input type="password" name="newPass" [(ngModel)]="newPass" placeholder="New Password" autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <input type="password" name="confirmPass" [(ngModel)]="confirmPass" placeholder="Confirm New Password" autocomplete="off" required>
                        </div>
                        <span class="msg" *ngIf="modalMsg" [ngClass]="{ 'txt-success': this.success, 'txt-error': this.error }">{{modalMsg}}</span>
                        <span class="msg" *ngIf="modalMsgConfirm" [ngClass]="{ 'txt-success': this.success, 'txt-error': this.error }">{{modalMsgConfirm}}</span>
                        <button type="submit" class="btn btn-primary center-block submitbutton" [disabled]="!form.valid" [ngClass]="{ 'submit-disabled': !form.valid }">Update Password</button>
                    </form>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>