<div layoutDirection="row" layoutAlign="center center" class="object-details-card">
  <mat-card appearance="raised" class="fl-card-fixed-md">
    <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
    <mat-card-header>
      <mat-card-title i18n>
        My referrals
      </mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content class="fl-content fl-margin-top" layoutDirection="column">
      <div *ngIf="referralData" layoutDirection="column">
        <p class="fl-detail" i18n>
          When you refer a new customer they receive a
          {{referralData.data.referral_settings.referee_credit | currencyFormatter: referralData.data.default_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}} credit valid for
          {{referralData.data.referral_settings.referee_credit_valid_days}} {{referralData.data.referral_settings.referee_credit_valid_days === 1 ? 'day' : 'days'}}. After they have spent
          {{referralData.data.referral_settings.referee_spends_credit | currencyFormatter: referralData.data.default_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}} and are active for
          {{referralData.data.referral_settings.referee_active_days}} {{referralData.data.referral_settings.referee_active_days === 1 ? 'day' : 'days'}}, you'll get
          {{referralData.data.referral_settings.referrer_credit | currencyFormatter: referralData.data.default_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}.
        </p>
        <h2 class="fl-heading-md" i18n>Referral URL</h2>
        <div appFlex="75" layoutDirection="row" appLayoutGap="5px">
          <input class="full-width referral-url-container" matInput disabled [value]="referralData.ref_url">
          <a mat-button color="primary" (click)="clipboard.copyTextToClipboard(referralData.ref_url)" i18n>Copy</a>
        </div>
        <p class="fl-detail fl-margin-top" i18n>Referred clients: {{ referralData.data.signed_up_clients }}</p>
        <p class="fl-detail fl-margin-top" i18n>Link clicks: {{ referralData.data.referral_link_clicks }}</p>
        <p class="fl-detail fl-margin-top" i18n>Total potential earnings: {{ referralData.data.expected_earnings | currencyFormatter: referralData.data.default_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</p>
        <p class="fl-detail fl-margin-top" i18n>Approved earnings: {{ referralData.data.approved_earnings | currencyFormatter: referralData.data.default_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</p>
      </div>
    </mat-card-content>
    <mat-card-actions layoutDirection="column" layoutAlign="start center">
    </mat-card-actions>
  </mat-card>
</div>
