<section class="profile-section">
  <div class="profile-header-section">
    <div class="profile-header-content">
      <h2 class="section-title">My Profile</h2>
      <p class="section-description">View and manage your professional information</p>
    </div>
    <button class="edit-profile-btn" (click)="onEditProfile()" *ngIf="!showEditProfile">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Edit Profile
    </button>
  </div>
  
  <div class="profile-card" *ngIf="!showEditProfile && currentUser">
    <div class="profile-header">
      <div class="profile-avatar-wrapper">
        <div class="profile-avatar">
          <img *ngIf="currentUser.avatarUrl" 
               [src]="userService.getAvatarUrl(currentUser.avatarUrl)" 
               [alt]="currentUser.firstName + ' ' + currentUser.lastName"
               class="avatar-image-large">
          <svg *ngIf="!currentUser.avatarUrl" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <button class="avatar-upload-btn" (click)="fileInput.click()" title="Upload photo">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <input #fileInput type="file" accept="image/*" class="hidden-input" (change)="onFileSelected($event)">
      </div>
        <div class="profile-name">
        <h3>Dr. {{ currentUser.firstName }} {{ currentUser.lastName }}</h3>
        <p>{{ currentUser.email }}</p>
      </div>
    </div>
    <div class="profile-details">
      <div class="detail-row">
        <span class="detail-label">Phone Number</span>
        <span class="detail-value">{{ currentUser.phoneNumber || doctorProfile?.phoneNumber || 'N/A' }}</span>
      </div>
      <div class="detail-row" *ngIf="doctorProfile">
        <span class="detail-label">Specialization</span>
        <span class="detail-value">{{ doctorProfile.specialization || 'Not specified' }}</span>
      </div>
      <div class="detail-row" *ngIf="doctorProfile">
        <span class="detail-label">Years of Experience</span>
        <span class="detail-value">{{ doctorProfile.yearsOfExperience || 'Not specified' }}</span>
      </div>
      <div class="detail-row" *ngIf="doctorProfile">
        <span class="detail-label">Default Appointment Duration</span>
        <span class="detail-value">{{ doctorProfile.defaultDurationMinutes || 30 }} minutes</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Account Status</span>
        <span class="detail-value">
          <span class="status-badge" [ngClass]="currentUser.isActive ? 'status-confirmed' : 'status-cancelled'">
            {{ currentUser.isActive ? 'Active' : 'Inactive' }}
          </span>
        </span>
      </div>
    </div>
  </div>

  <!-- Edit Profile Form -->
  <div class="edit-profile-form" *ngIf="showEditProfile">
    <div class="form-header">
      <h3 class="form-title">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Edit Profile
      </h3>
      <p class="form-subtitle">Update your professional and contact information</p>
    </div>
    <form class="profile-form" (ngSubmit)="onUpdateProfile()" #profileForm="ngForm">
      <!-- User Profile Fields -->
      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Basic Information
          </h4>
          <p class="section-description">Your personal contact details</p>
        </div>
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label" for="firstName">
              First Name
              <span class="required-indicator">*</span>
            </label>
            <input 
              type="text" 
              id="firstName"
              [(ngModel)]="editUserData.firstName" 
              name="firstName" 
              class="form-input" 
              placeholder="{{ currentUser?.firstName || 'Enter first name' }}"
              minlength="2"
              maxlength="50"
              pattern="[A-Za-z\s]{2,50}"
            />
            <span class="form-hint">2-50 characters, letters only</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="lastName">
              Last Name
              <span class="required-indicator">*</span>
            </label>
            <input 
              type="text" 
              id="lastName"
              [(ngModel)]="editUserData.lastName" 
              name="lastName" 
              class="form-input" 
              placeholder="{{ currentUser?.lastName || 'Enter last name' }}"
              minlength="2"
              maxlength="50"
              pattern="[A-Za-z\s]{2,50}"
            />
            <span class="form-hint">2-50 characters, letters only</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="phoneNumber">
              Phone Number
              <span class="required-indicator">*</span>
            </label>
            <input 
              type="tel" 
              id="phoneNumber"
              [(ngModel)]="editUserData.phoneNumber" 
              name="phoneNumber" 
              class="form-input" 
              placeholder="{{ currentUser?.phoneNumber || '+1234567890' }}"
              minlength="10"
              maxlength="15"
              pattern="[+]?[0-9]{10,15}"
            />
            <span class="form-hint">10-15 digits, can include country code with +</span>
          </div>
        </div>
      </div>

      <!-- Doctor-Specific Fields -->
      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 14V22M8 18H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Professional Information
          </h4>
          <p class="section-description">Your medical credentials and expertise</p>
        </div>
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label" for="medicalLicenseNumber">
              Medical License Number
              <span class="required-indicator">*</span>
            </label>
            <input 
              type="text" 
              id="medicalLicenseNumber"
              [(ngModel)]="editDoctorData.medicalLicenseNumber" 
              name="medicalLicenseNumber" 
              class="form-input" 
              placeholder="{{ doctorProfile?.medicalLicenseNumber || 'Enter medical license number' }}"
              minlength="2"
              maxlength="100"
              required
            />
            <span class="form-hint">2-100 characters, required for verification</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="specialization">Specialization</label>
            <input 
              type="text" 
              id="specialization"
              [(ngModel)]="editDoctorData.specialization" 
              name="specialization" 
              class="form-input" 
              placeholder="{{ doctorProfile?.specialization || 'e.g., Cardiology, Pediatrics' }}"
              minlength="2"
              maxlength="100"
            />
            <span class="form-hint">2-100 characters</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="yearsOfExperience">Years of Experience</label>
            <input 
              type="number" 
              id="yearsOfExperience"
              [(ngModel)]="editDoctorData.yearsOfExperience" 
              name="yearsOfExperience" 
              class="form-input" 
              placeholder="{{ doctorProfile?.yearsOfExperience || '0' }}"
              min="0"
              max="50"
            />
            <span class="form-hint">0-50 years</span>
          </div>
          <div class="form-group form-group-full">
            <label class="form-label" for="biography">Biography</label>
            <textarea 
              id="biography"
              [(ngModel)]="editDoctorData.biography" 
              name="biography" 
              class="form-input form-textarea" 
              rows="5" 
              placeholder="Share your professional background, education, and areas of expertise..."
              maxlength="1000"
            ></textarea>
            <div class="textarea-footer">
              <span class="form-hint">Brief professional biography (max 1000 characters)</span>
              <span class="char-counter" *ngIf="editDoctorData.biography">
                {{ (editDoctorData.biography || '').length }}/1000
              </span>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label" for="consultationFee">
              Consultation Fee ($)
              <span class="required-indicator">*</span>
            </label>
            <div class="input-with-icon">
              <span class="input-icon">$</span>
              <input 
                type="number" 
                id="consultationFee"
                [(ngModel)]="editDoctorData.consultationFee" 
                name="consultationFee" 
                class="form-input" 
                placeholder="{{ doctorProfile?.consultationFee || '0.00' }}"
                min="0.01"
                step="0.01"
                required
              />
            </div>
            <span class="form-hint">Must be greater than 0</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="defaultDurationMinutes">Default Appointment Duration (minutes)</label>
            <input 
              type="number" 
              id="defaultDurationMinutes"
              [(ngModel)]="editDoctorData.defaultDurationMinutes" 
              name="defaultDurationMinutes" 
              class="form-input"
              placeholder="{{ doctorProfile?.defaultDurationMinutes || '30' }}"
              min="15"
              max="120"
              step="15"
            />
            <span class="form-hint">Default duration for patient appointments (15-120 minutes, in 15-minute increments). Default: 30 minutes. You can change it anytime (e.g., from 60 to 30).</span>
          </div>
        </div>
      </div>

      <!-- Enterprise Fields Section -->
      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
              <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            Enterprise Information
          </h4>
          <p class="section-description">Additional professional details</p>
        </div>
        <div class="form-grid">
          <!-- Address -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Address</h5>
          </div>
          <div class="form-group">
            <label class="form-label" for="streetAddress">Street Address</label>
            <input 
              type="text" 
              id="streetAddress"
              [(ngModel)]="editDoctorData.streetAddress" 
              name="streetAddress" 
              class="form-input" 
              placeholder="{{ doctorProfile?.streetAddress || 'Enter street address' }}"
              maxlength="255"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="city">City</label>
            <input 
              type="text" 
              id="city"
              [(ngModel)]="editDoctorData.city" 
              name="city" 
              class="form-input" 
              placeholder="{{ doctorProfile?.city || 'Enter city' }}"
              maxlength="100"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="state">State/Province</label>
            <input 
              type="text" 
              id="state"
              [(ngModel)]="editDoctorData.state" 
              name="state" 
              class="form-input" 
              placeholder="{{ doctorProfile?.state || 'Enter state' }}"
              maxlength="100"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="zipCode">Zip/Postal Code</label>
            <input 
              type="text" 
              id="zipCode"
              [(ngModel)]="editDoctorData.zipCode" 
              name="zipCode" 
              class="form-input" 
              placeholder="{{ doctorProfile?.zipCode || 'Enter zip code' }}"
              maxlength="20"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="country">Country</label>
            <input 
              type="text" 
              id="country"
              [(ngModel)]="editDoctorData.country" 
              name="country" 
              class="form-input" 
              placeholder="{{ doctorProfile?.country || 'Enter country' }}"
              maxlength="100"
            />
          </div>

          <!-- Education -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Education</h5>
          </div>
          <div class="form-group">
            <label class="form-label" for="educationDegree">Degree</label>
            <input 
              type="text" 
              id="educationDegree"
              [(ngModel)]="editDoctorData.educationDegree" 
              name="educationDegree" 
              class="form-input" 
              placeholder="{{ doctorProfile?.educationDegree || 'e.g., MD, PhD' }}"
              maxlength="200"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="educationUniversity">University</label>
            <input 
              type="text" 
              id="educationUniversity"
              [(ngModel)]="editDoctorData.educationUniversity" 
              name="educationUniversity" 
              class="form-input" 
              placeholder="{{ doctorProfile?.educationUniversity || 'Enter university name' }}"
              maxlength="200"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="educationGraduationYear">Graduation Year</label>
            <input 
              type="number" 
              id="educationGraduationYear"
              [(ngModel)]="editDoctorData.educationGraduationYear" 
              name="educationGraduationYear" 
              class="form-input" 
              placeholder="{{ doctorProfile?.educationGraduationYear || 'YYYY' }}"
              min="1900"
              max="2100"
            />
          </div>

          <!-- Certifications -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Certifications</h5>
            <div class="array-input-container">
              <div class="array-input">
                <input 
                  type="text" 
                  [(ngModel)]="newCertification" 
                  name="newCertification" 
                  class="form-input" 
                  placeholder="Enter certification name"
                  (keyup.enter)="addCertification()"
                  maxlength="200"
                />
                <button type="button" class="add-btn" (click)="addCertification()" title="Add certification">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <div class="tags-list" *ngIf="editDoctorData.certifications && editDoctorData.certifications.length > 0">
                <span class="tag" *ngFor="let cert of editDoctorData.certifications; let i = index">
                  {{ cert }}
                  <button type="button" class="tag-remove" (click)="removeCertification(i)" title="Remove">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>

          <!-- Languages Spoken -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Languages Spoken</h5>
            <div class="array-input-container">
              <div class="array-input">
                <input 
                  type="text" 
                  [(ngModel)]="newLanguage" 
                  name="newLanguage" 
                  class="form-input" 
                  placeholder="Enter language"
                  (keyup.enter)="addLanguage()"
                  maxlength="100"
                />
                <button type="button" class="add-btn" (click)="addLanguage()" title="Add language">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <div class="tags-list" *ngIf="editDoctorData.languagesSpoken && editDoctorData.languagesSpoken.length > 0">
                <span class="tag" *ngFor="let lang of editDoctorData.languagesSpoken; let i = index">
                  {{ lang }}
                  <button type="button" class="tag-remove" (click)="removeLanguage(i)" title="Remove">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>

          <!-- Hospital Affiliations -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Hospital Affiliations</h5>
            <div class="array-input-container">
              <div class="array-input">
                <input 
                  type="text" 
                  [(ngModel)]="newHospitalAffiliation" 
                  name="newHospitalAffiliation" 
                  class="form-input" 
                  placeholder="Enter hospital name"
                  (keyup.enter)="addHospitalAffiliation()"
                  maxlength="200"
                />
                <button type="button" class="add-btn" (click)="addHospitalAffiliation()" title="Add hospital">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <div class="tags-list" *ngIf="editDoctorData.hospitalAffiliations && editDoctorData.hospitalAffiliations.length > 0">
                <span class="tag" *ngFor="let hospital of editDoctorData.hospitalAffiliations; let i = index">
                  {{ hospital }}
                  <button type="button" class="tag-remove" (click)="removeHospitalAffiliation(i)" title="Remove">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>

          <!-- Insurance Accepted -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Insurance Accepted</h5>
            <div class="array-input-container">
              <div class="array-input">
                <input 
                  type="text" 
                  [(ngModel)]="newInsuranceAccepted" 
                  name="newInsuranceAccepted" 
                  class="form-input" 
                  placeholder="Enter insurance provider name"
                  (keyup.enter)="addInsuranceAccepted()"
                  maxlength="200"
                />
                <button type="button" class="add-btn" (click)="addInsuranceAccepted()" title="Add insurance">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <div class="tags-list" *ngIf="editDoctorData.insuranceAccepted && editDoctorData.insuranceAccepted.length > 0">
                <span class="tag" *ngFor="let insurance of editDoctorData.insuranceAccepted; let i = index">
                  {{ insurance }}
                  <button type="button" class="tag-remove" (click)="removeInsuranceAccepted(i)" title="Remove">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>

          <!-- Professional Memberships -->
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Professional Memberships</h5>
            <div class="array-input-container">
              <div class="array-input">
                <input 
                  type="text" 
                  [(ngModel)]="newProfessionalMembership" 
                  name="newProfessionalMembership" 
                  class="form-input" 
                  placeholder="Enter organization name"
                  (keyup.enter)="addProfessionalMembership()"
                  maxlength="200"
                />
                <button type="button" class="add-btn" (click)="addProfessionalMembership()" title="Add membership">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <div class="tags-list" *ngIf="editDoctorData.professionalMemberships && editDoctorData.professionalMemberships.length > 0">
                <span class="tag" *ngFor="let membership of editDoctorData.professionalMemberships; let i = index">
                  {{ membership }}
                  <button type="button" class="tag-remove" (click)="removeProfessionalMembership(i)" title="Remove">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="cancel-btn" (click)="cancelEdit()">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          Cancel
        </button>
        <button type="submit" class="submit-button" [disabled]="profileForm.invalid">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Save Changes
        </button>
      </div>
    </form>
  </div>
</section>