<head>
  <!-- <link rel="stylesheet" href="../../../../homepage_assets/css/untitled.css" /> -->
</head>

<!-- Navbar Component -->
<!-- <app-navbaraccount></app-navbaraccount> -->
<div id="page-container">
  <div id="content-wrap">
    <!-- Navbar Component -->
    <app-navbarlogout></app-navbarlogout>

    <div class="container">
        <!-- User's information -->
        <div *ngIf="userDetails" id="profile-body">
          <button class="searchbutton submit" (click)="profile()">Profile</button>
        
          <h2>
            {{ userDetails.fullName.split(" ")[0] }}
            {{ userDetails.fullName.split(" ")[1] }}'s Edit Profile
          </h2>
          <br />
          <!-- User Edit Profile information -->
        
        <form
          #editProfile="ngForm"
          (ngSubmit)="editProfile.valid && onSubmit(editProfile)"
        >
          <br>
          <!-- Edit name field -->
          <label for="fullName">Full Name:</label>
          <br>
          <input
            type="text"
            #fullName="ngModel"
            [(ngModel)]="nameModel.fullName"
            name="fullName"
            placeholder = "{{userDetails.fullName}}"
            required
            [ngClass]="{ 'invalid-textbox': editProfile.submitted && !fullName.valid }"
          />
          
          <div *ngIf="editProfile.submitted && !fullName.valid">
            <label *ngIf="fullName.errors.required" class="validation-message"
              >This field is required.</label
            >
            <label *ngIf="fullName.errors.pattern" class="validation-message"
              >Invalid name.</label>
          </div>
         
          <!-- Edit Email field -->
          <br>
          <label for="email">Email:</label>
          <br>
          <input
            type="text"
            #email="ngModel"
            [(ngModel)]="nameModel.email"
            name="email"
            placeholder="{{userDetails.email}}"
            [pattern]="emailRegex"
            required
            [ngClass]="{ 'invalid-textbox': editProfile.submitted && !email.valid }"
          />
          <div *ngIf="editProfile.submitted && email.errors">
            <label *ngIf="email.errors.required" class="validation-message"
              >This field is required.</label
            >
            <label *ngIf="email.errors.pattern" class="validation-message"
              >Invalid email address.</label
            >
            <label *ngIf="email.errors.minlength" class="validation-message"
              >Enter atleast 4 characters.</label>
          </div>
        
          <!-- Enter current Password Field -->
          <br>
          <label for="currPassword">Password:</label>
          <br>
          <input
            type="password"
            name="currPassword"
            #currPassword="ngModel"
            [(ngModel)]="nameModel.password"
            placeholder="Password"
            required
            minlength="4"
            [ngClass]="{ 'invalid-textbox': editProfile.submitted && !currPassword.valid }"
          
          />
          <div *ngIf="editProfile.submitted && currPassword.errors">
            <label *ngIf="currPassword.errors.required" class="validation-message"
              >This field is required.</label
            >
            <label *ngIf="currPassword.errors.minlength" class="validation-message"
              >Enter atleast 4 characters.</label
            >
          </div>
        
          <!-- Create new Password field -->
          <br>
          <label for="password">New Password:</label>
          <br>
          <input
            type="password"
            #password="ngModel"
            [(ngModel)]="userService.selectedUser.password"
            name="password"
            placeholder="New Password"
            minlength="4"
            required
            [ngClass]="{ 'invalid-textbox': editProfile.submitted && !password.valid }"
          />
          <div *ngIf="editProfile.submitted && password.errors">
            <label *ngIf="password.errors.required" class="validation-message"
              >This field is required.</label
            >
            <label *ngIf="password.errors.minlength" class="validation-message"
              >Enter atleast 4 characters.</label
            >
          </div>

          <br>
          <!-- submit button -->
          <input
            class="searchbutton"
            type="submit"
            value="Save Changes"
            style="color:#B6862C;/*height:40px;*//*width:40px;*/margin:auto;
            padding:10px 20px;border-radius:20px;margin-top:30px;margin-bottom:30px"
          />
        </form>
        
        <!-- Success message -->
        <div class="success" *ngIf="showSucessMessage">Saved successfully</div>
        
        <!-- Error message -->
        <div class="alert" *ngIf="serverErrorMessages">{{ serverErrorMessages }}</div>
          
        </div>
        
        </div>
  
  </div>

  <div id="page-footer">
    <!-- Footer Component -->
    <app-footerfixed></app-footerfixed>
  </div>

</div>


