cbsnexora/src/app/current-accounts/current-account-stepper/current-account-digital-step/current-account-digital-step.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="dig-wrapper">
  <div class="dig-header">
    <div class="dig-header__icon">
      <i class="fas fa-mobile-alt"></i>
    </div>
    <div class="dig-header__text">
      <h3 class="dig-header__title">Digital &amp; Account Features</h3>
      <p class="dig-header__sub">Toggle the facilities available for this account (as per RBI guidelines)</p>
    </div>
  </div>

  <div class="dig-grid">
    <div class="dig-card" [class.dig-card--on]="facilityConfig.atmFacility">
      <div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">ATM Facility</span>
        <span class="dig-card__status">{{ facilityConfig.atmFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.atmFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.atmWithdrawalFacility">
      <div class="dig-card__icon"><i class="fas fa-wallet"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">ATM Withdrawal</span>
        <span class="dig-card__status">{{ facilityConfig.atmWithdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.atmWithdrawalFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.upiFacility">
      <div class="dig-card__icon"><i class="fas fa-mobile-alt"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">UPI Facility</span>
        <span class="dig-card__status">{{ facilityConfig.upiFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.upiFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.posTransactionsFacility">
      <div class="dig-card__icon"><i class="fas fa-exchange-alt"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">POS Transactions</span>
        <span class="dig-card__status">{{ facilityConfig.posTransactionsFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.posTransactionsFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.chequeBook">
      <div class="dig-card__icon"><i class="fas fa-book"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Cheque Book</span>
        <span class="dig-card__status">{{ facilityConfig.chequeBook ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.chequeBook" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.impsFacility">
      <div class="dig-card__icon"><i class="fas fa-bolt"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">IMPS Facility</span>
        <span class="dig-card__status">{{ facilityConfig.impsFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.impsFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.smsAlerts">
      <div class="dig-card__icon"><i class="fas fa-sms"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">SMS Alerts</span>
        <span class="dig-card__status">{{ facilityConfig.smsAlerts ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.smsAlerts" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.bbpsFacility">
      <div class="dig-card__icon"><i class="fas fa-bell"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">BBPS Facility</span>
        <span class="dig-card__status">{{ facilityConfig.bbpsFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.bbpsFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.insuranceCover">
      <div class="dig-card__icon"><i class="fas fa-shield-alt"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Insurance Cover</span>
        <span class="dig-card__status">{{ facilityConfig.insuranceCover ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.insuranceCover" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.bepgFacility">
      <div class="dig-card__icon"><i class="fas fa-plug"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">BEPG Facility</span>
        <span class="dig-card__status">{{ facilityConfig.bepgFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.bepgFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.neftFacility">
      <div class="dig-card__icon"><i class="fas fa-money-check-alt"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">NEFT Facility</span>
        <span class="dig-card__status">{{ facilityConfig.neftFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.neftFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.rtgsFacility">
      <div class="dig-card__icon"><i class="fas fa-money-check"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">RTGS Facility</span>
        <span class="dig-card__status">{{ facilityConfig.rtgsFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.rtgsFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.interBankTotalCapFacility">
      <div class="dig-card__icon"><i class="fas fa-balance-scale"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Inter-Bank Total Cap</span>
        <span class="dig-card__status">{{ facilityConfig.interBankTotalCapFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.interBankTotalCapFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.withdrawalFacility">
      <div class="dig-card__icon"><i class="fas fa-arrow-right-arrow-left"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Withdrawal Facility</span>
        <span class="dig-card__status">{{ facilityConfig.withdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.withdrawalFacility" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.depositFacilityKyc">
      <div class="dig-card__icon"><i class="fas fa-id-card"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Deposit Facility (KYC)</span>
        <span class="dig-card__status">{{ facilityConfig.depositFacilityKyc ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.depositFacilityKyc" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.virtualDebitCard">
      <div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Virtual Debit Card</span>
        <span class="dig-card__status">{{ facilityConfig.virtualDebitCard ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.virtualDebitCard" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.internetBanking">
      <div class="dig-card__icon"><i class="fas fa-globe"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Internet Banking</span>
        <span class="dig-card__status">{{ facilityConfig.internetBanking ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.internetBanking" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>

    <div class="dig-card" [class.dig-card--on]="facilityConfig.mobileBanking">
      <div class="dig-card__icon"><i class="fas fa-mobile-screen-button"></i></div>
      <div class="dig-card__body">
        <span class="dig-card__label">Mobile Banking</span>
        <span class="dig-card__status">{{ facilityConfig.mobileBanking ? 'Enabled' : 'Disabled' }}</span>
      </div>
      <label class="dig-toggle">
        <input type="checkbox" [(ngModel)]="facilityConfig.mobileBanking" />
        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
      </label>
    </div>
  </div>
</div>