<div (click)="goToEditProfile($event)" class="d-flex font-12" *ngIf="page === 'menu'">
  <span>{{ percentage }}% complete</span>
  <span class="ml-auto"><ion-icon name="star" class="karma-points"></ion-icon> {{ points }}</span>
</div>
<div (click)="goToEditProfile($event)" class="font-12">
  <ion-progress-bar [value]="percentage/100" class="my-5 progress-indicator"
    [ngClass]="{'sant': page === 'sant'}"></ion-progress-bar>
  <div class="d-flex ion-padding-vertical">
    <p class="ion-no-padding ion-no-margin" *ngIf="['menu', 'shravak-profile'].includes(page)">
      <ng-template [ngIf]="!completed">
        Complete your profile and get <span class="karma-points">100 karma points</span>
      </ng-template>
      <ng-template [ngIf]="completed === 1">
        Congratulations. You received <span class="karma-points">100 karma points</span>
      </ng-template>
      <ng-template [ngIf]="completed === 2">
        Complete your profile and reclaim Karma points
      </ng-template>
    </p>
    <p class="ion-no-padding ion-no-margin w-100" *ngIf="page === 'sant'">
      Complete profile and earn <span class="karma-points">50 karma
        points</span><br> on approval
    </p>
    <ion-icon name="chevron-forward-outline" class="ml-auto"></ion-icon>
  </div>
</div>