<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">About</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="bottom-bg-location">
    <h5>Basic info</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>Name</span></p>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.gender">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.birth_date">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.mother_tongue">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.jati_name">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.dharma_name">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.blood_group">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.marital_status">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.marital_status === 'Married' && userProfileData?.marriage_anniversary">
          <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>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5 *ngIf="userProfileData?.location || userProfileData?.native_place">Location</h5>
    <ion-card *ngIf="userProfileData?.location || userProfileData?.native_place">
      <ion-card-header>
        <ion-card-title *ngIf="userProfileData?.location">
          <div class="left-data">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <div class="content">
              <p>{{userProfileData?.location}}<span>Current location</span></p>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.native_place">
          <div class="left-data">
            <div class="icons"><img src="/assets/images/location.svg"></div>
            <div class="content">
              <p>{{userProfileData?.native_place}}<span>Native place</span></p>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5 *ngIf="userProfileData?.mobile || userProfileData?.email">Contact info</h5>
    <ion-card *ngIf="userProfileData?.mobile || userProfileData?.email">
      <ion-card-header>
        <ion-card-title *ngIf="userProfileData?.mobile">
          <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>
            </div>
          </div>
        </ion-card-title>
        <ion-card-title *ngIf="userProfileData?.email">
          <div class="left-data">
            <div class="icons"><img src="/assets/images/mail.svg"></div>
            <div class="content">
              <p>{{userProfileData?.email}}<span>Email</span></p>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5 *ngIf="userProfileData?.family_members?.length > 0">Family members</h5>
    <ion-card *ngIf="userProfileData?.family_members?.length > 0" class="family-card">
      <ion-card-header>
        <ion-card-title *ngFor="let familyDetail of userProfileData?.family_members">
          <div class="left-data">
            <div class="family-members icons"><img [src]="familyDetail?.sent_users?.avatar"></div>
            <div class="content">
              <p>{{familyDetail?.sent_users?.name}}<span>{{familyDetail?.relation}}</span></p>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
      <ion-card-header>
        <ion-card-title *ngFor="let childData of userProfileData?.passive_users">
          <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>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
    <h5
      *ngIf="userProfileData?.qualificaion_details['colleges']?.length > 0 || userProfileData?.qualificaion_details['schools']?.length > 0">
      Qualification</h5>
    <ion-card
      *ngIf="userProfileData?.qualificaion_details['colleges']?.length > 0 || userProfileData?.qualificaion_details['schools']?.length > 0">
      <ion-card-header *ngFor="let data of userProfileData?.qualificaion_details['colleges']">
        <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>
              <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']">
        <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>
              <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>
    </ion-card>
    <h5 *ngIf="userProfileData?.company_details?.length > 0">Work</h5>
    <ion-card *ngIf="userProfileData?.company_details?.length > 0">
      <ion-card-header *ngFor="let data of userProfileData?.company_details">
        <ion-card-title>
          <div class="left-data qualification">
            <div class="icons"><img src="/assets/images/company-icon.svg"></div>
            <div class="content">
              <p *ngIf="data.company_name">{{data.company_name}}<span>Company name</span></p>
              <div class="mid-content" *ngIf="data.profession">
                <p>{{data.profession}}<span>Profession</span></p>
              </div>
              <p *ngIf="data.profession_speciality">{{data.profession_speciality}}<span>Speciality</span></p>
              <div class="mid-content" *ngIf="data.position">
                <p>{{data.position}}<span>Position</span></p>
              </div>
              <div class="mid-content" *ngIf="data.website">
                <p>{{data.website}}<span>Website</span></p>
              </div>
              <div class="mid-content" *ngIf="data.city">
                <p>{{data.city}}<span>City</span></p>
              </div>
              <div class="mid-content" *ngIf="data.about">
                <p>{{data.about}}<span>About</span></p>
              </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>
            </div>
          </div>
        </ion-card-title>
      </ion-card-header>
    </ion-card>
  </div>
</ion-content>
