<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn" *ngIf="fromFlag === 'edit'">Edit profile</ion-title>
    <ion-title class="back-btn" *ngIf="fromFlag !== 'edit'">About</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="bottom-bg-location">
    <h5>Basic info <span (click)="editBasicInfo()">Edit</span></h5>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <div class="left-data">
            <ion-icon name="person"></ion-icon>
            <div class="content">
              <p>{{userProfileData?.name}}<span>Full Name</span></p>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/gender-icon.svg"></div>
            <div class="content">
              <p>{{userProfileData?.gender}}<span>Gender</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.gender_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/birthday-icon.svg"></div>
            <div class="content">
              <p>{{userProfileData?.birth_date | date: 'dd-MM-yyyy'}}<span>Birthday</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.birth_date_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/mother-tongue.svg"></div>
            <div class="content">
              <p>{{userProfileData?.mother_tongue}}<span>Mother tongue</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.mother_tongue_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/jaati.svg"></div>
            <div class="content">
              <p>{{userProfileData?.jati_name}}<span>Jaati</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.jati_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/dharm.svg"></div>
            <div class="content">
              <p>{{userProfileData?.dharma_name}}<span>Dharm</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.dharma_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/bloodgroup.svg"></div>
            <div class="content">
              <p>{{userProfileData?.blood_group}}<span>Blood Group</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.blood_group_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/marital-status.svg"></div>
            <div class="content">
              <p>{{userProfileData?.marital_status}}<span>Marital status</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.marital_status_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.marital_status === 'Married'">
          <div class="left-data">
            <div class="icons"><img src="/assets/images/marriage-anniversary.svg"></div>
            <div class="content">
              <p>{{userProfileData?.marriage_anniversary | date: 'dd-MM-yyyy'}}<span>Marriage anniversary</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.marriage_anniversary_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5>Location <span (click)="editLocationInfo()">Edit</span></h5>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <div class="left-data" (click)="address('current')">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <div class="content">
              <p>{{userProfileData?.location}}<span>Current location</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.location_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data" (click)="address('native')">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <div class="content">
              <p>{{userProfileData?.native_place}}<span>Native place</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.native_place_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5>Contact info <span (click)="editContactInfo()">Edit</span></h5>
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/mobile-call-icon.svg"></div>
            <div class="content">
              <p *ngIf="userProfileData?.country_code">
                {{userProfileData?.country_code}}{{userProfileData?.mobile}}<span>Mobile</span></p>
              <p *ngIf="!userProfileData?.country_code">{{userProfileData?.mobile}}<span>Mobile</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.mobile_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title>
          <div class="left-data">
            <div class="icons"><img src="/assets/images/mail.svg"></div>
            <div class="content">
              <p>{{userProfileData?.email}}<span>Email</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="userProfileData?.email_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5>Family members</h5>
    <ion-card>
      <ion-card-header>
        <ion-card-title *ngFor="let familyDetail of userProfileData?.family_members; let i = index">
          <div class="left-data">
            <div class="family-members icons">
              <img *ngIf="familyDetail?.sent_users; else defaultImage" [src]="familyDetail?.sent_users?.avatar">
              <ng-template #defaultImage>
                <img src="/assets/images/user.jpg">
              </ng-template>
            </div>
            <div class="content">
              <p>{{familyDetail?.sent_users?.name}}<span>{{familyDetail?.relation}} <span
                    *ngIf="familyDetail?.status === 0">(Pending)</span></span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="familyDetail?.relation_privacy === privacy.value"><ion-icon
                    name="people"></ion-icon> {{privacy.name}}</p>
              </ng-container>
            </div>
          </div>
          <div class="icon-child">
            <div class="edit-icon" (click)="editFamilyMember(familyDetail)" *ngIf="familyDetail?.status !== 0"><img
                src="/assets/images/edit-blur-icon.svg"></div>
            <div class="delete-icon" (click)="deleteFamilyMember(familyDetail.to_id, i)"><img
                src="/assets/images/delete.svg"></div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <ion-button class="si" expand="block" (click)="addFamilyMember()" mode="md">Add family member</ion-button><br>
      <ion-card-header>
        <ion-card-title *ngFor="let childData of userProfileData?.passive_users; let i = index">
          <div class="left-data">
            <div class="family-members icons"><img [src]="childData?.avatar"></div>
            <div class="content">
              <p>{{ childData?.name }}<span>{{ relationArray[childData?.relationship] }}</span></p>
            </div>
          </div>
          <div class="icon-child">
            <div class="edit-icon" (click)="editChild(childData)"><img src="/assets/images/edit-blur-icon.svg"></div>
            <div class="delete-icon" (click)="deleteChild(childData.id, i)"><img src="/assets/images/delete.svg"></div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <ion-button class="si" expand="block" (click)="addChild()" mode="md">Add child (Minor - under 14)</ion-button>
    </ion-card>
    <h5>Qualification</h5>
    <ion-card>
      <ion-card-header *ngFor="let data of userProfileData?.qualificaion_details['colleges']; let i = index">
        <div class="work-edit-icon">
          <div class="edit-icon" (click)="editQualificationInfo(data, '2')"><img
              src="/assets/images/edit-blur-icon.svg">
          </div>
          <div class="delete-icon" (click)="deleteQualification(data.id, i, 1)"><img src="/assets/images/delete.svg">
          </div>
        </div>
        <ion-card-title>
          <div class="left-data qualification">
            <div class="icons"><img src="/assets/images/qualification.svg"></div>
            <div class="content">
              <p>{{data.university}}<span>University</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="data.privacy === privacy.value"><ion-icon name="people"></ion-icon>
                  {{privacy.name}}</p>
              </ng-container>
              <p class="mid-content">{{data.qualification}}<span>Qualification</span></p>
              <div *ngIf="data.is_graduate === 1">
                <p>Graduate ({{data.passing_year}})</p>
              </div>
              <div *ngIf="data.is_graduate !== 1">
                <p>Currently pursuing</p>
              </div>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <ion-card-header *ngFor="let data of userProfileData?.qualificaion_details['schools']; let i = index">
        <div class="work-edit-icon">
          <div class="edit-icon" (click)="editQualificationInfo(data, '1')"><img
              src="/assets/images/edit-blur-icon.svg">
          </div>
          <div class="delete-icon" (click)="deleteQualification(data.id, i, 2)"><img src="/assets/images/delete.svg">
          </div>
        </div>
        <ion-card-title>
          <div class="left-data qualification">
            <div class="icons"><img src="/assets/images/qualification.svg"></div>
            <div class="content">
              <p>{{data.highschool}}<span>School</span></p>
              <ng-container *ngFor="let privacy of privacyList">
                <p class="points" *ngIf="data.privacy === privacy.value"><ion-icon name="people"></ion-icon>
                  {{privacy.name}}</p>
              </ng-container>
              <p class="mid-content">{{data.qualification}}<span>Qualification</span></p>
              <p>Passing year ({{data.passing_year}})</p>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <div class="qualification-btn">
        <ion-button class="si" expand="inline-block" (click)="addEducationInfo(1)" mode="md">Add school</ion-button>
        <ion-button class="si" expand="inline-block" (click)="addEducationInfo(2)" mode="md">Add college</ion-button>
      </div>
    </ion-card>
    <h5>Work</h5>
    <ion-card>
      <ion-card-header *ngFor="let data of userProfileData?.company_details; let i = index">
        <div class="work-edit-icon">
          <div class="edit-icon" (click)="editWorkInfo(data)"><img src="/assets/images/edit-blur-icon.svg">
          </div>
          <div class="delete-icon" (click)="deleteWork(data.id, i)"><img src="/assets/images/delete.svg">
          </div>
        </div>
        <ion-card-title>
          <div class="left-data qualification">
            <div class="icons"><img src="/assets/images/company-icon.svg"></div>
            <div class="content">
              <div class="mid-content" *ngIf="data.profession">
                <p>{{data.profession}}<span>Profession</span></p>
                <ng-container *ngFor="let privacy of privacyList">
                  <p class="points" *ngIf="data.profession_privacy === privacy.value"><ion-icon
                      name="people"></ion-icon> {{privacy.name}}</p>
                </ng-container>
              </div>
              <ng-template [ngIf]="data.profession !== 'Housewife'">
                <p *ngIf="data.company_name">{{data.company_name}}<span>Company name</span></p>
                <ng-container *ngFor="let privacy of privacyList">
                  <p class="points" *ngIf="data.company_name && data.company_name_privacy === privacy.value"><ion-icon
                      name="people"></ion-icon> {{privacy.name}}</p>
                </ng-container>
                <p *ngIf="data.profession_speciality">{{data.profession_speciality}}<span>Speciality</span></p>
                <ng-container *ngFor="let privacy of privacyList">
                  <p class="points"
                    *ngIf="data.profession_speciality && data.profession_speciality_privacy === privacy.value"><ion-icon
                      name="people"></ion-icon> {{privacy.name}}</p>
                </ng-container>
                <div class="mid-content" *ngIf="data.position">
                  <p>{{data.position}}<span>Position</span></p>
                  <ng-container *ngFor="let privacy of privacyList">
                    <p class="points" *ngIf="data.position_privacy === privacy.value"><ion-icon
                        name="people"></ion-icon> {{privacy.name}}</p>
                  </ng-container>
                </div>
                <div class="mid-content" *ngIf="data.website">
                  <p>{{data.website}}<span>Website</span></p>
                  <ng-container *ngFor="let privacy of privacyList">
                    <p class="points" *ngIf="data.website_privacy === privacy.value"><ion-icon name="people"></ion-icon>
                      {{privacy.name}}</p>
                  </ng-container>
                </div>
                <div class="mid-content" *ngIf="data.city">
                  <p>{{data.city}}<span>City</span></p>
                  <ng-container *ngFor="let privacy of privacyList">
                    <p class="points" *ngIf="data.city_privacy === privacy.value"><ion-icon name="people"></ion-icon>
                      {{privacy.name}}</p>
                  </ng-container>
                </div>
                <div class="mid-content" *ngIf="data.about">
                  <p>{{data.about}}<span>About</span></p>
                  <ng-container *ngFor="let privacy of privacyList">
                    <p class="points" *ngIf="data.about_privacy === privacy.value"><ion-icon name="people"></ion-icon>
                      {{privacy.name}}</p>
                  </ng-container>
                </div>
                <div class="mid-content" *ngIf="data.start_year">
                  <p *ngIf="data.start_year && !data.end_year">({{data.start_year}} - To present)<span>Duration</span>
                  </p>
                  <p *ngIf="data.start_year && data.end_year">({{data.start_year}} -
                    {{data.end_year}})<span>Duration</span></p>
                </div>
              </ng-template>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <ion-button class="si add-work-btn" expand="block" (click)="addWorkInfo()" mode="md">Add work</ion-button>
    </ion-card>
  </div>
</ion-content>