<div layoutDirection="row" layoutDirection-xs="column" class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div *ngIf="referralData" appFlex="50" layoutDirection="column">
    <h2 class="fl-heading-md" i18n>Referral URL</h2>
    <div appFlex="100" 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>
</div>
