<div class="fl-content-min-height fl-content">
  <div *ngIf="invoices && !invoices.length" class="fl-heading-md fl-gray-color" i18n>No invoices</div>
  <app-fl-backdrop *ngIf="!invoices" overlayParent></app-fl-backdrop>
  <div *ngIf="invoices" layoutDirection="column">
    <table *ngIf="invoices && invoices.length" class="full-width" mat-table [dataSource]="invoices">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef i18n>Invoice id</th>
        <td class="position-relative" mat-cell *matCellDef="let invoice">
          <app-status-line [direction]="LineDirection.Vertical" [type]="invoice.appLineType"
                           [color]="invoice.appLineColor"></app-status-line>
          <div *ngIf="config.authService.feature('ui.staff')"
               class="fl-inline-block fl-margin-right-medium invoice-selector-container">
            <mat-checkbox *ngIf="invoice.status === 'unpaid' && !invoice.is_upgrade_invoice" color="primary"
                          (change)="changeInvoiceSelection(invoice.id)"
                          [checked]="selectedInvoices[invoice.id]"></mat-checkbox>
          </div>
          <a [routerLink]="[config.getPanelUrl('billing/invoices'), invoice.id]"
             class="vertical-align-middle display-inline-block">
            {{invoice.display_number || invoice.id}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef class="hide-xs" i18n>Status</th>
        <td mat-cell *matCellDef="let invoice" class="hide-xs">
          <a [routerLink]="[config.getPanelUrl('billing/invoices'), invoice.id]">
            {{invoice.status | uppercase}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="issue_date">
        <th mat-header-cell *matHeaderCellDef i18n>Issue date</th>
        <td mat-cell *matCellDef="let invoice">
          <a [routerLink]="[config.getPanelUrl('billing/invoices'), invoice.id]">
            <app-date-displayer [date]="invoice.issue_date"></app-date-displayer>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="total">
        <th mat-header-cell *matHeaderCellDef i18n>Total</th>
        <td mat-cell *matCellDef="let invoice">
          <a [routerLink]="[config.getPanelUrl('billing/invoices'), invoice.id]">
            {{invoice.total | currencyFormatter: invoice.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
          </a>
        </td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    </table>
    <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-top">
      <button mat-button color="primary"
              [routerLink]="config.getPanelUrl('billing/invoices/create')"
              [queryParams]="{client_id: object.id}" i18n>Create invoice</button>
      <button mat-button *ngIf="config.authService.feature('ui.staff')"
              [disabled]="!hasInvoicesToMerge" (click)="mergeInvoices()"
              [attr.fl-tooltip]="!hasInvoicesToMerge ? nothingToMergeTxt : ''"
              i18n>Merge invoices</button>
    </div>
  </div>
</div>
