<div class="fl-content">
  <div layoutDirection="row" layoutDirection-xs="column" class="full-width" *ngIf="object">
    <div appFlex="50">
      <div>
        <p class="fl-detail" *ngIf="object.is_fiscal" i18n>
          Fiscal invoice issue date: <app-date-displayer [date]="object.fiscal_date"></app-date-displayer>
        </p>
        <p class="fl-detail" *ngIf="object.is_fiscal" i18n>
          Fiscal invoice due date: <app-date-displayer [date]="object.fiscal_due_date"></app-date-displayer>
        </p>
        <p class="fl-detail" i18n>
          Proforma issue date: <app-date-displayer [date]="object.issue_date"></app-date-displayer>
        </p>
        <p class="fl-detail" i18n>
          Proforma due date: <app-date-displayer [date]="object.due_date"></app-date-displayer>
        </p>
        <ng-container *ngIf="authSvc.feature('ui.billing.invoices.client-link'); else noClientLink">
          <p class="fl-detail">
            <a [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]" class="active-link">
              <pre class="fl-no-margin-top fl-no-margin-bottom">{{object.customer_details}}</pre>
            </a>
          </p>
        </ng-container>
        <ng-template #noClientLink>
          <pre class="fl-detail fl-no-margin-top fl-no-margin-bottom">{{object.customer_details}}</pre>
        </ng-template>
      </div>
    </div>
    <div appFlex="50" class="wrap-pre-text">
      <pre class="fl-detail align-fleio-info">{{object.fleio_info}}</pre>
    </div>

  </div>
  <div class="fl-margin-top">
    <h2 class="fl-detail" i18n>Items</h2>
  </div>

  <div layoutDirection="column" *ngIf="object">
    <div class="inv-table">
      <div layoutDirection="row" appLayoutGap="5px">
        <div appFlex="55">
          <span i18n>Name</span>
        </div>
        <div appFlex="15" class="right-align">
          <span i18n>Quantity</span>
        </div>
        <div appFlex="15" class="right-align">
          <span i18n>Unit price</span>
        </div>
        <div appFlex="15" class="right-align">
          <span i18n>Sub total</span>
        </div>
      </div>
      <hr>
      <div layoutDirection="column" appLayoutGap="10px" *ngFor="let item of object.items">
        <div layoutDirection="row" class="inv-row" appLayoutGap="5px">
          <div appFlex="55">
            <div>
              <div layoutDirection="row">
                <div class="display-inline-block fl-margin-right-small"
                     *ngIf="authSvc.feature('ui.staff') && object.items && object.items.length > 1 &&
                     object.status === 'unpaid' && !isUpgradeInvoice">
                  <mat-checkbox color="primary" (change)="selectedInvoiceItem(item.id)"
                                class="invoice-item-checkbox"
                                [value]="selectedItems[item.id]"></mat-checkbox>
                </div>
                <div class="wrap-text-content display-inline-block">
                  <a *ngIf="itemLinks[item.id];else descriptionWithoutUrl"
                     routerLink="{{itemLinks[item.id]}}">
                    <pre class="item-description fl-no-margin-top fl-no-margin-bottom">{{item.description}}</pre>
                  </a>
                  <ng-template #descriptionWithoutUrl>
                    <pre class="item-description fl-no-margin-top fl-no-margin-bottom">{{item.description}}</pre>
                  </ng-template>
                </div>
              </div>
              <div *ngFor="let confOpt of item.configurable_options">
                <span class="fl-detail">{{confOpt.display}}</span>
                <span class="fl-detail" *ngIf="!confOpt.is_free">
                ({{confOpt.price | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}})
              </span>
              </div>
            </div>
          </div>
          <div appFlex="15" class="wrap-text-content right-align">
            <span *ngIf="!object.detailed_invoice || item.usage === null">
              <a *ngIf="itemLinks[item.id];else quantityWithoutUrl"
                 routerLink="{{itemLinks[item.id]}}">1</a>
              <ng-template #quantityWithoutUrl>1</ng-template>
            </span>
          </div>
          <div appFlex="15" class="wrap-text-content right-align">
            <span *ngIf="!object.detailed_invoice || item.usage === null">
              <a *ngIf="itemLinks[item.id];else unitPriceWithoutUrl"
                 routerLink="{{itemLinks[item.id]}}">
                {{item.amount | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
              </a>
              <ng-template
                #unitPriceWithoutUrl>{{item.amount | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}</ng-template>
            </span>
          </div>
          <div appFlex="15" class="wrap-text-content right-align">
            <span *ngIf="!object.detailed_invoice || item.usage === null">
              <a *ngIf="itemLinks[item.id];else subTotalWithoutUrl"
                 routerLink="{{itemLinks[item.id]}}">
                {{item.amount | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
              </a>
              <ng-template
                #subTotalWithoutUrl>{{item.amount | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</ng-template>
            </span>
          </div>
        </div>
        <ng-container *ngIf="object.detailed_invoice && item.usage">
          <ng-container *ngFor="let resourceType of item.usage.resource_types">
            <div layoutDirection="row" class="fl-indent inv-row">
              <span i18n>{{resourceType.display_name}} resources</span>
            </div>
            <ng-container *ngFor="let resourceUsage of item.usage.resource_usages">
              <ng-container *ngIf="resourceType.name === resourceUsage.resource_type.name">
                <div layoutDirection="row" *ngFor="let historyEntry of resourceUsage.history" class="inv-row"
                     appLayoutGap="0" xsGap="10px" smGap="10px">
                  <div appFlex="55">
                    <div class="fl-double-indent">
                      <span class="wrap-text-content">
                        {{resourceUsage.display_name}} - {{historyEntry.rule_display}}
                      </span>
                    </div>
                  </div>
                  <div appFlex="15" class="wrap-text-content right-align">
                    <span>{{historyEntry.price_details.units}} {{historyEntry.price_details.unit_display}}</span>
                  </div>
                  <div appFlex="15" class="wrap-text-content right-align">
                    <span>{{historyEntry.price_details.unit_price | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</span>
                  </div>
                  <div appFlex="15" class="wrap-text-content right-align">
                    <span>{{historyEntry.price | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</span>
                  </div>
                </div>
              </ng-container>
            </ng-container>
          </ng-container>
          <ng-container *ngIf="item.fixed_price">
            <div layoutDirection="row" class="fixed-price-row" appLayoutGap="0" xsGap="10px" smGap="10px">
              <div appFlex="85">
                <span *ngIf="item.fixed_price_diff" class="fl-indent wrap-text-content" i18n>Difference to minimum cost</span>
                <span *ngIf="!item.fixed_price_diff" class="fl-indent wrap-text-content" i18n>Fixed cost</span>
              </div>
              <div appFlex="15" class="wrap-text-content right-align">
                <span>{{item.fixed_price | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</span>
              </div>
            </div>
          </ng-container>
        </ng-container>
      </div>
    </div>

    <div class="fl-margin-top final-amt" layoutDirection="row">
      <div appFlex="auto"></div>
      <div class="right-align">
        <span
          i18n>Sub total: {{object.subtotal | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}</span>
        <br>
        <span *ngFor="let tax of object.taxes">
          {{tax.display}}: {{tax.amount | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
        </span>
        <br>
        <span
          i18n>Total: {{object.total | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</span>
      </div>
    </div>
  </div>

  <div class="fl-margin-top">
    <h2 class="fl-detail" i18n>Journal</h2>
    <hr>
  </div>

  <div *ngIf="object && !object.journal.length" i18n>
    No entries found
  </div>
  <ng-container *ngIf="authSvc.feature('ui.billing.invoices.simple-journal'); else detailedJournal">
    <table *ngIf="object && object.journal && object.journal.length"
           class="full-width fl-table" mat-table [dataSource]="object.journal">
      <ng-container matColumnDef="date_added">
        <th mat-header-cell *matHeaderCellDef class="hide-lt-sm" i18n>Date added</th>
        <td mat-cell *matCellDef="let journalEntry" class="hide-lt-sm">
          <ng-container *ngIf="journalEntry.transaction?.date_initiated; else dateAdded">
            <app-date-displayer [date]="journalEntry.transaction?.date_initiated" withTime></app-date-displayer>
          </ng-container>
          <ng-template #dateAdded>
            <app-date-displayer [date]="journalEntry.date_added" withTime></app-date-displayer>
          </ng-template>
        </td>
      </ng-container>
      <ng-container matColumnDef="source_info">
        <th mat-header-cell *matHeaderCellDef i18n>Source info</th>
        <td mat-cell *matCellDef="let journalEntry" class="source-col">
          <span>
            {{journalEntry.transaction ? journalEntry.transaction.gateway_display_name : journalEntry.source_name}}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="destination_info">
        <th mat-header-cell *matHeaderCellDef i18n>Destination info</th>
        <td mat-cell *matCellDef="let journalEntry">
          <span>
            {{journalEntry.destination_name}}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="destination_amount">
        <th mat-header-cell *matHeaderCellDef i18n>Destination amount</th>
        <td mat-cell *matCellDef="let journalEntry">
          <div class="right-align">
            {{journalEntry.destination_amount | currencyFormatter: journalEntry.destination_currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
          </div>
        </td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedJournalColumns;"></tr>
    </table>
  </ng-container>
  <ng-template #detailedJournal>
    <table *ngIf="object && object.journal && object.journal.length"
           class="full-width fl-table" mat-table [dataSource]="object.journal">
      <ng-container matColumnDef="date_added">
        <th mat-header-cell *matHeaderCellDef class="hide-lt-sm" i18n>Date added</th>
        <td mat-cell *matCellDef="let journalEntry" class="hide-lt-sm">
          <a [routerLink]="[config.getPanelUrl('billing/journal'), journalEntry.id]">
            <ng-container *ngIf="journalEntry.transaction?.date_initiated; else dateAdded">
              <app-date-displayer [date]="journalEntry.transaction?.date_initiated" withTime></app-date-displayer>
            </ng-container>
            <ng-template #dateAdded>
              <app-date-displayer [date]="journalEntry.date_added" withTime></app-date-displayer>
            </ng-template>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="source_info">
        <th mat-header-cell *matHeaderCellDef i18n>Source info</th>
        <td mat-cell *matCellDef="let journalEntry" class="source-col">
          <a [routerLink]="[config.getPanelUrl('billing/journal'), journalEntry.id]">
          <span>
            {{journalEntry?.source_info?.name}}
          </span>
            <br>
            <span class="fl-detail" *ngIf="journalEntry.source_info.invoice" i18n>
              Invoice {{journalEntry.source_info.invoice}}
            </span>
            <span class="fl-detail" *ngIf="journalEntry.source_info.transaction" i18n>
              Transaction {{journalEntry.source_info.transaction}}
            </span>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="destination_info">
        <th mat-header-cell *matHeaderCellDef i18n>Destination info</th>
        <td mat-cell *matCellDef="let journalEntry">
          <a [routerLink]="[config.getPanelUrl('billing/journal'), journalEntry.id]">
          <span>
            {{journalEntry.destination_info.name}}
          </span>
            <br>
            <span class="fl-detail" *ngIf="journalEntry.destination_info.invoice" i18n>
              Invoice {{journalEntry.destination_info.invoice}}
            </span>
            <span class="fl-detail" *ngIf="journalEntry.destination_info.transaction" i18n>
              Transaction {{journalEntry.destination_info.transaction}}
            </span>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="destination_amount">
        <th mat-header-cell *matHeaderCellDef i18n>Destination amount</th>
        <td mat-cell *matCellDef="let journalEntry">
          <div class="right-align">
            <a [routerLink]="[config.getPanelUrl('billing/journal'), journalEntry.id]">
              {{journalEntry.destination_amount | currencyFormatter: journalEntry.destination_currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
            </a>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef i18n>Actions</th>
        <td mat-cell *matCellDef="let journalEntry">
          <div *ngIf="journalEntry.transaction">
            <button mat-icon-button fl-tooltip="Delete" i18n-fl-tooltip
                    (click)="deleteTransaction(journalEntry.transaction)"
                    class="delete-transaction-btn fl-float-right">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedJournalColumns;"></tr>
    </table>
  </ng-template>

  <div layoutDirection="row" class="full-width">
    <div appFlex="auto"></div>
    <div layoutDirection="column">
      <div class="fl-margin-top">
        <span class="balance-container" *ngIf="object" i18n>
          Balance {{object.balance | currencyFormatter: object.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
        </span>
      </div>

      <div class="fl-margin-top" layoutAlign="end" appLayoutGap="10px">
        <div [attr.fl-tooltip]="!objectController.permissions['invoices.download'] ? downloadInvoicePermissionTooltip : null">
          <button mat-button color="primary" (click)="downloadPdf()"
                  [disabled]="!objectController.permissions['invoices.download']"
                  i18n>
            Download PDF
          </button>
        </div>
        <button mat-button
                *ngIf="object.items && object.items.length > 1 && authSvc.feature('ui.staff') &&
                object.status === 'unpaid' && !isUpgradeInvoice"
                [attr.fl-tooltip]="!canSplitInvoice.value ? canSplitInvoice.reason : ''"
                [disabled]="!canSplitInvoice.value" (click)="splitInvoice()" i18n>
          Split invoice
        </button>
      </div>
    </div>
  </div>
</div>
