<div class="close-button d-flex d-lg-none">
  <app-button
    [class]="'close-sidebar'"
    [style]="'button'"
    [id]="'close_sidebar_btn'"
    [spinner]="false"
    (click)="openMenu(false)"
  >
    <i class="ri-close-fill"></i>
  </app-button>
</div>
<div class="profile-box">
  <div class="cover-image">
    <img src="assets/images/inner-page/cover-img.jpg" class="img-fluid" alt="cover-img" />
  </div>
  <div class="profile-contain">
    <div class="profile-image">
      <div class="position-relative">
        @if((user$ | async)?.profile_image && (user$ | async)?.profile_image?.original_url){
        <img
          [src]="(user$ | async)?.profile_image?.original_url"
          class="update_img"
          alt="profile"
        />
        }@else {
        <div class="user-round">
          <h4>{{ (user$ | async)?.name?.charAt(0)?.toString()?.toUpperCase() }}</h4>
        </div>
        }
        <ng-template #placeholder />
        <div class="user-icon">
          <input type="file" (change)="uploadImage($event)" accept="image/*" />
          <i class="ri-image-edit-line d-lg-block d-none"></i>
          <i class="ri-pencil-fill edit-icon d-lg-none"></i>
        </div>

        @if((user$ | async)?.profile_image && (user$ | async)?.profile_image?.original_url){
        <div class="user-icon-2" (click)="uploadImage('remove')">
          <i class="ri-close-line"></i>
        </div>
        }
      </div>
    </div>
    <div class="profile-name">
      <h3>{{ (user$ | async)?.name | titleCase }}</h3>
      <h6 class="text-content">{{ (user$ | async)?.email }}</h6>
    </div>
  </div>
</div>
<ul class="nav nav-pills user-nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/dashboard']"
      (click)="openMenu(false)"
    >
      <i class="ri-home-line me-2"></i> {{ 'dashboard' | translate }}
    </a>
  </li>

  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/notifications']"
      (click)="openMenu(false)"
    >
      <i class="ri-notification-line me-2"></i> {{ 'notifications' | translate }}
      @if(unreadNotificationCount){
      <span class="notification-count">{{ unreadNotificationCount }}</span>
      }
    </a>
  </li>

  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/bank-details']"
      (click)="openMenu(false)"
    >
      <i class="ri-bank-line me-2"></i> {{ 'bank_details' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/wallet']"
      (click)="openMenu(false)"
    >
      <i class="ri-wallet-line me-2"></i> {{ 'my_wallet' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/point']"
      (click)="openMenu(false)"
    >
      <i class="ri-coin-line me-2"></i> {{ 'earning_points' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/order']"
      (click)="openMenu(false)"
    >
      <i class="ri-file-text-line me-2"></i>{{ 'my_orders' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/downloads']"
      (click)="openMenu(false)"
    >
      <i class="ri-download-2-line me-2"></i>{{ 'downloads' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/refund']"
      (click)="openMenu(false)"
    >
      <i class="ri-money-dollar-circle-line me-2"></i> {{ 'refund_history' | translate }}
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      [routerLinkActive]="['active']"
      [routerLink]="['/account/addresses']"
      (click)="openMenu(false)"
    >
      <i class="ri-map-pin-line me-2"></i> {{ 'saved_address' | translate }}
    </a>
  </li>
  <li class="nav-item logout-cls" role="presentation">
    <a href="javascript:void(0)" class="btn" (click)="confirmationModal.openModal()">
      <i class="ri-logout-box-r-line me-2"></i> {{ 'logout' | translate }}
    </a>
  </li>
</ul>
<app-confirmation-modal #confirmationModal (confirmed)="logout()" />
