<div layoutDirection="row" layoutDirection-xs="column" class="fl-content">
  <div layoutDirection="column" appFlex="50">
    <p class="fl-detail" *ngIf="object.company" i18n>Company: {{ object.company }}</p>
    <p class="fl-detail" i18n>Name: {{ object.name }}</p>
    <p class="fl-detail" i18n>Country: {{ object.country_name }}</p>
    <p class="fl-detail" i18n>Default currency: {{ object.currency }}
      <app-icon [icon]="infoIcon" fl-tooltip="New services will use the default currency." i18n-fl-tooltip></app-icon>
    </p>
    <p class="fl-detail" i18n>External billing ID: {{ object.external_billing_id | nullValue }}</p>
    <p class="fl-detail" i18n>
      City: {{ object.city }}<span *ngIf="object.state">, {{ object.state }}</span>
    </p>
    <p class="fl-detail" i18n>Address: {{ object.address1 }}</p>
    <p class="fl-detail" *ngIf="object.address2">{{ object.address2 }}</p>
    <p class="fl-detail" i18n>Postal <code></code>: {{ object.zip_code }}</p>
    <p class="fl-detail" i18n>Phone: {{ object.phone }}</p>
    <p class="fl-detail" i18n>ID: {{ object.id }}</p>
    <p class="fl-detail" i18n>Created on: <app-date-displayer [date]="object.date_created"></app-date-displayer></p>
    <p class="fl-detail" i18n>
      Client group: {{ object.group_name }}
    </p>
    <p class="fl-detail" i18n>
      Client is on a billing agreement: {{object.has_billing_agreement | yesNo}}
    </p>
    <p *ngIf="authSvc.feature('ui.clients&users.details.display-do-not-process')" class="fl-detail" i18n>
      Client is excluded from processing: {{object.do_not_process | yesNo}}
    </p>
    <div *ngIf="configuration" layoutDirection="row" class="fl-margin-bottom">
      <p class="fl-detail" i18n>Configuration:
        <a class="active-link"
           [routerLink]="[config.getPanelUrl('settings/configurations'), configuration.id]">
          {{configuration.name}}
        </a>
        <button mat-icon-button [attr.fl-tooltip]="changeConfigurationTooltip" fl-tooltip-direction="down"
                (click)="changeConfiguration()">
          <app-icon [icon]="{'name': 'edit', 'verticalAlign': 'middle'}"></app-icon>
        </button>
      </p>
    </div>
  </div>
  <div layoutDirection="column" appFlex="50" *ngIf="authSvc.feature('ui.clients&users.client-credit')">
    <table class="uptodate-credit-table">
      <thead>
      <tr>
        <th>
          <div layoutDirection="row" layoutAlign="end center">
            <span i18n>Up-to-date credit</span>
            <app-icon [icon]="infoIcon" fl-tooltip="Up-to-date credit credit is periodically calculated based on cost of dynamic usage service(s).
Client can also use credit to pay invoices." fl-tooltip-direction="down" i18n-fl-tooltip></app-icon>
          </div>
        </th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let credit of sortedCredits()">
        <td class="credit-display" [ngClass]="{'fl-bold': credit.currency === object.currency}">
           <span [attr.fl-tooltip]="getCreditTooltip(credit)">
             {{ credit.uptodate_credit | currencyFormatter: credit.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo }}
           </span>
        </td>
        <td class="credit-actions">
          <div layoutDirection="row">
            <a (click)="changeCredit(credit)" fl-tooltip="Edit credit" i18n-fl-tooltip>
              <app-icon [icon]="editIcon"></app-icon>
            </a>
            <a *ngIf="credit.can_delete" (click)="deleteCredit(credit)" fl-tooltip="Delete credit" i18n-fl-tooltip>
              <app-icon [icon]="deleteIcon"></app-icon>
            </a>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <p *ngIf="object.credits.length > 1" i18n>
      Total up-to-date credit: <span
      class="fl-bold">{{ object.uptodate_credit | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo }}</span>
      <app-icon [icon]="infoIcon" fl-tooltip="The sum of up-to-date credit in each currency converted to the default client currency" fl-tooltip-direction="down" i18n-fl-tooltip></app-icon>
    </p>
    <div class="fl-detail fl-margin-top-medium usage-buttons">
      <div [attr.fl-tooltip]="getUpdateUsageTooltip()">
        <button mat-button (click)="updateUsage()" [disabled]="!object.has_dynamic_usage_services">
          <mat-icon>cached</mat-icon>
          <span i18n>Update current credit</span>
        </button>
      </div>
      <button mat-button *ngIf="authSvc.feature('clients&users.clients.reset_usage')"
              (click)="resetUsage()">
        <mat-icon>refresh</mat-icon>
        <span i18n>Reset usage</span>
      </button>
    </div>

    <p *ngIf="object.outofcredit_datetime" class="fl-detail fl-red-color" i18n>
      Client is out of credit since <app-date-displayer [date]="object.outofcredit_datetime"></app-date-displayer>
    </p>
  </div>
</div>
