@if (loanProduct) {
  <div class="tab-container">
    <h2 class="mat-h2 flex-100">{{ loanProduct.name }}</h2>
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.shortName }}</span>
    </div>
    @if (loanProduct.externalId) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.externalId }}</span>
      </div>
    }
    @if (loanProduct.fundId) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Fund' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.fundName }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Include in Customer Loan Counter' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.includeInBorrowerCycle | yesNo }}</span>
    </div>
    @if (loanProduct.startDate) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Start Date' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.startDate | dateFormat }}</span>
      </div>
    }
    @if (loanProduct.closeDate) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Close Date' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.closeDate | dateFormat }}</span>
      </div>
    }
    @if (loanProduct.description) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.description }}</span>
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.currency.code }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.currency.displayLabel }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.currency.decimalPlaces }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.currency.inMultiplesOf }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
    </div>
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Principal' | translate }}:</span>
      <span class="flex-60"
        >{{ loanProduct.principal | formatNumber }} (Min
        {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | formatNumber }} : Max
        {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | formatNumber }})
      </span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Allow Approved / Disbursed Amounts Over Applied' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied | yesNo }}</span>
    </div>
    @if (loanProduct.allowApprovedDisbursedAmountsOverApplied) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Over Amount' | translate }}:</span>
        @if (loanProduct.overAppliedCalculationType === 'percentage') {
          <span class="flex-60">{{ loanProduct.overAppliedNumber | formatNumber: 0 }} %</span>
        }
        @if (loanProduct.overAppliedCalculationType === 'flat') {
          <span class="flex-60">{{ loanProduct.overAppliedNumber | formatNumber }} {{ loanProduct.currencyCode }}</span>
        }
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Installment day calculation from' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.repaymentStartDateType?.value | translateKey: 'catalogs' }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Number of Repayments' | translate }}:</span>
      <span class="flex-60">{{
        loanProduct.numberOfRepayments +
          ' (Min: ' +
          (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) +
          ', Max: ' +
          (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) +
          ')'
      }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Linked to floating interest rates' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.isLinkedToFloatingInterestRates | yesNo }}</span>
    </div>
    @if (!loanProduct.isLinkedToFloatingInterestRates) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
        <span class="flex-60"
          >{{
            loanProduct.interestRatePerPeriod +
              ' (Min: ' +
              (loanProduct.minInterestRatePerPeriod
                ? loanProduct.minInterestRatePerPeriod
                : loanProduct.interestRatePerPeriod) +
              ', Max: ' +
              (loanProduct.maxInterestRatePerPeriod
                ? loanProduct.maxInterestRatePerPeriod
                : loanProduct.interestRatePerPeriod) +
              ')'
          }}
          {{ loanProduct.interestRateFrequencyType?.value | translateKey: 'catalogs' }}</span
        >
      </div>
    }
    @if (loanProduct.isLinkedToFloatingInterestRates) {
      <div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Floating Lending Interest Rate' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.floatingRateName }}</span>
        </div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Interest Rate Differential' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.interestRateDifferential }}</span>
        </div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Floating Interest Rate Calculation Allowed' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.isFloatingInterestRateCalculationAllowed | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Floating Interest Rate' | translate }}:</span>
          <span class="flex-60">{{
            loanProduct.defaultDifferentialLendingRate +
              ' (Min: ' +
              (loanProduct.minDifferentialLendingRate
                ? loanProduct.minDifferentialLendingRate
                : loanProduct.defaultDifferentialLendingRate) +
              ', Max: ' +
              (loanProduct.maxDifferentialLendingRate
                ? loanProduct.maxDifferentialLendingRate
                : loanProduct.defaultDifferentialLendingRate) +
              ')'
          }}</span>
        </div>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Terms vary based on loan cycle' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.useBorrowerCycle | yesNo }}</span>
    </div>
    @if (loanProduct.principalVariationsForBorrowerCycle?.length) {
      <div class="flex-fill layout-row">
        <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Principal by loan cycle' | translate }}</h4>
        <table
          class="mat-elevation-z1 flex-fill"
          mat-table
          [dataSource]="loanProduct.principalVariationsForBorrowerCycle"
        >
          <ng-container matColumnDef="valueConditionType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <ng-container matColumnDef="borrowerCycleNumber">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.borrowerCycleNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="minValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.minValue | formatNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="defaultValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.defaultValue | formatNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="maxValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.maxValue | formatNumber }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
        </table>
      </div>
    }
    @if (loanProduct.numberOfRepaymentVariationsForBorrowerCycle?.length) {
      <div class="flex-fill">
        <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Number of Repayments by loan cycle' | translate }}</h4>
        <table
          class="mat-elevation-z1 flex-fill"
          mat-table
          [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle"
        >
          <ng-container matColumnDef="valueConditionType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <ng-container matColumnDef="borrowerCycleNumber">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.borrowerCycleNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="minValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.minValue }}
            </td>
          </ng-container>
          <ng-container matColumnDef="defaultValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.defaultValue }}
            </td>
          </ng-container>
          <ng-container matColumnDef="maxValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.maxValue }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
        </table>
      </div>
    }
    @if (loanProduct.interestRateVariationsForBorrowerCycle?.length) {
      <div class="flex-fill">
        <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Nominal Interest Rate by loan cycle' | translate }}</h4>
        <table
          class="mat-elevation-z1 flex-fill"
          mat-table
          [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle"
        >
          <ng-container matColumnDef="valueConditionType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <ng-container matColumnDef="borrowerCycleNumber">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.borrowerCycleNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="minValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.minValue }}
            </td>
          </ng-container>
          <ng-container matColumnDef="defaultValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.defaultValue }}
            </td>
          </ng-container>
          <ng-container matColumnDef="maxValue">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
            <td mat-cell *matCellDef="let variation">
              {{ variation.maxValue }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
        </table>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Repay Every' | translate }}:</span>
      <span class="flex-60"
        >{{ loanProduct.repaymentEvery }}
        {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
      >
    </div>
    @if (loanProduct.fixedLength) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Fixed Length' | translate }}:</span>
        <span class="flex-60"
          >{{ loanProduct.fixedLength }} {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
        >
      </div>
    }
    @if (loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment) {
      <div class="flex-fill layout-row">
        <span class="flex-40"
          >{{ 'labels.inputs.Minimum days between disbursal and first repayment date' | translate }}:</span
        >
        <span class="flex-60">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment | formatNumber }}</span>
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    @if (loanProduct.amortizationType?.value) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Amortization' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.amortizationType.value | translateKey: 'catalogs' }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.isEqualAmortization | yesNo }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Interest Method' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.interestType?.value | translateKey: 'catalogs' }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Interest Calculation Period' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.interestCalculationPeriodType?.value | translateKey: 'catalogs' }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40"
        >{{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate }}:</span
      >
      <span class="flex-60">{{ loanProduct.allowPartialPeriodInterestCalculation | yesNo }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.interestRecognitionOnDisbursementDate | yesNo }}</span>
    </div>
    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Loan Schedule' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Loan Schedule Type' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.loanScheduleType.value | translateKey: 'catalogs' }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Repayment Strategy' | translate }}:</span>
      <span class="flex-60 repayment-strategy">{{
        loanProduct.transactionProcessingStrategyName | translateKey: 'catalogs'
      }}</span>
    </div>
    @if (isAdvancedPaymentAllocation) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Loan Schedule Processing Type' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.loanScheduleProcessingType.value }}</span>
      </div>
    }
    @if (isAdvancedPaymentAllocation) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Advanced Payment Allocation Transactions' | translate }}:</span>
        <span class="flex-60">
          <mat-accordion>
            @for (paymentAllocation of paymentAllocations; track paymentAllocation) {
              <mifosx-view-advance-paymeny-allocation
                [paymentAllocation]="paymentAllocation"
                [advancePaymentAllocationData]="advancePaymentAllocationData"
              >
              </mifosx-view-advance-paymeny-allocation>
            }
          </mat-accordion>
        </span>
      </div>
    }
    @if (isAdvancedPaymentAllocation && creditAllocations.length > 0) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Advanced Credit Allocation Transactions' | translate }}:</span>
        <span class="flex-60">
          <mat-accordion>
            @for (creditAllocation of creditAllocations; track creditAllocation) {
              <mifosx-view-advance-paymeny-allocation
                [creditAllocation]="creditAllocation"
                [advancePaymentAllocationData]="advancePaymentAllocationData"
              >
              </mifosx-view-advance-paymeny-allocation>
            }
          </mat-accordion>
        </span>
      </div>
    }
    @if (isAdvancedPaymentAllocation && supportedInterestRefundTypes?.length > 0) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Supported Interest Refund Types' | translate }}:</span>
        <span class="flex-60">
          {{ mapHumanReadableValueStringEnumOptionDataList(supportedInterestRefundTypes) }}
        </span>
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Down Payments' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.enableDownPayment | yesNo }}</span>
    </div>
    @if (loanProduct.enableDownPayment) {
      <div class="flex-fill layout-row-wrap responsive-column">
        <span class="flex-40">{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }} (%):</span>
        <span class="flex-60">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
      </div>
    }
    @if (loanProduct.enableDownPayment) {
      <div class="flex-fill layout-row-wrap responsive-column">
        <span class="flex-40">{{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.enableAutoRepaymentForDownPayment | yesNo }}</span>
      </div>
    }
    @if (isAdvancedPaymentAllocation) {
      <div class="flex-100 layout-row-wrap responsive-column">
        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}</h3>
        <mat-divider [inset]="true"></mat-divider>
        <div class="flex-100 layout-row">
          <span class="flex-40">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
        </div>
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Moratorium' | translate }}</h3>
    @if (loanProduct.delinquencyBucket) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
        @if (loanProduct.delinquencyBucket.name) {
          <span class="flex-60">{{ loanProduct.delinquencyBucket.name }}</span>
        }
        @if (!loanProduct.delinquencyBucket.name) {
          <span class="flex-60">{{ 'labels.inputs.Unassigned' | translate }}</span>
        }
      </div>
    }
    @if (!loanProduct.delinquencyBucket) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
        <span class="flex-60">{{ 'labels.inputs.Unassigned' | translate }}</span>
      </div>
    }
    @if (loanProduct.delinquencyBucket) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Enable installment level Delinquency' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
      </div>
    }
    @if (loanProduct.graceOnPrincipalPayment) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Grace on principal payment' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.graceOnPrincipalPayment }}</span>
      </div>
    }
    @if (loanProduct.graceOnInterestPayment) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Grace on interest payment' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.graceOnInterestPayment }}</span>
      </div>
    }
    @if (loanProduct.graceOnInterestCharged) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Interest free period' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.graceOnInterestCharged }}</span>
      </div>
    }
    @if (loanProduct.inArrearsTolerance) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.inArrearsTolerance }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Days in year' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.daysInYearType?.value | translateKey: 'catalogs' }}</span>
    </div>
    @if (isAdvancedPaymentAllocation && loanProduct.daysInYearCustomStrategy) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Days in year custom strategy' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.daysInYearCustomStrategy.value | translateKey: 'catalogs' }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.daysInMonthType?.value | translateKey: 'catalogs' }}</span>
    </div>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Allow fixing of the installment amount' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.canDefineInstallmentAmount | yesNo }}</span>
    </div>
    @if (loanProduct.graceOnArrearsAgeing) {
      <div class="flex-fill layout-row">
        <span class="flex-40"
          >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
        >
        <span class="flex-60">{{ loanProduct.graceOnArrearsAgeing }}</span>
      </div>
    }
    @if (loanProduct.overdueDaysForNPA) {
      <div class="flex-fill layout-row">
        <span class="flex-40"
          >{{
            'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)'
              | translate
          }}:</span
        >
        <span class="flex-60">{{ loanProduct.overdueDaysForNPA }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40"
        >{{ 'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate }}:</span
      >
      <span class="flex-60">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | yesNo }}</span>
    </div>
    @if (loanProduct.principalThresholdForLastInstallment) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.principalThresholdForLastInstallment }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Variable Installments allowed' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.allowVariableInstallments | yesNo }}</span>
    </div>
    @if (loanProduct.allowVariableInstallments) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Variable Installments' | translate }}:</span>
        <span class="flex-60">{{
          '(Min: ' +
            loanProduct.minimumGap +
            ', Max: ' +
            (loanProduct.maximumGap ? loanProduct.maximumGap : loanProduct.minimumGap) +
            ')'
        }}</span>
      </div>
    }
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.canUseForTopup | yesNo }}</span>
    </div>
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Recalculation' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Recalculate Interest' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.isInterestRecalculationEnabled | yesNo }}</span>
    </div>
    @if (loanProduct.isInterestRecalculationEnabled) {
      <div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Pre-closure interest calculation rule' | translate }}:</span>
          <span class="flex-60">{{
            loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value
          }}</span>
        </div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Advance payments adjustment type' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
        </div>
        <div class="flex-fill layout-row-wrap responsive-column">
          <span class="flex-40">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}:</span>
          <span class="flex-60">{{
            loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value
          }}</span>
        </div>
        @if (loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0) {
          <div class="flex-fill layout-row-wrap responsive-column">
            <span class="flex-40">{{ 'labels.inputs.Frequency for compounding' | translate }}:</span>
            <span class="flex-60">
              {{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
              @if (
                loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
                loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay
              ) {
                <span
                  >&nbsp;&nbsp;{{
                    'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay?.value
                  }}</span
                >
              }
              @if (
                (loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
                  !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) ||
                loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3
              ) {
                <span
                  >&nbsp;&nbsp;{{
                    loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday?.value
                  }}</span
                >
              }
              @if (
                loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
                loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay
              ) {
                <span
                  >&nbsp;&nbsp;{{
                    'on day ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay
                  }}</span
                >
              }
            </span>
            @if (loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1) {
              <div class="flex-fill layout-row-wrap responsive-column">
                <span class="flex-40">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}:</span>
                <span class="flex-60">{{
                  loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval
                }}</span>
              </div>
            }
          </div>
        }
        <div class="flex-fill layout-row responsive-column">
          <span class="flex-40"
            >{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}:</span
          >
          <span class="flex-60">
            {{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
            @if (
              loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
              loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay
            ) {
              <span
                >&nbsp;&nbsp;{{
                  'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay?.value
                }}</span
              >
            }
            @if (
              (loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
                !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) ||
              loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3
            ) {
              <span
                >&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday?.value }}</span
              >
            }
            @if (
              loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
              loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay
            ) {
              <span
                >&nbsp;&nbsp;{{
                  'on day ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay
                }}</span
              >
            }
          </span>
        </div>
        @if (loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1) {
          <div class="flex-100 layout-row-wrap responsive-column">
            <span class="flex-40">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
            @if (loanProduct.recalculationRestFrequencyDate) {
              <div class="flex-fill">
                <span class="flex-40">{{ 'labels.inputs.Rest Frequency Date' | translate }}:</span>
                <span class="flex-60">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
              </div>
            }
          </div>
        }
        <div class="flex-100 layout-row">
          <span class="flex-40"
            >{{ 'labels.inputs.Is Arrears recognization based on original schedule' | translate }}:</span
          >
          <span class="flex-60">{{
            loanProduct.interestRecalculationData.isArrearsBasedOnOriginalSchedule | yesNo
          }}</span>
        </div>
        @if (loanProduct.loanScheduleType.code === 'PROGRESSIVE') {
          <div class="flex-fill layout-row">
            <span class="flex-40"
              >{{ 'labels.inputs.Do not calculate interest on past due principal balances' | translate }}:</span
            >
            <span class="flex-60">{{
              loanProduct.interestRecalculationData.disallowInterestCalculationOnPastDue | yesNo
            }}</span>
          </div>
        }
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Guarantee Requirements' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.holdGuaranteeFunds | yesNo }}</span>
    </div>
    @if (loanProduct.holdGuaranteeFunds) {
      <div class="flex-fill layout-row-wrap responsive-column">
        <span class="flex-40">{{ 'labels.inputs.Mandatory Guarantee' | translate }} (%):</span>
        <span class="flex-60">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
        @if (loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds) {
          <div class="flex-fill layout-row">
            <span class="flex-40">{{ 'labels.inputs.Minimum Guarantee from Own Funds' | translate }} (%):</span>
            <span class="flex-60">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
          </div>
        }
        @if (loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor) {
          <div class="flex-fill layout-row">
            <span class="flex-40">{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds' | translate }} (%):</span>
            <span class="flex-60">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
          </div>
        }
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Loan Tranche Details' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40">{{ 'labels.inputs.Enable Multiple Disbursals' | translate }}:</span>
      <span class="flex-60">{{ loanProduct.multiDisburseLoan | yesNo }}</span>
    </div>
    @if (loanProduct.multiDisburseLoan) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Maximum Tranche count' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.maxTrancheCount }}</span>
      </div>
      @if (loanProduct.outstandingLoanBalance) {
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.outstandingLoanBalance }}</span>
        </div>
      }
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Disallow Expected Disbursements' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.disallowExpectedDisbursements | yesNo }}</span>
      </div>
      @if (loanProduct.loanScheduleType && loanProduct.loanScheduleType.code === 'PROGRESSIVE') {
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Allow full term for each tranche' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowFullTermForTranche | yesNo }}</span>
        </div>
      }
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Event Settings' | translate }}</h3>
    <div class="flex-100">
      <span class="flex-40"
        >{{
          'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate
        }}:</span
      >
      <span class="flex-60">{{ useDueForRepaymentsConfigurations | yesNo }}</span>
    </div>
    @if (loanProduct.dueDaysForRepaymentEvent) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.Due days for repayment event' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.dueDaysForRepaymentEvent | number }}</span>
      </div>
    }
    @if (loanProduct.overDueDaysForRepaymentEvent) {
      <div class="flex-fill layout-row">
        <span class="flex-40">{{ 'labels.inputs.OverDue days for repayment event' | translate }}:</span>
        <span class="flex-60">{{ loanProduct.overDueDaysForRepaymentEvent | number }}</span>
      </div>
    }
    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Configurable Terms and Settings' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-fill layout-row">
      <span class="flex-40"
        >{{ 'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate }}:</span
      >
      <span class="flex-60">{{ loanProduct.allowAttributeConfiguration | yesNo }}</span>
    </div>
    @if (loanProduct.allowAttributeConfiguration) {
      <div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Amortization' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.amortizationType | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Interest method' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.interestType | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Repayment strategy' | translate }}:</span>
          <span class="flex-60">{{
            loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode | yesNo
          }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Interest calculation period' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Repaid every' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40">{{ 'labels.inputs.Moratorium' | translate }}:</span>
          <span class="flex-60">{{
            loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo
          }}</span>
        </div>
        <div class="flex-fill layout-row">
          <span class="flex-40"
            >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
          >
          <span class="flex-60">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
        </div>
      </div>
    }
    @if (loanProduct.charges.length) {
      <div class="flex-fill layout-row-wrap responsive-column">
        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
        <mat-divider [inset]="true"></mat-divider>
        <table
          class="mat-elevation-z1 flex-100"
          mat-table
          [dataSource]="loanProduct.charges | chargesPenaltyFilter: false"
        >
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
            <td mat-cell *matCellDef="let charge">
              {{ charge.name + ', ' + charge.currency.displaySymbol }}
            </td>
          </ng-container>
          <ng-container matColumnDef="chargeCalculationType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
            <td mat-cell *matCellDef="let charge">
              {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <ng-container matColumnDef="amount">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
            <td mat-cell *matCellDef="let charge">
              {{ charge.amount | formatNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="chargeTimeType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
            <td mat-cell *matCellDef="let charge">
              {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
        </table>
        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Overdue Charges' | translate }}</h3>
        <mat-divider [inset]="true"></mat-divider>
        <table
          class="mat-elevation-z1 flex-100"
          mat-table
          [dataSource]="loanProduct.charges | chargesPenaltyFilter: true"
        >
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
            <td mat-cell *matCellDef="let overdueCharge">
              {{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
            </td>
          </ng-container>
          <ng-container matColumnDef="chargeCalculationType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
            <td mat-cell *matCellDef="let overdueCharge">
              {{ overdueCharge.chargeCalculationType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <ng-container matColumnDef="amount">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
            <td mat-cell *matCellDef="let overdueCharge">
              {{ overdueCharge.amount | formatNumber }}
            </td>
          </ng-container>
          <ng-container matColumnDef="chargeTimeType">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
            <td mat-cell *matCellDef="let overdueCharge">
              {{ overdueCharge.chargeTimeType.value | translateKey: 'catalogs' }}
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
        </table>
      </div>
    }
    @if (isAdvancedPaymentAllocation) {
      <div class="flex-100 layout-row-wrap responsive-column">
        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Income capitalization' | translate }}</h3>
        <mat-divider [inset]="true"></mat-divider>
        <div class="flex-100 layout-row">
          <span class="flex-40">{{ 'labels.inputs.Enable income capitalization' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.enableIncomeCapitalization | yesNo }}</span>
        </div>
        @if (loanProduct.enableIncomeCapitalization) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Income capitalization calculation type' | translate }}:</span>
            <span class="flex-60">{{
              loanProduct.capitalizedIncomeCalculationType?.value | translateKey: 'catalogs'
            }}</span>
          </div>
        }
        @if (loanProduct.enableIncomeCapitalization) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Income capitalization strategy' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.capitalizedIncomeStrategy?.value | translateKey: 'catalogs' }}</span>
          </div>
        }
        @if (loanProduct.enableIncomeCapitalization) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Income type' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.capitalizedIncomeType?.value | translateKey: 'catalogs' }}</span>
          </div>
        }
      </div>
    }
    @if (isAdvancedPaymentAllocation) {
      <div class="flex-100 layout-row-wrap responsive-column">
        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Buy down fees' | translate }}</h3>
        <mat-divider [inset]="true"></mat-divider>
        <div class="flex-100 layout-row">
          <span class="flex-40">{{ 'labels.inputs.Enable Buy down fee' | translate }}:</span>
          <span class="flex-60">{{ loanProduct.enableBuyDownFee | yesNo }}</span>
        </div>
        @if (loanProduct.enableBuyDownFee) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Buy down fee calculation type' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.buyDownFeeCalculationType?.value | translateKey: 'catalogs' }}</span>
          </div>
        }
        @if (loanProduct.enableBuyDownFee) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Buy down fee strategy' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.buyDownFeeStrategy?.value | translateKey: 'catalogs' }}</span>
          </div>
        }
        @if (loanProduct.enableBuyDownFee) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Buy down fee income type' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.buyDownFeeIncomeType?.value | translateKey: 'catalogs' }}</span>
          </div>
        }
        @if (loanProduct.enableBuyDownFee) {
          <div class="flex-100 layout-row">
            <span class="flex-40">{{ 'labels.inputs.Merchant Buy down fee' | translate }}:</span>
            <span class="flex-60">{{ loanProduct.merchantBuyDownFee | yesNo }}</span>
          </div>
        }
      </div>
    }
    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
    <mat-divider [inset]="true"></mat-divider>
    <div class="flex-100 layout-row">
      <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
      <span class="flex-60">{{
        'labels.accounting.' + getAccountingRuleName(accountingRuleData[accountingRule() - 1]) | translate
      }}</span>
    </div>
    @if (isAccountingAccrualBased) {
      <div class="flex-100 layout-row">
        <span class="flex-40"
          >{{ 'labels.inputs.Enable Accrual Activity Posting on Installment Due Date' | translate }}:</span
        >
        <span class="flex-60">{{ loanProduct.enableAccrualActivityPosting | yesNo }}</span>
      </div>
    }
    @if (isAccountingEnabled()) {
      <div class="flex-100 layout-row-wrap responsive-column">
        <h4 class="mat-h4 flex-100">
          {{ 'labels.heading.Assets' | translate }} / {{ 'labels.heading.Liabilities' | translate }}
        </h4>
        <div class="flex-100 layout-row-wrap responsive-column">
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Fund source'"
            [glAccount]="accountingMappings.fundSourceAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        </div>
        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
        <div class="flex-100 layout-row-wrap responsive-column">
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Loan portfolio'"
            [glAccount]="accountingMappings.loanPortfolioAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
          @if (loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4) {
            <div class="flex-fill layout-row-wrap responsive-column">
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Interest Receivable'"
                [glAccount]="accountingMappings.receivableInterestAccount"
                [withTitle]="'47%'"
              >
              </mifosx-gl-account-display>
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Fees Receivable'"
                [glAccount]="accountingMappings.receivableFeeAccount"
                [withTitle]="'47%'"
              >
              </mifosx-gl-account-display>
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Penalties Receivable'"
                [glAccount]="accountingMappings.receivablePenaltyAccount"
                [withTitle]="'47%'"
              >
              </mifosx-gl-account-display>
            </div>
          }
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Transfer in suspense'"
            [glAccount]="accountingMappings.transfersInSuspenseAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        </div>
        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
        <mifosx-gl-account-display
          class="flex-100"
          [accountTitle]="'Income from Interest'"
          [glAccount]="accountingMappings.interestOnLoanAccount"
          [withTitle]="'47%'"
        >
        </mifosx-gl-account-display>
        <mifosx-gl-account-display
          class="flex-100"
          [accountTitle]="'Income from fees'"
          [glAccount]="accountingMappings.incomeFromFeeAccount"
          [withTitle]="'47%'"
        >
        </mifosx-gl-account-display>
        <mifosx-gl-account-display
          class="flex-100"
          [accountTitle]="'Income from penalties'"
          [glAccount]="accountingMappings.incomeFromPenaltyAccount"
          [withTitle]="'47%'"
        >
        </mifosx-gl-account-display>
        <mifosx-gl-account-display
          class="flex-100"
          [accountTitle]="'Income from Recovery Repayments'"
          [glAccount]="accountingMappings.incomeFromRecoveryAccount"
          [withTitle]="'47%'"
        >
        </mifosx-gl-account-display>
        @if (accountingMappings.incomeFromChargeOffInterestAccount) {
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Income from ChargeOff Interest'"
            [glAccount]="accountingMappings.incomeFromChargeOffInterestAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        }
        @if (accountingMappings.incomeFromChargeOffFeesAccount) {
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Income from ChargeOff Fees'"
            [glAccount]="accountingMappings.incomeFromChargeOffFeesAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        }
        @if (accountingMappings.incomeFromChargeOffPenaltyAccount) {
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Income from ChargeOff Penalty'"
            [glAccount]="accountingMappings.incomeFromChargeOffPenaltyAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        }
        @if (accountingMappings.incomeFromCapitalizationAccount) {
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Income capitalization'"
            [glAccount]="accountingMappings.incomeFromCapitalizationAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        }
        @if (accountingMappings.incomeFromBuyDownAccount) {
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Income from Buy down fees'"
            [glAccount]="accountingMappings.incomeFromBuyDownAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
        }
        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
        <div class="flex-fill layout-row-wrap responsive-column">
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Losses written off'"
            [glAccount]="accountingMappings.writeOffAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Expenses from Goodwill Credit'"
            [glAccount]="accountingMappings.goodwillCreditAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
          @if (accountingMappings.chargeOffExpenseAccount) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'ChargeOff Expense'"
              [glAccount]="accountingMappings.chargeOffExpenseAccount"
              [withTitle]="'47%'"
            >
            </mifosx-gl-account-display>
          }
          @if (accountingMappings.chargeOffFraudExpenseAccount) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'ChargeOff Fraud Expense'"
              [glAccount]="accountingMappings.chargeOffFraudExpenseAccount"
              [withTitle]="'47%'"
            >
            </mifosx-gl-account-display>
          }
          @if (accountingMappings.buyDownExpenseAccount) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Buy down fee Expense'"
              [glAccount]="accountingMappings.buyDownExpenseAccount"
              [withTitle]="'47%'"
            >
            </mifosx-gl-account-display>
          }
          <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="'Over payment liability'"
            [glAccount]="accountingMappings.overpaymentLiabilityAccount"
            [withTitle]="'47%'"
          >
          </mifosx-gl-account-display>
          @if (accountingMappings.deferredIncomeLiabilityAccount) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Deferred income'"
              [glAccount]="accountingMappings.deferredIncomeLiabilityAccount"
              [withTitle]="'47%'"
            >
            </mifosx-gl-account-display>
          }
          @if (isAdvancedAccountingEnabled()) {
            <div class="flex-fill layout-row-wrap responsive-column">
              <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
              <mat-divider [inset]="true"></mat-divider>
              @if (paymentChannelToFundSourceMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
                  </h4>
                  <table class="mat-elevation-z1 flex-100" mat-table [dataSource]="paymentChannelToFundSourceMappings">
                    <ng-container matColumnDef="paymentTypeId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Payment Type' | translate }}</th>
                      <td mat-cell *matCellDef="let paymentFundSource">
                        {{ paymentFundSource.paymentType.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="fundSourceAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
                      <td mat-cell *matCellDef="let paymentFundSource">
                        {{ paymentFundSource.fundSourceAccount.name }}
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
                  </table>
                </div>
              }
              @if (feeToIncomeAccountMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}
                  </h4>
                  <table class="mat-elevation-z1 flex-100" mat-table [dataSource]="feeToIncomeAccountMappings">
                    <ng-container matColumnDef="chargeId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.catalogs.Fees' | translate }}</th>
                      <td mat-cell *matCellDef="let feesIncome">
                        {{ feesIncome.charge.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="incomeAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                      <td mat-cell *matCellDef="let feesIncome">
                        @if (feesIncome.incomeAccount) {
                          <span>
                            {{ feesIncome.incomeAccount.name }}
                          </span>
                        }
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
                  </table>
                </div>
              }
              @if (penaltyToIncomeAccountMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
                  </h4>
                  <table class="mat-elevation-z1 flex-100" mat-table [dataSource]="penaltyToIncomeAccountMappings">
                    <ng-container matColumnDef="chargeId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
                      <td mat-cell *matCellDef="let penaltyIncome">
                        {{ penaltyIncome.charge.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="incomeAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                      <td mat-cell *matCellDef="let penaltyIncome">
                        {{ penaltyIncome.incomeAccount.name }}
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
                  </table>
                </div>
              }
              @if (chargeOffReasonToExpenseAccountMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.Map Charge-off reasons to Expense accounts' | translate }}
                  </h4>
                  <table
                    class="mat-elevation-z1 flex-100"
                    mat-table
                    [dataSource]="chargeOffReasonToExpenseAccountMappings"
                  >
                    <ng-container matColumnDef="chargeOffReasonCodeValueId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge-off reason' | translate }}</th>
                      <td mat-cell *matCellDef="let chargeOffReasonToExpenseAccountMapping">
                        {{ chargeOffReasonToExpenseAccountMapping.reasonCodeValue.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="expenseAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
                      <td mat-cell *matCellDef="let chargeOffReasonToExpenseAccountMapping">
                        ({{ chargeOffReasonToExpenseAccountMapping.expenseAccount.glCode }})
                        {{ chargeOffReasonToExpenseAccountMapping.expenseAccount.name }}
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
                  </table>
                </div>
              }
              <div class="flex-100 layout-row-wrap responsive-column">
                <h4 class="mat-h4 flex-100">
                  {{ 'labels.heading.Buydown Fee classifications to Income accounts' | translate }}
                </h4>
                <table
                  class="mat-elevation-z1 flex-100"
                  mat-table
                  [dataSource]="buydownFeeClassificationToIncomeAccountMappings"
                >
                  <ng-container matColumnDef="chargeOffReasonCodeValueId">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Classification' | translate }}</th>
                    <td mat-cell *matCellDef="let classificationToIncomeAccountMapping">
                      {{ classificationToIncomeAccountMapping.classificationCodeValue.name }}
                    </td>
                  </ng-container>
                  <ng-container matColumnDef="expenseAccountId">
                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                    <td mat-cell *matCellDef="let classificationToIncomeAccountMapping">
                      ({{ classificationToIncomeAccountMapping.incomeAccount.glCode }})
                      {{ classificationToIncomeAccountMapping.incomeAccount.name }}
                    </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
                </table>
              </div>
              @if (capitalizedIncomeClassificationToIncomeAccountMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.Capitalized Income classifications to Income accounts' | translate }}
                  </h4>
                  <table
                    class="mat-elevation-z1 flex-100"
                    mat-table
                    [dataSource]="capitalizedIncomeClassificationToIncomeAccountMappings"
                  >
                    <ng-container matColumnDef="chargeOffReasonCodeValueId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Classification' | translate }}</th>
                      <td mat-cell *matCellDef="let capitalizedIncomeClassificationToIncomeAccountMapping">
                        {{ capitalizedIncomeClassificationToIncomeAccountMapping.classificationCodeValue.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="expenseAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                      <td mat-cell *matCellDef="let capitalizedIncomeClassificationToIncomeAccountMapping">
                        ({{ capitalizedIncomeClassificationToIncomeAccountMapping.incomeAccount.glCode }})
                        {{ capitalizedIncomeClassificationToIncomeAccountMapping.incomeAccount.name }}
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
                  </table>
                </div>
              }
              @if (writeOffReasonsToExpenseMappings?.length > 0) {
                <div class="flex-100 layout-row-wrap responsive-column">
                  <h4 class="mat-h4 flex-100">
                    {{ 'labels.heading.WriteOff reasons to Expense accounts' | translate }}
                  </h4>
                  <table class="mat-elevation-z1 flex-100" mat-table [dataSource]="writeOffReasonsToExpenseMappings">
                    <ng-container matColumnDef="chargeOffReasonCodeValueId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.WriteOff Reason' | translate }}</th>
                      <td mat-cell *matCellDef="let writeOffReasonsToExpenseMapping">
                        {{ writeOffReasonsToExpenseMapping.reasonCodeValue.name }}
                      </td>
                    </ng-container>
                    <ng-container matColumnDef="expenseAccountId">
                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
                      <td mat-cell *matCellDef="let writeOffReasonsToExpenseMapping">
                        ({{ writeOffReasonsToExpenseMapping.expenseAccount.glCode }})
                        {{ writeOffReasonsToExpenseMapping.expenseAccount.name }}
                      </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
                  </table>
                </div>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>
}