<div class="dashboard-address">
  <div class="title-header">
    <div class="d-flex align-items-center w-100 justify-content-between">
      <h5>{{ 'saved_address' | translate }}</h5>
      <app-button
        [class]="'btn theme-bg-color text-white btn-sm fw-bold mt-lg-0 ms-auto'"
        [type]="'button'"
        [spinner]="false"
        [id]="'add_address'"
        (click)="AddressModal()?.openModal()"
      >
        <i class="ri-add-line"></i> {{ 'add_address' | translate }}
      </app-button>
    </div>
  </div>

  @if((user$ | async)?.address?.length){
  <div class="row g-sm-4 g-3">
    @for(address of (user$ | async)?.address; track address; let i = $index){
    <div class="col-xxl-4 col-xl-6 col-lg-12 col-md-6">
      <div class="address-box">
        <div>
          <div class="label">
            <label>{{ address?.title }}</label>
          </div>
          <div class="table-responsive address-table">
            <table class="table">
              <tbody>
                <tr>
                  <td colspan="2">{{ (user$ | async)?.name | titleCase }}</td>
                </tr>
                <tr>
                  <td>{{ 'address' | translate }} :</td>
                  <td>
                    <p>
                      {{ address?.street }}, {{ address?.city }}, {{ address?.state?.name }}, {{
                      address?.country?.name }}
                    </p>
                  </td>
                </tr>
                <tr>
                  <td>{{ 'pin_code' | translate }} :</td>
                  <td>{{ address?.pincode }}</td>
                </tr>
                <tr>
                  <td>{{ 'phone' | translate }} :</td>
                  <td>+{{ address?.country_code }} {{ address?.phone }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="button-group">
          <app-button
            [class]="'btn btn-sm add-button'"
            [type]="'button'"
            [spinner]="false"
            [id]="'edit_address'+address.id"
            (click)="AddressModal()?.openModal(address)"
          >
            <i class="ri-edit-box-line"></i> {{ 'edit' | translate }}
          </app-button>
          <app-button
            [class]="'btn btn-sm add-button'"
            [type]="'button'"
            [spinner]="false"
            [id]="'remove_address'+address.id"
            (click)="DeleteModal()?.openModal('delete', address)"
          >
            <i class="ri-delete-bin-line"></i> {{ 'remove' | translate }}
          </app-button>
        </div>
      </div>
    </div>
    }
  </div>
  }
</div>

@if(!(user$ | async)?.address?.length){
<app-no-data
  [class]="'no-data-added'"
  [image]="'assets/svg/empty-items.svg'"
  [text]="'no_address_found'"
  [description]="'You_have_not_address_yet'"
/>
}

<app-address-modal #addressModal />

<app-delete-modal #deleteModal (deleteItem)="delete($event.actionToPerform,$event.data)" />
