<div class="fl-content fl-content-min-height" *ngIf="object">
  <p i18n>
    Client:
    <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]">
      {{object.client.display}}
    </a>
  </p>
  <p i18n>
    Source:
    {{object.source_info.name}}  ({{object.source_amount | currencyFormatter: object.source_currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}})
  </p>
  <p i18n>
    Destination:
    {{object.destination_info.name}} ({{object.destination_amount | currencyFormatter: object.destination_currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}})
  </p>
  <p i18n>
    Date: <app-date-displayer [date]="object.date_added" withTime></app-date-displayer>
  </p>
  <p i18n>
    Invoice #:
    <a *ngIf="object.invoice" class="active-link"
       [routerLink]="[config.getPanelUrl('billing/invoices'), object.invoice]">
      {{object.invoice}}
    </a>
    <span *ngIf="!object.invoice">n/a</span>
  </p>
  <p i18n>
    User:
    <a *ngIf="object.user" class="active-link"
       [routerLink]="[config.getPanelUrl('clients-users/users'), object.user.id]">
      <span *ngIf="object.user.first_name || object.user.last_name; else noName">
        {{object.user.first_name}} {{object.user.last_name}}
      </span>
      <ng-template #noName>{{object.user.email}}</ng-template>
    </a>
    <span *ngIf="!object.user">n/a</span>
  </p>
  <div *ngIf="object.transaction && object.transaction.id">
    <p i18n>
      Transaction: {{object.transaction.external_id}} ({{object.transaction.status}})
    </p>
    <p i18n>
      Gateway: {{object.transaction.gateway.display_name}}
    </p>
    <p i18n>
      Fee: {{object.transaction.fee | currencyFormatter: object.transaction.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
    </p>
  </div>
</div>
