cbsnexora/src/app/clients/client-stepper/client-address-step/client-address-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="mat-typography">
  <div class="section-block">
    <div class="section-header">
      <h4 class="section-title">
        <fa-icon icon="location-arrow" class="section-icon"></fa-icon>
        {{ 'labels.heading.Address' | translate }}
      </h4>
      <button mat-stroked-button color="primary" (click)="addAddress()" class="add-btn">
        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
      </button>
    </div>

    @if (clientAddressData.length === 0) {
      <div class="empty-state">
        <fa-icon icon="location-arrow" class="empty-icon"></fa-icon>
        <span>No address added yet. Click Add to add an address.</span>
      </div>
    }

    @if (clientAddressData.length > 0) {
      <mat-accordion>
        @for (address of clientAddressData; track address; let i = $index) {
          <mat-expansion-panel class="address-panel">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <fa-icon icon="location-arrow" class="panel-icon"></fa-icon>
                {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
              </mat-panel-title>
              <mat-panel-description>
                {{ address.relationship }}
              </mat-panel-description>
            </mat-expansion-panel-header>

            <mat-divider></mat-divider>

            <div class="address-actions">
              <button mat-button color="primary" (click)="editAddress(address, i)">
                <fa-icon icon="edit"></fa-icon>
              </button>
              <button mat-button color="warn" (click)="deleteAddress(address, i)">
                <fa-icon icon="trash"></fa-icon>
              </button>
              <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
            </div>

            <div class="address-details">
              @if (isFieldEnabled('street')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Street' | translate }}</span>
                  <span class="detail-value">{{ address.street }}</span>
                </div>
              }
              @if (isFieldEnabled('addressLine1')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Address Line' | translate }} 1</span>
                  <span class="detail-value">{{ address.addressLine1 }}</span>
                </div>
              }
              @if (isFieldEnabled('addressLine2')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Address Line' | translate }} 2</span>
                  <span class="detail-value">{{ address.addressLine2 }}</span>
                </div>
              }
              @if (isFieldEnabled('addressLine3')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Address Line' | translate }} 3</span>
                  <span class="detail-value">{{ address.addressLine3 }}</span>
                </div>
              }
              @if (isFieldEnabled('townVillage')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Town / Village' | translate }}</span>
                  <span class="detail-value">{{ address.townVillage }}</span>
                </div>
              }
              @if (isFieldEnabled('city')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.City' | translate }}</span>
                  <span class="detail-value">{{ address.city }}</span>
                </div>
              }
              @if (isFieldEnabled('stateProvinceId')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.State / Province' | translate }}</span>
                  <span class="detail-value">{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}</span>
                </div>
              }
              @if (isFieldEnabled('countryId')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Country' | translate }}</span>
                  <span class="detail-value">{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}</span>
                </div>
              }
              @if (isFieldEnabled('postalCode')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Postal Code' | translate }}</span>
                  <span class="detail-value">{{ address.postalCode }}</span>
                </div>
              }
              @if (isFieldEnabled('isActive')) {
                <div class="detail-row">
                  <span class="detail-label">{{ 'labels.inputs.Active Status' | translate }}</span>
                  <span class="detail-value">{{ address.isActive ? 'Active' : 'Inactive' }}</span>
                </div>
              }
            </div>
          </mat-expansion-panel>
        }
      </mat-accordion>
    }
  </div>
</div>