<div *ngIf="object" class="fl-content fl-content-min-height" layoutDirection="column">
  <p *ngIf="object.client" class="fl-detail" i18n>
    Client:
    <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]">
      {{object.client.display}}
    </a>
  </p>
  <p class="fl-detail" i18n>Order date: <app-date-displayer [date]="object.order_date" withTime></app-date-displayer></p>
  <ng-container *ngIf="object.invoice; else noInvoiceDates">
    <p class="fl-detail" i18n>Issue date: <app-date-displayer [date]="object.invoice.issue_date" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Due date: <app-date-displayer [date]="object.invoice.due_date" withTime></app-date-displayer></p>
  </ng-container>
  <ng-template #noInvoiceDates>
    <p class="fl-detail" i18n>Issue date: n/a</p>
    <p class="fl-detail" i18n>Due date: n/a</p>
  </ng-template>
  <p class="fl-detail" i18n>
    Total: {{object.total | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</p>
  <br>
  <p class="fl-detail" i18n>
    User:
    <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), object.user.id]">
      {{object.user.display}}
    </a>
  </p>
  <p *ngIf="object.invoice; else noInvoiceLink" class="fl-detail" i18n>
    Invoice ID:
    <a class="active-link" [routerLink]="[config.getPanelUrl('billing/invoices'), object.invoice.id]">
      {{object.invoice.id}}
    </a>
  </p>
  <ng-template #noInvoiceLink>
    <p class="fl-detail" i18n>Invoice ID: n/a</p>
  </ng-template>
  <div class="fl-margin-top fl-margin-bottom">
    <strong>Items</strong>
  </div>
  <div *ngFor="let item of object.items" layoutDirection="row" class="fl-detail item-line" layoutAlign="center center">
    <div appFlex="50" xsFlex="100">
      <div layoutDirection="column">
        <div>
          <a *ngIf="item.service; else noService" class="active-link"
             [routerLink]="[config.getPanelUrl(item.is_domain ? 'domains' : 'billing/services'), item.service]">
            {{item.name}}<span *ngIf="item.description"> - {{item.description}}</span>
          </a>
          <ng-template #noService>
            <p>{{item.name}}<span *ngIf="item.description"> - {{item.description}}</span>
          </ng-template>
        </div>
        <div *ngFor="let confOpt of item.configurable_options">
          <span class="fl-detail">{{confOpt.display}}</span>
        </div>
      </div>
    </div>
    <div appFlex="50" class="hide-xs">
      <p>{{item.cycle_display}}</p>
    </div>
  </div>
  <!-- Fraud check results -->
  <div *ngIf="object.fraud_check_result">
    <h2 class="fl-margin-top fl-margin-bottom">Fraud check results</h2>
    <table class="fl-table fl-detail fl-smaller-rows-table">
      <tbody>
      <tr *ngFor="let kvp of fraudCheckResults| keyvalue: resultsOrder">
        <td>{{kvp.key}}</td>
        <td>{{kvp.value}}</td>
      </tr>
      </tbody>
    </table>
    <ng-container *ngFor="let kvp of fraudCheckCategoryResults | keyvalue: categoryOrder">
      <h3>{{kvp.key}}</h3>
      <table class="fl-table fl-detail fl-smaller-rows-table">
        <tbody>
        <tr *ngFor="let details of kvp.value| keyvalue: categoryItemOrder">
          <td>{{details.key}}</td>
          <td>
            <ng-container *ngIf="details.value.nullable">{{details.value.value | nullValue}}</ng-container>
            <ng-container *ngIf="details.value.boolean">{{details.value.value | yesNo}}</ng-container>
            <ng-container *ngIf="details.value.percent">
              <ng-container *ngIf="details.value.value !== null; else nullPercent" i18n>{{details.value.value}}%</ng-container>
              <ng-template #nullPercent i18n>n/a</ng-template>
            </ng-container>
            <ng-container *ngIf="!(details.value.nullable || details.value.boolean || details.value.percent)">{{details.value.value}}</ng-container>
          </td>
        </tr>
        </tbody>
      </table>
    </ng-container>
  </div>
  <!-- Fraud check end -->
</div>
