@if (invoice) {
  <nb-card-body [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large">
    <div class="py-1">
      <div class="d-flex justify-content-between">
        <div class="mb-5 w-100">
          <div class="d-flex justify-content-between">
            <div class="mb-5 font-weight-bold">
              <h4 class="d-inline mr-2">
                {{
                (!isEstimate ? 'INVOICES_PAGE.INVOICE_NUMBER' : 'INVOICES_PAGE.ESTIMATE_NUMBER')
                | translate
                }}
              </h4>
              <h4 class="d-inline">{{ invoice?.invoiceNumber }}</h4>
            </div>
            <div>
              <ng-container>
                <ng-template [ngTemplateOutlet]="buttonsOutlet"></ng-template>
              </ng-container>
            </div>
          </div>
          <!-- Dates on the left, the parties on the right, every one of them a label against its value on
               one line. "From:" and "To:" used to stand ABOVE their values in two stacked columns, so the
               same pair of facts was spelled two different ways on one row. -->
          <div class="meta-row">
            <dl class="meta">
              <div class="meta-item">
                <dt>
                  {{
                  (!isEstimate ? 'INVOICES_PAGE.INVOICE_DATE' : 'INVOICES_PAGE.ESTIMATE_DATE')
                  | translate
                  }}:
                </dt>
                <!-- `dueDate` is optional and `dateFormat` yields undefined for an unset
                     date, so these labels used to stand over blanks. -->
                <dd>{{ (invoice?.invoiceDate | dateFormat) || '—' }}</dd>
              </div>
              <div class="meta-item">
                <dt>{{ 'INVOICES_PAGE.DUE_DATE' | translate }}:</dt>
                <dd>{{ (invoice?.dueDate | dateFormat) || '—' }}</dd>
              </div>
            </dl>
            <dl class="meta meta-parties">
              <div class="meta-item">
                <dt>{{ 'INVOICES_PAGE.VIEW.FROM' | translate | titlecase }}:</dt>
                <dd>{{ invoice?.fromOrganization?.name || '—' }}</dd>
              </div>
              <div class="meta-item">
                <dt>{{ 'INVOICES_PAGE.VIEW.TO' | translate | titlecase }}:</dt>
                <!-- A draft invoice can have no contact yet; the label used to sit over a blank. -->
                <dd>{{ invoice?.toContact?.name || '—' }}</dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
      <div class="table-scroll-container table">
        <angular2-smart-table
          [class.ga-table-loading]="loading"
          [settings]="settingsSmartTable"
          [source]="smartTableSource"
          style="cursor: pointer"
        ></angular2-smart-table>
      </div>
      <!-- The figures under the item grid: one row per line, the label against its value, aligned under the
           money column of the table above. They used to be two parallel flex columns of `mt-2` divs, so the
           labels and their values only lined up by luck, and the total read like any other row. The internal
           note keeps the left, where it stacks above the figures on a narrow card. -->
      <div class="summary">
        @if (invoice.internalNote && showInternalNote) {
          <div class="internal-note">
            <h5>{{ 'INVOICES_PAGE.INTERNAL_NOTE.INTERNAL_NOTE' | translate }}</h5>
            <p>{{ invoice.internalNote }}</p>
          </div>
        }
        <dl class="totals">
          <div class="total-row">
            <dt>{{ 'INVOICES_PAGE.TAX' | translate }}</dt>
            <dd>
              @if (invoice.taxType === discountTaxTypes.FLAT_VALUE) {
                {{
                invoice?.tax || 0
                | currency : invoice?.currency
                | position : invoice?.fromOrganization.currencyPosition
                }}
              }
              @if (invoice.taxType === discountTaxTypes.PERCENT) {
                {{ invoice?.tax || 0 }}%
              }
            </dd>
          </div>
          <!-- The second tax row was keyed off `taxType`, so a percentage Tax 2 on
               a flat-value Tax 1 was rendered as a currency amount. -->
          <div class="total-row">
            <dt>{{ 'INVOICES_PAGE.TAX_2' | translate }}</dt>
            <dd>
              @if (invoice.tax2Type === discountTaxTypes.FLAT_VALUE) {
                {{
                invoice?.tax2 || 0
                | currency : invoice?.currency
                | position : invoice?.fromOrganization.currencyPosition
                }}
              }
              @if (invoice.tax2Type === discountTaxTypes.PERCENT) {
                {{ invoice?.tax2 || 0 }}%
              }
            </dd>
          </div>
          <div class="total-row">
            <dt>{{ 'INVOICES_PAGE.INVOICES_SELECT_DISCOUNT_VALUE' | translate }}</dt>
            <dd>
              @if (invoice.discountType === discountTaxTypes.FLAT_VALUE) {
                {{
                invoice.discountValue || 0
                | currency : invoice?.currency
                | position : invoice?.fromOrganization.currencyPosition
                }}
              }
              @if (invoice.discountType === discountTaxTypes.PERCENT) {
                <!-- The `%` was on its own line, which renders as "12 %"; the tax rows
                     above it read "12%". Same figure, one spelling. -->
                {{ invoice?.discountValue || 0 }}%
              }
            </dd>
          </div>
          <div class="total-row total-row-grand">
            <dt>{{ 'INVOICES_PAGE.TOTAL_VALUE' | translate }}</dt>
            <dd>
              {{
              invoice?.totalValue || 0
              | currency : invoice?.currency
              | position : invoice?.fromOrganization?.currencyPosition
              }}
            </dd>
          </div>
          <!-- Show remaining amount invoiced -->
          @if (invoice.hasRemainingAmountInvoiced) {
            <div class="total-row">
              <dt>{{ 'INVOICES_PAGE.ALREADY_PAID' | translate }}</dt>
              <dd>
                {{
                invoice?.alreadyPaid || 0
                | currency : invoice?.currency
                | position : invoice?.fromOrganization?.currencyPosition
                }}
              </dd>
            </div>
            <div class="total-row">
              <dt>{{ 'INVOICES_PAGE.AMOUNT_DUE' | translate }}</dt>
              <dd>
                {{
                invoice?.amountDue || 0
                | currency : invoice?.currency
                | position : invoice?.fromOrganization?.currencyPosition
                }}
              </dd>
            </div>
          }
        </dl>
      </div>
    </div>
  </nb-card-body>
} @else {
  <!-- Content to display if the invoice does not exist -->
  <div class="no-invoice-description"></div>
}