<div class="tab-pane fade show active">
  <div class="dashboard-home">
    <div class="title-header">
      <div class="d-flex align-items-center">
        <h5>{{ 'my_dashboard' | translate }}</h5>
      </div>
    </div>
    <div class="dashboard-user-name">
      <h6 class="text-content">
        {{ 'hello' | translate }},
        <b class="text-title">{{ (user$ | async)?.name! | titleCase }}</b>
      </h6>
      <p class="text-content">{{ "welcome_text" | translate}}</p>
    </div>
    <div class="total-box">
      <div class="row row-cols-xxl-3 g-sm-4 g-3">
        <div>
          <div class="totle-contain">
            <div class="wallet-point-box">
              <img src="assets/images/svg/wallet.svg" class="img-1" alt="wallet" />
              <img src="assets/images/svg/wallet.svg" alt="wallet" />
              <div class="totle-detail">
                <h5>{{ 'balance'| translate}}</h5>
                <h3>
                  {{ ((user$ | async)?.wallet ? (user$ | async)?.wallet?.balance : 0) |
                  currencySymbol }}
                </h3>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="totle-contain">
            <div class="wallet-point-box">
              <img src="assets/images/svg/coin.svg" class="img-1" alt="coin" />
              <img src="assets/images/svg/coin.svg" alt="coin" />
              <div class="totle-detail">
                <h5>{{ 'total_points'| translate}}</h5>
                <h3>{{ (user$ | async)?.point ? (user$ | async)?.point?.balance : 0 }}</h3>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="totle-contain">
            <div class="wallet-point-box">
              <img src="assets/images/svg/order.svg" class="img-1" alt="order" />
              <img src="assets/images/svg/order.svg" alt="order" />
              <div class="totle-detail">
                <h5>{{ 'total_orders'| translate}}</h5>
                <h3>{{ (user$ | async)?.orders_count ? (user$ | async)?.orders_count : 0 }}</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="profile-about dashboard-bg-box">
      <div class="row">
        <div class="col-xxl-7">
          <div class="dashboard-title mb-3">
            <h3>{{ 'profile_information'| translate}}</h3>
          </div>

          <div class="table-responsive">
            <table class="table">
              <tbody>
                <tr>
                  <td>{{ 'name'| translate}}:</td>
                  <td>{{ (user$ | async)?.name | titleCase }}</td>
                </tr>
                <tr>
                  <td>{{ 'phone'| translate}}:</td>
                  <td>+{{ (user$ | async)?.country_code }} {{ (user$ | async)?.phone }}</td>
                </tr>

                @if(address){
                <tr>
                  <td>{{ 'address'| translate}}:</td>
                  <td>
                    {{ address.street }} {{ address.city }}, {{ address.state.name }}, {{
                    address.country.name }} {{ address.pincode }}
                  </td>
                </tr>

                }
              </tbody>
            </table>
          </div>

          <div class="dashboard-title mb-3">
            <h3>{{ 'login_details'| translate}}</h3>
          </div>

          <div class="table-responsive">
            <table class="table">
              <tbody>
                <tr>
                  <td>{{ 'email'| translate}} :</td>
                  <td>
                    {{ (user$ | async)?.email }}
                    <a href="javascript:void(0)" (click)="ProfileModal()?.openModal()"
                      >{{ 'edit' | translate }}</a
                    >
                  </td>
                </tr>
                <tr>
                  <td>{{ 'password'| translate}} :</td>
                  <td>
                    ●●●●●●
                    <a href="javascript:void(0)" (click)="PasswordModal()?.openModal()"
                      >{{ 'edit' | translate }}</a
                    >
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-xxl-5">
          <div class="profile-image">
            <img
              src="assets/images/inner-page/dashboard-profile.png"
              class="img-fluid"
              alt="dashboard-profile"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<app-edit-profile-modal #profileModal />
<app-change-password-modal #passwordModal />
