<div class="profile">
 <div class="row userProfile">
  <div class="col-12 row">
    <div class="col-2"></div>
    <div class="col-2">
      <div class="profile-title">
        Profile & Settings
      </div>
      <div class="last-login">
        Last Login {{ currentUser.lastLogin | date:'dd/mm/yyyy  h:mm a' }}
      </div>
    </div>
    <div class="col-2"></div>
  </div>
<!-- navigation pane  -->
<div class="col-2"></div>
<div class="col-2">
    <!-- Left Navigation Pane -->
    <div class="sidenav">
      <span *ngIf="currentUser">
      <img *ngIf="currentUser.avatar && currentUser.avatar.length > 0; else noImage" style="border-radius: 0.5rem; height: 5rem; margin-left: 1rem; margin-bottom: 1rem; cursor: pointer;" [src]="getProcessedImage(currentUser.avatar)" referrerpolicy="no-referrer">
      <ng-template #noImage>
        <img style="border-radius: 0.5rem; height: 5rem; margin-left: 1rem; margin-bottom: 1rem; cursor: pointer;" [src]="'../../assets/images/default-user.png'">
      </ng-template>
      <div class="username">{{currentUser.username}}</div>
    </span>
      <a>Products Purchased</a>
      <a>Products Listed </a>
      <a routerLink="/wishlist" routerLinkActive="mat-accent">Wishlist </a>
      <a [routerLink]="['/profile', currentUser._id, 'chats']">Chats</a>
      <!-- Add more navigation links here -->
    </div>
  </div>

<div class="col-6" #userdetailsForm>
    <form [formGroup]="userProfileForm" (ngSubmit)="onSubmit()" style="min-height: 55vh; position: relative;">
      <div class="row">
        <div class="col-md-4">
            <label for="username">Username</label>
            <input *ngIf="displayMode == 1; else username" type="text" id="username" formControlName="username" required>
            <ng-template #username>
              <div class="view-elem">{{ this.userProfileForm.get('username')?.value}}</div>
            </ng-template>
        </div>

        <div class="col-md-4">
          <label for="firstName">First Name</label>
          <input *ngIf="displayMode == 1; else firstName" type="text" id="firstName" formControlName="firstName">
          <ng-template #firstName>
            <div class="view-elem">{{ this.userProfileForm.get('firstName')?.value}}</div>
          </ng-template>
        </div>
      
        <div class="col-md-4">
          <label for="lastName">Last Name</label>
          <input *ngIf="displayMode == 1; else lastName" type="text" id="lastName" formControlName="lastName">
          <ng-template #lastName>
            <div class="view-elem">{{ this.userProfileForm.get('lastName')?.value}}</div>
          </ng-template>
        </div>

        <div class="col-md-4">
          <label for="email">Email</label>
          <div class="view-elem">{{ this.currentUser.email }}</div>
        </div>

        <div class="col-md-4">
          <label for="phone">Phone</label>
          <input *ngIf="displayMode == 1; else phone" type="tel" id="phone" formControlName="Phone">
          <ng-template #phone>
            <div class="view-elem">
              {{ this.userProfileForm.get('Phone')?.value}}
            </div>
          </ng-template>
        </div>


    
      </div>
        <div class="actions">
          <button mat-raised-button color="accent" *ngIf="displayMode == 1" type="submit" [disabled]="!userProfileForm.valid" style="background-color: #ec4c7e;" class="save">Save</button>
          <button mat-raised-button *ngIf="displayMode == 1" type="button" [disabled]="!userProfileForm.valid" style="background-color: #ffffff; color:black" class="cancel" (click)="onClickCancel()">Cancel</button>
          <button mat-raised-button color="accent"  *ngIf="displayMode == 0" type="button" [disabled]="!userProfileForm.valid" style="background-color: #fff; color:black" (click)="onClickEdit()" class="edit">Edit</button>
        </div>
      </form>


</div>

<div class="col-5 " *ngIf="ischat">
  <table class="chatTable">
      <tbody>
          <tr *ngFor="let chat of chats" (click)="openChatWindow(chat)">
              <td>{{chat.buyer}}</td>
          </tr>
      </tbody>
  </table>
</div>


<div class="col-2"></div>
</div>
</div>