<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Sant BIO</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant ion-padding-horizontal">
  <h5>About sant</h5>
  <div class="white-block">
    <div class="follow-box ion-padding">
      <p class="ion-no-margin">Name</p>
      <p class="ion-no-margin">{{ santDetails?.name }}</p>
    </div>
    <div class="follow-box ion-padding">
      <p class="ion-no-margin">Dharma</p>
      <p class="ion-no-margin">{{ santDetails?.dharm?.name }}</p>
    </div>
    <div class="follow-box ion-padding">
      <p class="ion-no-margin">Sampraday</p>
      <p class="ion-no-margin">{{ santDetails?.sampraday?.name }}</p>
    </div>
    <div class="d-flex follow-box ion-padding">
      <ion-card class="ion-no-margin" (click)="moveToSant(santDetails?.sampraday?.gachadhipati?.id)">
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img [src]="santDetails?.sampraday?.gachadhipati?.avatar || '/assets/images/sant-profile.png'" height="61"
            width="61" alt="{{ santDetails?.sampraday?.gachadhipati?.name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title"> {{ santDetails?.sampraday?.gachadhipati?.name }} <p
              class="ion-no-margin">Gachadipati</p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </div>
    <div class="d-flex follow-box ion-padding" *ngIf="santDetails?.guru?.name">
      <ion-card class="ion-no-margin" (click)="moveToSant(santDetails?.guru?.id)">
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img [src]="santDetails?.guru?.avatar || '/assets/images/user.jpg'" height="61" width="61"
            alt="{{ santDetails?.guru?.name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title"> {{ santDetails?.guru?.name }} <p
              class="ion-no-margin">Guru</p>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </div>
    <div class="follow-box ion-padding" *ngIf="santDetails?.shishya?.length > 0">
      <p class="ion-no-margin"><span>Shishya</span> | Maharaj : {{ santDetails?.maharaj?.length }} | Mahasati Ji : {{
        santDetails?.mahasati_ji?.length }}</p>
      <div class="shishya ion-no-margin">
        <div class="shishya-row d-flex ion-wrap ion-align-items-center" (click)="moveToSant(s?.id)"
          [ngClass]="{'ion-margin-bottom':!last}" *ngFor="let s of santDetails?.shishya; let last =last">
          <ion-thumbnail>
            <img [src]="s?.avatar" width="55" height="55" alt="{{s?.name}}" />
          </ion-thumbnail>
          <ion-label>{{s?.name}}</ion-label>
        </div>
      </div>
    </div>
  </div>
  <h5>Diksha info</h5>
  <div class="white-block">
    <div class="d-flex ion-wrap follow-box diksha-info ion-padding">
      <ion-card class="ion-no-margin ion-margin-bottom">
        <p class="ion-no-margin">Date of birth</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.birth_date | date: 'dd-MM-yyyy' }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="ion-no-margin ion-margin-bottom">
        <p class="ion-no-margin">Age</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.age }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="ion-no-margin ion-margin-bottom">
        <p class="ion-no-margin">Diksha date</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.diksha_date | date: 'dd-MM-yyyy' }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="ion-no-margin ion-margin-bottom">
        <p class="ion-no-margin">Total years of diksha</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.diksha_year }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="ion-no-margin ion-margin-bottom">
        <p class="ion-no-margin">Diksha place</p>
        <ion-card-header class="ion-no-padding" (click)="address(santDetails)">
          <ion-card-title class="ion-no-margin">{{ santDetails?.diksha_place }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  <h5
    *ngIf="santDetails?.father.length > 0 || santDetails?.mother.length > 0 || santDetails?.father_name || santDetails?.mother_name">
    Sansarik info</h5>
  <div class="white-block"
    *ngIf="santDetails?.father.length > 0 || santDetails?.mother.length > 0 || santDetails?.father_name || santDetails?.mother_name">
    <div class="d-flex follow-box sansarik-info ion-padding" *ngIf="santDetails?.father.length > 0">
      <ion-card class="ion-no-margin" (click)="moveToFamily(santDetails?.father)">
        <p class="ion-no-margin">Sansarik father name</p>
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img [src]="santDetails?.father[0]?.sant?.avatar" *ngIf="santDetails?.father[0]?.sant?.avatar" height="30"
            width="30" alt="{{ santDetails?.father_name }}" />
          <img [src]="santDetails?.father[0]?.user?.avatar" *ngIf="santDetails?.father[0]?.user?.avatar" height="30"
            width="30" alt="{{ santDetails?.father_name }}" />
          <img src="/assets/images/user.jpg" *ngIf="santDetails?.father.length <= 0" height="30" width="30"
            alt="{{ santDetails?.father_name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title">{{ santDetails?.father_name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-icon name="chevron-forward-outline" *ngIf="santDetails?.father?.length > 0"></ion-icon>
    </div>
    <div class="d-flex follow-box sansarik-info ion-padding"
      *ngIf="santDetails?.father.length === 0 && santDetails?.father_name">
      <ion-card class="ion-no-margin" (click)="moveToFamily(santDetails?.father)">
        <p class="ion-no-margin">Sansarik father name</p>
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img src="/assets/images/user.jpg" height="30" width="30" alt="{{ santDetails?.father_name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title">{{ santDetails?.father_name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
    <div class="d-flex follow-box sansarik-info ion-padding" *ngIf="santDetails?.mother.length > 0">
      <ion-card class="ion-no-margin" (click)="moveToFamily(santDetails?.mother)">
        <p class="ion-no-margin">Sansarik mother name</p>
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img [src]="santDetails?.mother[0]?.sant?.avatar" *ngIf="santDetails?.mother[0]?.sant?.avatar" height="30"
            width="30" alt="{{ santDetails?.mother_name }}" />
          <img [src]="santDetails?.mother[0]?.user?.avatar" *ngIf="santDetails?.mother[0]?.user?.avatar" height="30"
            width="30" alt="{{ santDetails?.mother_name }}" />
          <img src="/assets/images/user.jpg" *ngIf="santDetails?.mother.length <= 0" height="30" width="30"
            alt="{{ santDetails?.mother_name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title">{{ santDetails?.mother_name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-icon name="chevron-forward-outline" *ngIf="santDetails?.mother?.length > 0"></ion-icon>
    </div>
    <div class="d-flex follow-box sansarik-info ion-padding"
      *ngIf="santDetails?.mother.length === 0 && santDetails?.mother_name">
      <ion-card class="ion-no-margin" (click)="moveToFamily(santDetails?.mother)">
        <p class="ion-no-margin">Sansarik mother name</p>
        <ion-card-header class="d-flex ion-wrap ion-justify-content-between ion-no-padding">
          <img src="/assets/images/user.jpg" height="30" width="30" alt="{{ santDetails?.mother_name }}" />
          <ion-card-title class="ion-no-margin sant-bio-card-title">{{ santDetails?.mother_name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  <h5
    *ngIf="!(santDetails?.updated_by?.name || santDetails?.updated_at) && (santDetails?.created_by?.name || santDetails?.created_at)">
    Created by</h5>
  <div class="white-block"
    *ngIf="!(santDetails?.updated_by?.name || santDetails?.updated_at) && (santDetails?.created_by?.name || santDetails?.created_at)"
    (click)="moveToProfile(santDetails?.created_by?.id)">
    <div class="follow-box created-by ion-padding">
      <ion-card class="d-flex ion-no-margin" *ngIf="santDetails?.created_by?.name">
        <p class="ion-no-margin">Name</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.created_by?.name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="d-flex ion-no-margin" *ngIf="santDetails?.created_at">
        <p class="ion-no-margin">Date</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.created_at | date:'dd-MM-YYYY' }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  <h5 *ngIf="santDetails?.updated_by?.name || santDetails?.updated_at">Updated by</h5>
  <div class="white-block" *ngIf="santDetails?.updated_by?.name || santDetails?.updated_at"
    (click)="moveToProfile(santDetails?.updated_by?.id)">
    <div class="follow-box created-by ion-padding">
      <ion-card class="d-flex ion-no-margin" *ngIf="santDetails?.updated_by?.name">
        <p class="ion-no-margin">Name</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.updated_by?.name }}</ion-card-title>
        </ion-card-header>
      </ion-card>
      <ion-card class="d-flex ion-no-margin" *ngIf="santDetails?.updated_at">
        <p class="ion-no-margin">Date</p>
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.updated_at | date:'dd-MM-YYYY' }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  <h5 *ngIf="santDetails?.about">More about sant</h5>
  <div class="white-block" *ngIf="santDetails?.about">
    <div class="follow-box created-by ion-padding">
      <ion-card class="d-flex ion-no-margin">
        <ion-card-header class="ion-no-padding">
          <ion-card-title class="ion-no-margin">{{ santDetails?.about }}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
</ion-content>
