<div class="fl-content fl-content-min-height" layoutDirection="column">
  <p i18n>Select the invoices you want to pay.
    <span class="fl-important-text">Selecting multiple invoices will merge them into a new invoice.</span></p>
  <div *ngFor="let invoice of invoices; let last=last" class="fl-margin-bottom-small">
    <div class="fl-margin-bottom-small fl-margin-top-small">
      <mat-checkbox color="primary" (change)="changeInvoiceSelection(invoice)"
                    [disabled]="invoice.is_upgrade_invoice"
                    [attr.fl-tooltip]="invoice.is_upgrade_invoice ? upgradeInvoiceTooltip : ''"
                    fl-tooltip-direction="right"
                    [checked]="selectedInvoices[invoice.id]">
        {{invoice.id}}, {{invoice.balance | currencyFormatter: invoice.currency: 'symbol': null: config.locale}}
      </mat-checkbox>
      <span appFlex="auto"></span>
      <a class="active-link fl-margin-top-small"
         [routerLink]="[config.getPanelUrl('billing/invoices'), invoice.id]" i18n>details</a>
    </div>
    <mat-divider *ngIf="!last"></mat-divider>
  </div>
</div>
