src/app/matching-list/matching-list.component.html

<!-- Loader Overlay -->
<div class="loader-overlay" *ngIf="loading">
  <div class="loader-container">
    <img src="assets/Loader.gif" alt="Loading..." style="width:50%;height:50%;display:block;margin:0 auto 25px;" />
  </div>
</div>

<!-- Main Content -->
<div *ngIf="!loading" class="main-container">
  <!-- ENHANCED HEADER BAR -->
  <div class="header-bar">
    <div class="header-left">

      <!-- Enhanced Mode Toggle -->
      <div class="mode-toggle">
        <button class="mode-btn"
                [class.active]="mode === 'character'"
                (click)="sortCharacterwise()">
          Character
          <span class="mode-badge" *ngIf="mode === 'character'">✓</span>
        </button>
        <button class="mode-btn"
                [class.active]="mode === 'expectation-only'"
                (click)="sortByExpectationOnly()">
          Expectation
          <span class="mode-badge" *ngIf="mode === 'expectation-only'">✓</span>
          <!--<span *ngIf="mode === 'expectation-only'">
            <span class="badge-info">Exact Matches: {{compatibilityAnalysis?.totalExactMatches || 0}}</span>
            <span class="badge-info">Differences: {{compatibilityAnalysis?.totalDifferences || 0}}</span>
          </span>-->
        </button>
        <button class="mode-btn"
                [class.active]="mode === 'expectation'"
                (click)="sortByExpectation()">
          Expectation with Character
          <span class="mode-badge" *ngIf="mode === 'expectation'">✓</span>
          <!--<span *ngIf="mode === 'expectation'">
            <span class="badge-info">Exact Matches: {{compatibilityAnalysis?.totalExactMatches || 0}}</span>
            <span class="badge-info">Differences: {{compatibilityAnalysis?.totalDifferences || 0}}</span>
          </span>-->
        </button>
      </div>


      <!-- App Brand -->
      <div class="app-brand">
        <!-- Enhanced Results Info -->
        <!--<div class="results-info">
          <span class="results-count">🎯 {{ displayedMatches.length }} Matches Found</span>
          <span class="mode-indicator">
            <span class="mode-dot"
                  [class.expectation-only]="mode === 'expectation-only'"
                  [class.expectation]="mode === 'expectation'"
                  [class.character]="mode === 'character'"></span>
            <span *ngIf="mode === 'expectation-only'">Pure Expectation Matching</span>
            <span *ngIf="mode === 'character'">Pure Character Matching</span>
            <span *ngIf="mode === 'expectation'">Combined Matching</span>
          </span>
        </div>-->
      </div>

    </div>

    <div class="header-right">
      <!-- Enhanced Search Section -->
      <div class="search-section">
        <div class="search-box">
          <input type="text" placeholder="Search profiles..."
                 [(ngModel)]="searchTerm" (input)="onSearchChange()">
          <span class="search-icon">🔍</span>
        </div>
      </div>

      <!-- Enhanced Like Section -->
      <div class="like-section" (click)="toggleLikedDropdown($event)">
        <div class="heart-container">
          ❤️
          <span class="like-count">{{ likedProfiles.length }}</span>
        </div>
        <div class="liked-dropdown" [class.show]="showLikedDropdown">
          <div class="dropdown-header">
            <h4>Liked Profiles</h4>
          </div>
          <ul>
            <li *ngFor="let profile of likedProfiles" class="liked-profile-item">
              <img [src]="profile.photo_url" [alt]="profile.name" class="liked-profile-img">
              <span>{{ profile.name }}</span>
            </li>
            <li *ngIf="likedProfiles.length === 0" class="no-likes">No liked profiles yet</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- MAIN LAYOUT -->
  <div class="main-layout">
    <!-- ENHANCED USER PANEL -->
    <div class="user-panel">
      <div class="user-header">
        <div class="user-photo-container">
          <img [src]="userPhoto" class="user-photo" alt="User Photo">
          <div class="online-status"></div>
        </div>
        <div class="user-info">
          <h3 class="user-name">{{ userName }}</h3>
          <p class="user-city">📍 {{ userCity }}</p>
        </div>
      </div>

      <!-- Enhanced User Stats -->
      <div class="user-stats">
        <div class="stat-item">
          <div class="stat-value">{{ totalMatches }}</div>
          <div class="stat-label">Total Matches</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ likedProfiles.length }}</div>
          <div class="stat-label">Liked Profiles</div>
        </div>
        <!--<div class="stat-item">
          <div class="stat-value">{{ userProfileCompletion }}</div>
          <div class="stat-label">Profile Score</div>
        </div>-->
      </div>

      <!-- Enhanced Profile Completion -->
      <!--<div class="profile-completion">-->
      <!--<div class="completion-header">
        <span>Profile Completion</span>
        <span class="completion-percent">{{ userProfileCompletion }}%</span>
      </div>-->
      <!--<div class="progress-bar-user">
          <div class="progress-fill" [style.width]="userProfileCompletion + '%'"></div>
        </div>
      </div>-->
      <!-- Enhanced Edit Button -->
    <button class="edit-btn" (click)="openEditModal()">
      <span class="btn-icon">⚙️</span>
      View Your Profile
    </button>    </div>

    <!-- ENHANCED MATCHING CONTAINER -->
    <div class="matching-container">
      <div class="matching-header">
        <!-- ENHANCED HEADER TOP ROW -->
        <div class="header-top-row">
          <div class="range-filter">
            <!-- Range Selector -->
            <select [(ngModel)]="selectedRange" class="range-select" (change)="onRangeChange()">
              <option *ngFor="let range of availableRanges" [value]="range">
                {{ range === 'all' ? 'All Scores' : range === 'below_60' ? 'Below 60%' : range + '%' }}
              </option>
            </select>

            <!-- Enhanced Filter Group - Only show in Character mode -->
            <div class="filter-group" *ngIf="mode === 'character' && displayedMatches.length > 0">
              <!-- Location Filter -->
              <select [(ngModel)]="selectedLocation" class="filter-select">
                <option value="">📍 All Locations</option>
                <option *ngFor="let location of availableLocations" [value]="location">
                  {{ location }}
                </option>
              </select>
              <!-- Profession Filter -->
              <select [(ngModel)]="selectedProfession" class="filter-select">
                <option value="">💼 All Professions</option>
                <option *ngFor="let profession of availableProfessions" [value]="profession">
                  {{ profession }}
                </option>
              </select>
              <!-- Education Filter -->
              <select [(ngModel)]="selectedEducation" class="filter-select">
                <option value="">🎓 All Education</option>
                <option *ngFor="let education of availableEducationLevels" [value]="education">
                  {{ education }}
                </option>
              </select>
              <!-- Age Range Filter -->
              <select [(ngModel)]="selectedAgeRange" class="filter-select">
                <option value="">👤 All Ages</option>
                <option *ngFor="let ageRange of availableAgeRanges" [value]="ageRange">
                  {{ ageRange }}
                </option>
              </select>
              <!-- Religion Filter -->
              <select [(ngModel)]="selectedReligion" class="filter-select" *ngIf="availableReligions.length > 0">
                <option value="">🙏 All Religions</option>
                <option *ngFor="let religion of availableReligions" [value]="religion">
                  {{ religion }}
                </option>
              </select>
            </div>

            <!-- Enhanced Filter Actions - Only show in Character mode -->
            <div class="filter-actions" *ngIf="mode === 'character' && displayedMatches.length > 0">
              <button class="filter-btn primary" (click)="applyFilters()">
                <span class="btn-text">Apply Filters</span>
                <span class="btn-icon">⚡</span>
              </button>
              <button class="filter-btn secondary" (click)="clearFilters()"
                      *ngIf="selectedLocation || selectedProfession || selectedEducation || selectedReligion || selectedAgeRange">
                <span class="btn-text">Clear All</span>
                <span class="btn-icon">❌</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- GRID VIEW -->
      <div class="grid-view" id="profilesContainer">
        <!-- Minimalist Spinner -->
        <div *ngIf="displayedMatches.length === 0 && !loading" class="loading-animation">
          <div class="elegant-spinner">
            <div class="spinner-dots">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
            <div class="spinner-text" style="color: #f3a54c; font-weight:600;">Finding your perfect matches...</div>
          </div>
        </div>

  <!-- Profile Cards -->
        <!--<div *ngFor="let profile of displayedMatches"
             class="profile-card"
             [class.high-match]="((profile.match_score ?? profile.score ?? 0) >= 80)"
             (click)="openProfileModal(profile)">-->
        <div *ngFor="let profile of displayedMatches"
             class="profile-card">
          <div class="card-header">
            <div class="image-wrapper">
              <div class="online-dot" *ngIf="profile.isOnline"></div>
              <img [src]="profile.photo_url" [alt]="profile.name"
                   (error)="handleImageError($event, profile)">
              <span class="badge">{{ profile.match_score ?? profile.score ?? 0 }}%</span>
            </div>

            <div class="profile-basic-info">
              <h3 class="profile-name">{{ profile.name }}</h3>
              <p class="profile-details">{{ profile.age }} • {{ profile.city }}</p>
              <p class="profession">{{ profile.job }}</p>
            </div>
          </div>

          <div class="compatibility-bar">
            <div class="progress-bar">
              <div class="progress-bar-inner" [style.width]="(profile.match_score ?? profile.score ?? 0) + '%'">
              </div>
            </div>
            <span class="score-text">{{ profile.match_score ?? profile.score ?? 0 }}% Match</span>
          </div>

          <div class="actions">
            <button class="action-btn like"
                    [class.liked]="isLiked(profile)"
                    (click)="$event.stopPropagation(); toggleLike(profile)">
              ❤️
            </button>
            <button class="action-btn chat"
                    (click)="$event.stopPropagation(); openChat(profile)">
              💬
            </button>
            <button class="action-btn view"
                    (click)="$event.stopPropagation(); openProfileModal(profile)">
              👁️
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- PROFILE MODAL -->
  <div class="modal" [class.show]="showProfileModal">
    <div class="modal-content profile-modal" *ngIf="selectedProfile">
      <span class="close" (click)="closeModal()">&times;</span>

      <!-- User Info Section -->
      <div class="user-info-section" *ngIf="showUserInfo && userProfileData">
        <div class="user-info-header">
          <h3>Your Complete Profile Information</h3>
          <button class="close-user-info" (click)="toggleUserInfo()">✖</button>
        </div>

        <div class="user-info-content scrollable-content">
          <!-- Basic User Info -->
          <div class="user-basic-info">
            <img [src]="userPhoto" [alt]="userName" class="user-info-img">
            <div class="user-info-details">
              <h4>{{ userName }}</h4>
              <p>📍 {{ userCity }}</p>
              <!--<p class="profile-completion">Profile Completion: {{ userProfileCompletion }}%</p>-->
            </div>
          </div>

          <!-- Current Matching Mode -->
          <div class="matching-mode-info">
            <h5>Current Matching Mode:</h5>
            <div class="mode-indicator">
              <span class="mode-dot"
                    [class.expectation-only]="mode === 'expectation-only'"
                    [class.expectation]="mode === 'expectation'"
                    [class.character]="mode === 'character'"></span>
              <span *ngIf="mode === 'expectation-only'">Pure Expectation Matching</span>
              <span *ngIf="mode === 'character'">Pure Character Matching</span>
              <span *ngIf="mode === 'expectation'">Expectation + Character Refinement</span>
            </div>
          </div>

          <!-- Full Profile Details -->
          <div class="profile-details-container">
            <!-- Basic Information Section -->
            <div class="section" *ngIf="userProfileData.gender || userProfileData.marital_status || userProfileData.date_of_birth || userProfileData.height || userProfileData.skin_tone || userProfileData.blood_group">
              <h4>Basic Information</h4>
              <div class="details-grid">
                <div *ngIf="userProfileData.gender" class="detail-item">
                  <span class="detail-label">Gender</span>
                  <span class="detail-value">{{ userProfileData.gender }}</span>
                </div>
                <div *ngIf="userProfileData.marital_status" class="detail-item">
                  <span class="detail-label">Marital Status</span>
                  <span class="detail-value">{{ userProfileData.marital_status }}</span>
                </div>
                <div *ngIf="userProfileData.date_of_birth" class="detail-item">
                  <span class="detail-label">Date of Birth</span>
                  <span class="detail-value">{{ userProfileData.date_of_birth }}</span>
                </div>
                <div *ngIf="userProfileData.height" class="detail-item">
                  <span class="detail-label">Height</span>
                  <span class="detail-value">{{ userProfileData.height }}</span>
                </div>
                <div *ngIf="userProfileData.skin_tone" class="detail-item">
                  <span class="detail-label">Skin Tone</span>
                  <span class="detail-value">{{ userProfileData.skin_tone }}</span>
                </div>
                <div *ngIf="userProfileData.blood_group" class="detail-item">
                  <span class="detail-label">Blood Group</span>
                  <span class="detail-value">{{ userProfileData.blood_group }}</span>
                </div>
              </div>
            </div>

            <!-- Location & Background Section -->
            <div class="section" *ngIf="userProfileData.current_city || userProfileData.country || userProfileData.religion || userProfileData.languages_spoken || userProfileData.dual_citizenship">
              <h4>Location & Background</h4>
              <div class="details-grid">
                <div *ngIf="userProfileData.current_city" class="detail-item">
                  <span class="detail-label">Current City</span>
                  <span class="detail-value">{{ userProfileData.current_city }}</span>
                </div>
                <div *ngIf="userProfileData.country" class="detail-item">
                  <span class="detail-label">Country</span>
                  <span class="detail-value">{{ userProfileData.country }}</span>
                </div>
                <div *ngIf="userProfileData.religion" class="detail-item">
                  <span class="detail-label">Religion</span>
                  <span class="detail-value">{{ userProfileData.religion }}</span>
                </div>
                <div *ngIf="userProfileData.languages_spoken" class="detail-item">
                  <span class="detail-label">Languages Spoken</span>
                  <span class="detail-value">{{ userProfileData.languages_spoken }}</span>
                </div>
                <div *ngIf="userProfileData.dual_citizenship" class="detail-item">
                  <span class="detail-label">Dual Citizenship</span>
                  <span class="detail-value">{{ userProfileData.dual_citizenship }}</span>
                </div>
              </div>
            </div>

            <!-- Education & Career Section -->
            <div class="section" *ngIf="userProfileData.education_level || userProfileData.field_of_study || userProfileData.employment_status || userProfileData.job_role || userProfileData.work_experience_years || userProfileData.career_aspirations || userProfileData.income_range">
              <h4>Education & Career</h4>
              <div class="details-grid">
                <div *ngIf="userProfileData.education_level" class="detail-item">
                  <span class="detail-label">Education Level</span>
                  <span class="detail-value">{{ userProfileData.education_level }}</span>
                </div>
                <div *ngIf="userProfileData.field_of_study" class="detail-item">
                  <span class="detail-label">Field of Study</span>
                  <span class="detail-value">{{ userProfileData.field_of_study }}</span>
                </div>
                <div *ngIf="userProfileData.employment_status" class="detail-item">
                  <span class="detail-label">Employment Status</span>
                  <span class="detail-value">{{ userProfileData.employment_status }}</span>
                </div>
                <div *ngIf="userProfileData.job_role" class="detail-item">
                  <span class="detail-label">Profession</span>
                  <span class="detail-value">{{ userProfileData.job_role }}</span>
                </div>
                <div *ngIf="userProfileData.work_experience_years" class="detail-item">
                  <span class="detail-label">Work Experience</span>
                  <span class="detail-value">{{ userProfileData.work_experience_years }}</span>
                </div>
                <div *ngIf="userProfileData.career_aspirations" class="detail-item">
                  <span class="detail-label">Career Aspirations</span>
                  <span class="detail-value">{{ userProfileData.career_aspirations }}</span>
                </div>
                <div *ngIf="userProfileData.income_range" class="detail-item">
                  <span class="detail-label">Income Range</span>
                  <span class="detail-value">{{ userProfileData.income_range }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-header">
        <img [src]="selectedProfile.photo_url" [alt]="selectedProfile.name"
             (error)="handleImageError($event, selectedProfile)" class="modal-profile-img">
        <div class="modal-profile-info">
          <h2>{{ selectedProfile.name }}</h2>
          <p class="modal-subtitle">{{ selectedProfile.age }} • {{ selectedProfile.city }}</p>
          <div class="match-score-large">
            {{ selectedProfile.match_score ?? selectedProfile.score ?? 0 }}% Match
          </div>
        </div>
      </div>

      <!-- TAB NAVIGATION -->
      <div class="modal-tabs">
        <button class="tab-btn"
                [class.active]="activeTab === 'details'"
                (click)="setActiveTab('details')">
          📋 Details
        </button>
        <button class="tab-btn"
                [class.active]="activeTab === 'compatibility'"
                (click)="setActiveTab('compatibility')">
          🔍 Compatibility Analysis
        </button>
      </div>

      <div class="modal-body">
        <!-- DETAILS TAB CONTENT -->
        <div class="tab-content" [class.active]="activeTab === 'details'">

          <!-- Basic Information Section -->
          <div class="section">
            <h4>Basic Information</h4>
            <div class="details-grid">
              <div *ngIf="selectedProfile.gender" class="detail-item">
                <span class="detail-label">Gender</span>
                <span class="detail-value">{{ selectedProfile.gender }}</span>
              </div>
              <div *ngIf="selectedProfile.marital_status" class="detail-item">
                <span class="detail-label">Marital Status</span>
                <span class="detail-value">{{ selectedProfile.marital_status }}</span>
              </div>
              <div *ngIf="selectedProfile.date_of_birth" class="detail-item">
                <span class="detail-label">Date of Birth</span>
                <span class="detail-value">{{ selectedProfile.date_of_birth }}</span>
              </div>
              <div *ngIf="selectedProfile.height" class="detail-item">
                <span class="detail-label">Height</span>
                <span class="detail-value">{{ selectedProfile.height }}</span>
              </div>
              <div *ngIf="selectedProfile.skin_tone" class="detail-item">
                <span class="detail-label">Skin Tone</span>
                <span class="detail-value">{{ selectedProfile.skin_tone }}</span>
              </div>
              <div *ngIf="selectedProfile.blood_group" class="detail-item">
                <span class="detail-label">Blood Group</span>
                <span class="detail-value">{{ selectedProfile.blood_group }}</span>
              </div>
            </div>
          </div>

          <!-- Location & Background Section -->
          <div class="section">
            <h4>Location & Background</h4>
            <div class="details-grid">
              <div *ngIf="selectedProfile.current_city" class="detail-item">
                <span class="detail-label">Current City</span>
                <span class="detail-value">{{ selectedProfile.current_city }}</span>
              </div>
              <div *ngIf="selectedProfile.country" class="detail-item">
                <span class="detail-label">Country</span>
                <span class="detail-value">{{ selectedProfile.country }}</span>
              </div>
              <div *ngIf="selectedProfile.religion" class="detail-item">
                <span class="detail-label">Religion</span>
                <span class="detail-value">{{ selectedProfile.religion }}</span>
              </div>
              <div *ngIf="selectedProfile.languages_spoken" class="detail-item">
                <span class="detail-label">Languages Spoken</span>
                <span class="detail-value">{{ selectedProfile.languages_spoken }}</span>
              </div>
              <div *ngIf="selectedProfile.dual_citizenship" class="detail-item">
                <span class="detail-label">Dual Citizenship</span>
                <span class="detail-value">{{ selectedProfile.dual_citizenship }}</span>
              </div>
            </div>
          </div>

          <!-- Education & Career Section -->
          <div class="section">
            <h4>Education & Career</h4>
            <div class="details-grid">
              <div *ngIf="selectedProfile.education_level" class="detail-item">
                <span class="detail-label">Education Level</span>
                <span class="detail-value">{{ selectedProfile.education_level }}</span>
              </div>
              <div *ngIf="selectedProfile.field_of_study" class="detail-item">
                <span class="detail-label">Field of Study</span>
                <span class="detail-value">{{ selectedProfile.field_of_study }}</span>
              </div>
              <div *ngIf="selectedProfile.employment_status" class="detail-item">
                <span class="detail-label">Employment Status</span>
                <span class="detail-value">{{ selectedProfile.employment_status }}</span>
              </div>
              <div *ngIf="selectedProfile.job_role" class="detail-item">
                <span class="detail-label">Profession</span>
                <span class="detail-value">{{ selectedProfile.job_role }}</span>
              </div>
              <div *ngIf="selectedProfile.work_experience_years" class="detail-item">
                <span class="detail-label">Work Experience</span>
                <span class="detail-value">{{ selectedProfile.work_experience_years }}</span>
              </div>
              <div *ngIf="selectedProfile.career_aspirations" class="detail-item">
                <span class="detail-label">Career Aspirations</span>
                <span class="detail-value">{{ selectedProfile.career_aspirations }}</span>
              </div>
              <div *ngIf="selectedProfile.income_range" class="detail-item">
                <span class="detail-label">Income Range</span>
                <span class="detail-value">{{ selectedProfile.income_range }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- COMPATIBILITY ANALYSIS TAB CONTENT -->
        <div class="tab-content" [class.active]="activeTab === 'compatibility'">

          <!-- ENHANCED COMPATIBILITY ANALYSIS SECTION -->
          <div class="compatibility-section" *ngIf="activeTab === 'compatibility'">

            <!-- Mode-specific header -->
            <!--<div class="mode-specific-header">
              <div class="mode-info-banner">
                <span class="mode-icon"
                      [class.character]="mode === 'character'"
                      [class.combined]="mode === 'expectation'"
                      [class.expectation-only]="mode === 'expectation-only'">
                  {{ mode === 'character' ? '🧠' : mode === 'expectation' ? '⚡' : '🎯' }}
                </span>
                <div class="mode-info-content">-->
                  <!-- Combined mode tab buttons only -->
                  <!--<div class="combined-mode-tabs" *ngIf="mode === 'expectation'">
                    <nav class="combined-tabs-nav">
                      <button class="combined-tab"
                              [class.active]="subTab === 'expectation'"
                              (click)="subTab = 'expectation'">
                        <span class="tab-icon">📊</span>
                        <span class="tab-text">Expectation Analysis</span>
                      </button>
                      <div class="tab-separator">
                        <span class="separator-line"></span>
                        <span class="separator-plus">+</span>
                        <span class="separator-line"></span>
                      </div>
                      <button class="combined-tab"
                              [class.active]="subTab === 'character'"
                              (click)="subTab = 'character'">
                        <span class="tab-icon">🧬</span>
                        <span class="tab-text">Character Analysis</span>
                      </button>
                    </nav>
                  </div>-->

                  <!-- Other modes -->
                  <!--<div *ngIf="mode !== 'expectation'">
                    <h5>{{ getModeDisplayName() }} Analysis</h5>
                    <p *ngIf="mode === 'expectation-only'">
                      Pure expectation matching based on profile criteria
                    </p>
                    <p *ngIf="mode === 'character'">
                      Personality-based compatibility analysis
                    </p>
                  </div>
                </div>
              </div>
            </div>-->

            <!-- Mode-specific content -->
            <ng-container [ngSwitch]="mode">

              <!-- EXPECTATION-ONLY MODE -->
              <div *ngSwitchCase="'expectation-only'" class="analysis-container">
                <!-- Toggle for expectation-only mode -->
                <div class="analysis-toggle">
                  <button class="toggle-btn"
                          [class.active]="showDifferences"
                          (click)="toggleDifferences()">
                    <span class="toggle-icon">❌</span>
                    <span class="toggle-text">Difference Areas</span>
                    <span class="toggle-count">({{compatibilityAnalysis?.totalDifferences || 0}})</span>
                  </button>

                  <button class="toggle-btn"
                          [class.active]="showExactMatches"
                          (click)="toggleExactMatches()">
                    <span class="toggle-icon">✅</span>
                    <span class="toggle-text">Common Expectations</span>
                    <span class="toggle-count">({{compatibilityAnalysis?.totalExactMatches || 0}})</span>
                  </button>
                </div>

                <!-- Exact Matches View -->
                <div *ngIf="showExactMatches && compatibilityAnalysis" class="analysis-view">
                  <div *ngIf="compatibilityAnalysis.exactMatches && compatibilityAnalysis.exactMatches.length > 0; else noExactMatches">

                    <!-- Table Header for Exact Matches -->
                    <div class="comparison-table exact-matches-table">
                      <div class="table-header">
                        <div class="table-column field-column">
                          <h6>📋 Expectation Field</h6>
                        </div>
                        <div class="table-column value-column">
                          <h6>🤝 Mutual Expectation</h6>
                        </div>
                      </div>

                      <!-- Table Content for Exact Matches -->
                      <div class="table-body">
                        <div *ngFor="let match of compatibilityAnalysis.exactMatches; let i = index"
                             class="table-row">
                          <div class="table-column field-column">
                            <div class="field-name">{{getFieldNameFromMatch(match)}}</div>
                          </div>
                          <div class="table-column value-column">
                            <div class="common-value">
                              <div class="mutual-expectation">
                                <span class="mutual-label">Both are expecting:</span>
                                <span class="value-text">{{getExpectationValueFromMatch(match)}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

                <!-- Differences View -->
                <div *ngIf="showDifferences && compatibilityAnalysis" class="analysis-view">
                  <div *ngIf="compatibilityAnalysis.differences && compatibilityAnalysis.differences.length > 0; else noDifferences">

                    <!-- Table Header for Differences -->
                    <div class="comparison-table differences-table">
                      <div class="table-header">
                        <div class="table-column">
                          <h6>🎯 Your Expectation</h6>
                        </div>
                        <div class="table-column">
                          <h6>👤 Partner's Profile</h6>
                        </div>
                      </div>

                      <!-- Table Content for Differences -->
                      <div class="table-body">
                        <div *ngFor="let difference of compatibilityAnalysis.differences; let i = index"
                             class="table-row"
                             [class.critical-row]="difference.isCritical">

                          <div class="table-column your-expectation-column">
                            <div class="field-name">{{difference.fieldName}}</div>
                            <div class="expectation-value">{{difference.yourExpectation}}</div>
                            <div *ngIf="difference.isCritical" class="critical-badge">Critical difference</div>
                          </div>

                          <div class="table-column their-profile-column">
                            <div class="field-name">{{difference.fieldName}}</div>
                            <div class="profile-value">{{difference.theirProfile}}</div>
                            <div *ngIf="difference.isCritical" class="critical-badge">Critical difference</div>
                          </div>

                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

              <!-- CHARACTER MODE - Now uses the same professional UI -->
              <div *ngSwitchCase="'character'" class="character-analysis-container">

                <!-- Character Analysis Header -->
                <div class="character-analysis-header">
                  <div class="character-header-icon">
                    <span class="icon">🧠</span>
                  </div>
                  <div class="character-header-content">
                    <h3>Character Compatibility Analysis</h3>
                    <p class="character-subtitle">Based on personality color traits and psychological patterns</p>
                  </div>
                </div>

                <!-- Character Insights Grid -->
                <div class="character-insights-grid" *ngIf="strengths?.length || risks?.length || sacrifices?.length">

                  <!-- STRENGTHS CARD -->
                  <div class="character-insight-card strength-card" *ngIf="strengths?.length">
                    <div class="character-card-header">
                      <div class="character-card-icon strength-icon">
                        <span>💪</span>
                      </div>
                      <div class="character-card-title">
                        <h4>Character Strengths</h4>
                        <p class="card-subtitle">Positive synergies and complementary traits</p>
                      </div>
                      <div class="character-card-badge">
                        <span class="badge-count">{{ strengths.length }}</span>
                      </div>
                    </div>
                    <div class="character-card-body">
                      <ul class="character-insight-list">
                        <li *ngFor="let point of strengths; let i = index" class="character-insight-item">
                          <div class="insight-number">{{ i + 1 }}</div>
                          <div class="insight-content">
                            <p>{{ point }}</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="character-card-footer">
                      <span class="footer-tag">Strong Foundation</span>
                    </div>
                  </div>

                  <!-- RISKS CARD -->
                  <div class="character-insight-card risk-card" *ngIf="risks?.length">
                    <div class="character-card-header">
                      <div class="character-card-icon risk-icon">
                        <span>⚠️</span>
                      </div>
                      <div class="character-card-title">
                        <h4>Character Risks</h4>
                        <p class="card-subtitle">Potential challenges and areas of friction</p>
                      </div>
                      <div class="character-card-badge">
                        <span class="badge-count">{{ risks.length }}</span>
                      </div>
                    </div>
                    <div class="character-card-body">
                      <ul class="character-insight-list">
                        <li *ngFor="let point of risks; let i = index" class="character-insight-item">
                          <div class="insight-number">{{ i + 1 }}</div>
                          <div class="insight-content">
                            <p>{{ point }}</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="character-card-footer">
                      <span class="footer-tag">Manageable Challenges</span>
                    </div>
                  </div>

                  <!-- SACRIFICES CARD -->
                  <div class="character-insight-card sacrifice-card" *ngIf="sacrifices?.length">
                    <div class="character-card-header">
                      <div class="character-card-icon sacrifice-icon">
                        <span>🤝</span>
                      </div>
                      <div class="character-card-title">
                        <h4>Sacrifices Needed</h4>
                        <p class="card-subtitle">Compromises for harmonious partnership</p>
                      </div>
                      <div class="character-card-badge">
                        <span class="badge-count">{{ sacrifices.length }}</span>
                      </div>
                    </div>
                    <div class="character-card-body">
                      <ul class="character-insight-list">
                        <li *ngFor="let point of sacrifices; let i = index" class="character-insight-item">
                          <div class="insight-number">{{ i + 1 }}</div>
                          <div class="insight-content">
                            <p>{{ point }}</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="character-card-footer">
                      <span class="footer-tag">Growth Opportunities</span>
                    </div>
                  </div>

                </div>

                <!-- No Character Data -->
                <div *ngIf="!strengths?.length && !risks?.length && !sacrifices?.length" class="no-character-data">
                  <div class="no-data-icon">🔍</div>
                  <h4>Character Analysis Unavailable</h4>
                  <p>Character compatibility data is not available for this match. Try refreshing or selecting another profile.</p>
                </div>

              </div>

              <!-- EXPECTATION WITH CHARACTER MODE -->
              <div *ngSwitchCase="'expectation'" class="combined-analysis-container">

                <!-- Combined Mode Tabs -->
                <div class="combined-mode-tabs">
                  <nav class="combined-tabs-nav">
                    <button class="combined-tab"
                            [class.active]="subTab === 'expectation'"
                            (click)="subTab = 'expectation'">
                      <span class="tab-icon">📊</span>
                      <span class="tab-text">Expectation Analysis</span>
                    </button>
                    <div class="tab-separator">
                      <span class="separator-line"></span>
                      <span class="separator-plus">+</span>
                      <span class="separator-line"></span>
                    </div>
                    <button class="combined-tab"
                            [class.active]="subTab === 'character'"
                            (click)="subTab = 'character'">
                      <span class="tab-icon">🧬</span>
                      <span class="tab-text">Character Analysis</span>
                    </button>
                  </nav>
                </div>

                <!-- Expectation Analysis Tab Content -->
                <div *ngIf="subTab === 'expectation'" class="expectation-tab-content">

                  <!-- Toggle buttons for expectation analysis -->
                  <div class="toggle-group">
                    <button class="toggle-group-btn"
                            [class.active]="showDifferences"
                            (click)="toggleDifferences()">
                      <span class="toggle-icon">❌</span>
                      <span class="toggle-text">Difference Areas</span>
                      <span class="toggle-count">({{compatibilityAnalysis?.totalDifferences || 0}})</span>
                    </button>

                    <button class="toggle-group-btn"
                            [class.active]="showExactMatches"
                            (click)="toggleExactMatches()">
                      <span class="toggle-icon">✅</span>
                      <span class="toggle-text">Common Expectations</span>
                      <span class="toggle-count">({{compatibilityAnalysis?.totalExactMatches || 0}})</span>
                    </button>
                  </div>

                  <!-- Exact Matches View -->
                  <div *ngIf="showExactMatches && compatibilityAnalysis" class="analysis-view">
                    <div *ngIf="compatibilityAnalysis.exactMatches && compatibilityAnalysis.exactMatches.length > 0; else noExactMatches">
                      <!-- Table Header for Exact Matches -->
                      <div class="comparison-table exact-matches-table">
                        <div class="table-header">
                          <div class="table-column field-column">
                            <h6>📋 Expectation Field</h6>
                          </div>
                          <div class="table-column value-column">
                            <h6>🤝 Mutual Expectation</h6>
                          </div>
                        </div>

                        <!-- Table Content for Exact Matches -->
                        <div class="table-body">
                          <div *ngFor="let match of compatibilityAnalysis.exactMatches; let i = index"
                               class="table-row">
                            <div class="table-column field-column">
                              <div class="field-name">{{getFieldNameFromMatch(match)}}</div>
                            </div>
                            <div class="table-column value-column">
                              <div class="common-value">
                                <div class="mutual-expectation">
                                  <span class="mutual-label">Both are expecting:</span>
                                  <span class="value-text">{{getExpectationValueFromMatch(match)}}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Differences View -->
                  <div *ngIf="showDifferences && compatibilityAnalysis" class="analysis-view">
                    <div *ngIf="compatibilityAnalysis.differences && compatibilityAnalysis.differences.length > 0; else noDifferences">
                      <!-- Table Header for Differences -->
                      <div class="comparison-table differences-table">
                        <div class="table-header">
                          <div class="table-column">
                            <h6>🎯 Your Expectation</h6>
                          </div>
                          <div class="table-column">
                            <h6>👤 Partner's Profile</h6>
                          </div>
                        </div>

                        <!-- Table Content for Differences -->
                        <div class="table-body">
                          <div *ngFor="let difference of compatibilityAnalysis.differences; let i = index"
                               class="table-row"
                               [class.critical-row]="difference.isCritical">

                            <div class="table-column your-expectation-column">
                              <div class="field-name">{{difference.fieldName}}</div>
                              <div class="expectation-value">{{difference.yourExpectation}}</div>
                              <div *ngIf="difference.isCritical" class="critical-badge">Critical difference</div>
                            </div>

                            <div class="table-column their-profile-column">
                              <div class="field-name">{{difference.fieldName}}</div>
                              <div class="profile-value">{{difference.theirProfile}}</div>
                              <div *ngIf="difference.isCritical" class="critical-badge">Critical difference</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Character Analysis Tab Content -->
                <div *ngIf="subTab === 'character'" class="character-tab-content">

                  <!-- Character Analysis Header -->
                  <div class="character-analysis-header">
                    <div class="character-header-icon">
                      <span class="icon">🧬</span>
                    </div>
                    <div class="character-header-content">
                      <h3>Character Compatibility Analysis</h3>
                      <p class="character-subtitle">Based on personality color traits and psychological patterns</p>
                    </div>
                  </div>

                  <!-- Character Insights Grid -->
                  <div class="character-insights-grid" *ngIf="strengths?.length || risks?.length || sacrifices?.length">

                    <!-- STRENGTHS CARD -->
                    <div class="character-insight-card strength-card" *ngIf="strengths?.length">
                      <div class="character-card-header">
                        <div class="character-card-icon strength-icon">
                          <span>💪</span>
                        </div>
                        <div class="character-card-title">
                          <h4>Character Strengths</h4>
                          <p class="card-subtitle">Positive synergies and complementary traits</p>
                        </div>
                        <div class="character-card-badge">
                          <span class="badge-count">{{ strengths.length }}</span>
                        </div>
                      </div>
                      <div class="character-card-body">
                        <ul class="character-insight-list">
                          <li *ngFor="let point of strengths; let i = index" class="character-insight-item">
                            <div class="insight-number">{{ i + 1 }}</div>
                            <div class="insight-content">
                              <p>{{ point }}</p>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="character-card-footer">
                        <span class="footer-tag">Strong Foundation</span>
                      </div>
                    </div>

                    <!-- RISKS CARD -->
                    <div class="character-insight-card risk-card" *ngIf="risks?.length">
                      <div class="character-card-header">
                        <div class="character-card-icon risk-icon">
                          <span>⚠️</span>
                        </div>
                        <div class="character-card-title">
                          <h4>Character Risks</h4>
                          <p class="card-subtitle">Potential challenges and areas of friction</p>
                        </div>
                        <div class="character-card-badge">
                          <span class="badge-count">{{ risks.length }}</span>
                        </div>
                      </div>
                      <div class="character-card-body">
                        <ul class="character-insight-list">
                          <li *ngFor="let point of risks; let i = index" class="character-insight-item">
                            <div class="insight-number">{{ i + 1 }}</div>
                            <div class="insight-content">
                              <p>{{ point }}</p>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="character-card-footer">
                        <span class="footer-tag">Manageable Challenges</span>
                      </div>
                    </div>

                    <!-- SACRIFICES CARD -->
                    <div class="character-insight-card sacrifice-card" *ngIf="sacrifices?.length">
                      <div class="character-card-header">
                        <div class="character-card-icon sacrifice-icon">
                          <span>🤝</span>
                        </div>
                        <div class="character-card-title">
                          <h4>Sacrifices Needed</h4>
                          <p class="card-subtitle">Compromises for harmonious partnership</p>
                        </div>
                        <div class="character-card-badge">
                          <span class="badge-count">{{ sacrifices.length }}</span>
                        </div>
                      </div>
                      <div class="character-card-body">
                        <ul class="character-insight-list">
                          <li *ngFor="let point of sacrifices; let i = index" class="character-insight-item">
                            <div class="insight-number">{{ i + 1 }}</div>
                            <div class="insight-content">
                              <p>{{ point }}</p>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="character-card-footer">
                        <span class="footer-tag">Growth Opportunities</span>
                      </div>
                    </div>

                  </div>

                  <!-- No Character Data -->
                  <div *ngIf="!strengths?.length && !risks?.length && !sacrifices?.length" class="no-character-data">
                    <div class="no-data-icon">🔍</div>
                    <h4>Character Analysis Unavailable</h4>
                    <p>Character compatibility data is not available for this match. Try refreshing or selecting another profile.</p>
                  </div>

                </div>
              </div>
            </ng-container>

            <!-- Common No Data Templates -->
            <ng-template #noExactMatches>
              <div class="no-data-section">
                <div class="no-data-icon">🔍</div>
                <p class="no-data">No common expectations found between both profiles</p>
              </div>
            </ng-template>

            <ng-template #noDifferences>
              <div class="no-data-section">
                <div class="no-data-icon">🎉</div>
                <p class="no-data">No differences found - perfect match across all expectations!</p>
              </div>
            </ng-template>

          </div>
        </div>
      </div>

      <div class="modal-actions">
        <button class="modal-btn primary"
                [class.liked]="isLiked(selectedProfile)"
                (click)="toggleLike(selectedProfile)">
          {{ isLiked(selectedProfile) ? '❤️ Liked' : '❤️ Like' }}
        </button>
        <button class="modal-btn primary" (click)="openChat(selectedProfile); closeModal()">
          💬 Start Chat
        </button>
        <!--<button class="modal-btn secondary" (click)="toggleUserInfo()">
          👤 View My Profile
        </button>-->
      </div>
    </div>
  </div>

  <!-- EDIT PROFILE MODAL -->
  <div class="modal" [class.show]="showEditModal" *ngIf="showEditModal">
    <div class="modal-content edit-modal">
      <span class="close" (click)="closeEditModal()">&times;</span>
      <h3 class="modal-title">Edit Profile</h3>

      <div class="form-group">
        <label for="editName">Name</label>
        <input id="editName" [(ngModel)]="editName" placeholder="Enter your name" class="form-input">
      </div>

      <div class="form-group">
        <label for="editCity">City</label>
        <input id="editCity" [(ngModel)]="editCity" placeholder="Enter your city" class="form-input">
      </div>

      <div class="form-actions">
        <button class="modal-btn secondary" (click)="closeEditModal()">Cancel</button>
        <button class="modal-btn primary" (click)="saveProfile()">Save Changes</button>
      </div>
    </div>
  </div>

  <!-- CHAT WINDOW -->
  <div class="chat-window" [class.show]="showChatWindow">
    <div class="chat-header">
      <div class="chat-user-info">
        <img [src]="currentChatUser?.photo_url" [alt]="currentChatUser?.name" class="chat-user-img">
        <div>
          <div class="chat-user-name">{{ currentChatUser?.name }}</div>
          <div class="chat-user-status">Online</div>
        </div>
      </div>
      <button class="chat-close" (click)="closeChat()">✖</button>
    </div>

    <div class="chat-body" #chatBody>
      <div *ngFor="let message of chatMessages"
           class="chat-msg"
           [class.user-msg]="message.sender === 'me'"
           [class.other-msg]="message.sender === 'them'">
        <div class="msg-content">{{ message.text }}</div>
        <div class="timestamp">{{ message.time }}</div>
      </div>
      <div *ngIf="showTyping" class="typing-indicator">
        <div class="typing-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="typing-text">Typing...</span>
      </div>
    </div>

    <div class="chat-input">
      <input type="text"
             [(ngModel)]="newMessage"
             placeholder="Type a message..."
             (keyup.enter)="sendMessage()"
             (keypress)="typingIndicator()"
             class="chat-input-field">
      <button class="send-btn" (click)="sendMessage()">
        <span class="send-icon">➤</span>
      </button>
    </div>
  </div>

  <!-- USER PROFILE MODAL -->
  <div class="modal" [class.show]="showUserProfileModal">
    <div class="modal-content profile-modal">
      <span class="close" (click)="closeUserProfileModal()">&times;</span>

      <!-- User Info Header -->
      <div class="modal-header">
        <div class="user-photo-container">
          <img [src]="userPhoto" class="modal-profile-img" alt="User Photo">
        </div>
        <div class="modal-profile-info">
          <h2>{{ userName }}</h2>
          <p class="modal-subtitle">📍 {{ userCity }}</p>
          <!--<div class="profile-score">
            Profile Completion: {{ userProfileCompletion }}%
          </div>-->
        </div>
      </div>

      <!-- Profile Tabs -->
      <div class="modal-tabs">
        <button class="tab-btn active">📋 Profile Details</button>
      </div>

      <div class="modal-body">
        <!-- Basic Information Section -->
        <div class="section" *ngIf="userProfileData">
          <h4>Basic Information</h4>
          <div class="details-grid">
            <div *ngIf="userProfileData.gender" class="detail-item">
              <span class="detail-label">Gender</span>
              <span class="detail-value">{{ userProfileData.gender }}</span>
            </div>
            <div *ngIf="userProfileData.marital_status" class="detail-item">
              <span class="detail-label">Marital Status</span>
              <span class="detail-value">{{ userProfileData.marital_status }}</span>
            </div>
            <div *ngIf="userProfileData.date_of_birth" class="detail-item">
              <span class="detail-label">Date of Birth</span>
              <span class="detail-value">{{ userProfileData.date_of_birth }}</span>
            </div>
            <div *ngIf="userProfileData.height" class="detail-item">
              <span class="detail-label">Height</span>
              <span class="detail-value">{{ userProfileData.height }}</span>
            </div>
            <div *ngIf="userProfileData.skin_tone" class="detail-item">
              <span class="detail-label">Skin Tone</span>
              <span class="detail-value">{{ userProfileData.skin_tone }}</span>
            </div>
            <div *ngIf="userProfileData.blood_group" class="detail-item">
              <span class="detail-label">Blood Group</span>
              <span class="detail-value">{{ userProfileData.blood_group }}</span>
            </div>
          </div>
        </div>

        <!-- Location & Background Section -->
        <div class="section" *ngIf="userProfileData">
          <h4>Location & Background</h4>
          <div class="details-grid">
            <div *ngIf="userProfileData.current_city" class="detail-item">
              <span class="detail-label">Current City</span>
              <span class="detail-value">{{ userProfileData.current_city }}</span>
            </div>
            <div *ngIf="userProfileData.country" class="detail-item">
              <span class="detail-label">Country</span>
              <span class="detail-value">{{ userProfileData.country }}</span>
            </div>
            <div *ngIf="userProfileData.religion" class="detail-item">
              <span class="detail-label">Religion</span>
              <span class="detail-value">{{ userProfileData.religion }}</span>
            </div>
            <div *ngIf="userProfileData.languages_spoken" class="detail-item">
              <span class="detail-label">Languages Spoken</span>
              <span class="detail-value">{{ userProfileData.languages_spoken }}</span>
            </div>
            <div *ngIf="userProfileData.dual_citizenship" class="detail-item">
              <span class="detail-label">Dual Citizenship</span>
              <span class="detail-value">{{ userProfileData.dual_citizenship }}</span>
            </div>
          </div>
        </div>

        <!-- Education & Career Section -->
        <div class="section" *ngIf="userProfileData">
          <h4>Education & Career</h4>
          <div class="details-grid">
            <div *ngIf="userProfileData.education_level" class="detail-item">
              <span class="detail-label">Education Level</span>
              <span class="detail-value">{{ userProfileData.education_level }}</span>
            </div>
            <div *ngIf="userProfileData.field_of_study" class="detail-item">
              <span class="detail-label">Field of Study</span>
              <span class="detail-value">{{ userProfileData.field_of_study }}</span>
            </div>
            <div *ngIf="userProfileData.employment_status" class="detail-item">
              <span class="detail-label">Employment Status</span>
              <span class="detail-value">{{ userProfileData.employment_status }}</span>
            </div>
            <div *ngIf="userProfileData.job_role" class="detail-item">
              <span class="detail-label">Profession</span>
              <span class="detail-value">{{ userProfileData.job_role }}</span>
            </div>
            <div *ngIf="userProfileData.work_experience_years" class="detail-item">
              <span class="detail-label">Work Experience</span>
              <span class="detail-value">{{ userProfileData.work_experience_years }}</span>
            </div>
            <div *ngIf="userProfileData.career_aspirations" class="detail-item">
              <span class="detail-label">Career Aspirations</span>
              <span class="detail-value">{{ userProfileData.career_aspirations }}</span>
            </div>
            <div *ngIf="userProfileData.income_range" class="detail-item">
              <span class="detail-label">Income Range</span>
              <span class="detail-value">{{ userProfileData.income_range }}</span>
            </div>
          </div>
        </div>

        <!-- Lifestyle & Preferences Section -->
        <div class="section" *ngIf="userProfileData">
          <h4>Lifestyle & Preferences</h4>
          <div class="details-grid">
            <div *ngIf="userProfileData.food_preference" class="detail-item">
              <span class="detail-label">Food Preference</span>
              <span class="detail-value">{{ userProfileData.food_preference }}</span>
            </div>
            <div *ngIf="userProfileData.smoking_habit" class="detail-item">
              <span class="detail-label">Smoking Habit</span>
              <span class="detail-value">{{ userProfileData.smoking_habit }}</span>
            </div>
            <div *ngIf="userProfileData.alcohol_habit" class="detail-item">
              <span class="detail-label">Alcohol Habit</span>
              <span class="detail-value">{{ userProfileData.alcohol_habit }}</span>
            </div>
            <div *ngIf="userProfileData.fitness_level" class="detail-item">
              <span class="detail-label">Fitness Level</span>
              <span class="detail-value">{{ userProfileData.fitness_level }}</span>
            </div>
            <div *ngIf="userProfileData.hobbies_interests" class="detail-item">
              <span class="detail-label">Hobbies & Interests</span>
              <span class="detail-value">{{ userProfileData.hobbies_interests }}</span>
            </div>
            <div *ngIf="userProfileData.travel_preference" class="detail-item">
              <span class="detail-label">Travel Preference</span>
              <span class="detail-value">{{ userProfileData.travel_preference }}</span>
            </div>
          </div>
        </div>

        <!-- Relationship Preferences Section -->
        <div class="section" *ngIf="userProfileData">
          <h4>Relationship Preferences</h4>
          <div class="details-grid">
            <div *ngIf="userProfileData.family_type" class="detail-item">
              <span class="detail-label">Family Type</span>
              <span class="detail-value">{{ userProfileData.family_type }}</span>
            </div>
            <div *ngIf="userProfileData.children_timeline" class="detail-item">
              <span class="detail-label">Children Timeline</span>
              <span class="detail-value">{{ userProfileData.children_timeline }}</span>
            </div>
            <div *ngIf="userProfileData.open_to_adoption" class="detail-item">
              <span class="detail-label">Open to Adoption</span>
              <span class="detail-value">{{ userProfileData.open_to_adoption }}</span>
            </div>
            <div *ngIf="userProfileData.relocation_willingness" class="detail-item">
              <span class="detail-label">Relocation Willingness</span>
              <span class="detail-value">{{ userProfileData.relocation_willingness }}</span>
            </div>
            <div *ngIf="userProfileData.live_with_inlaws" class="detail-item">
              <span class="detail-label">Live with In-Laws</span>
              <span class="detail-value">{{ userProfileData.live_with_inlaws }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-actions">
        <button class="modal-btn primary" (click)="editProfile()">
          ✏️ Edit Profile
        </button>
        <!--<button class="modal-btn secondary" (click)="closeUserProfileModal()">
          Close
        </button>-->
      </div>
    </div>
  </div>

</div>