<div *ngIf="applicationStatus === ExpertApplicationStatus.None" class="content">
  <h1 class="title">{{ 'ExpertStatus.BecomeTitle' | translate }}</h1>
  <div class="text">
    <p>
      {{ 'ExpertStatus.ApplyText' | translate }}
    </p>
  </div>
  <a style="margin-top: 2.4em;" class="offset-5 col-2 sv-default-btn btn btn-primary"
     (click)="apply()">{{ 'ExpertStatus.ApplyNow' | translate }}
  </a>
</div>

<div *ngIf="applicationStatus === ExpertApplicationStatus.Pending" class="content">
  <h1 class="title">{{ 'ExpertStatus.PendingTitle' | translate }}</h1>
  <div class="text">
    <p>
      {{ 'ExpertStatus.PendingText1' | translate }} <span>{{ userEmail }}</span>.
    </p>
    <p>{{ 'ExpertStatus.PendingText2' | translate }}</p>
    <p>{{ 'ExpertStatus.PendingText3' | translate }}</p>
  </div>
</div>

<div *ngIf="applicationStatus === ExpertApplicationStatus.Rejected" class="content">
  <h1 class="title">{{ 'ExpertStatus.RejectedTitle' | translate }}</h1>
  <div class="text">
    <p>
      {{ 'ExpertStatus.RejectedText' | translate }}
    </p>
    <button class="main-btn"
       (click)="apply()">{{ 'ExpertStatus.ApplyAgain' | translate }}
    </button>
  </div>
</div>
