<!-- Sidemenu -->
<div class="main-navbar-backdrop" (click)="closeMenu()"></div>
<aside class="app-sidebar">
  <div class="app-sidebar__logo">
    @if (!profileData) {
      <span class="icon-skeleton rounded-circle mb-1 header-brand"></span>
    }
    @if (profileData && profileData.title) {
      <a class="header-brand" routerLink="/admin/dashboard">
        @if (profileData.title && profileData.title.logoimage != null) {
          <img [src]="profileData.title.logoimage" class="header-brand-img dark-logo" alt="logo" loading="lazy" decoding="async">
        }
        @if (profileData.title && profileData.title.logoimage1 != null;) {
          <img [src]="profileData.title.logoimage1" class="header-brand-img desktop-lgo" alt="logo" loading="lazy" decoding="async">
        }
        @if (profileData.title && profileData.title.logoimage2 != null;) {
          <img [src]="profileData.title.logoimage2" class="header-brand-img mobile-logo" alt="logo" loading="lazy" decoding="async">
        }
        @if (profileData.title && profileData.title.logoimage3 != null;) {
          <img [src]="profileData.title.logoimage3" class="header-brand-img darkmobile-logo" alt="logo" loading="lazy" decoding="async">
        }
      </a>
    }
  </div>
  <ng-scrollbar class="white-theme" thumbClass="white-scrollbars" shown="hover">
    <div class="app-sidebar3 is-expanded">
      <div class="app-sidebar__user active is-expanded">
        <div class="dropdown user-pro-body text-center">
          <div class="user-pic">
            @if (!profileData.users) {
              <span class="icon-skeleton avatar-xxl rounded-circle mb-1"></span>
              }
            @else {
              <!-- @if (profileData.users.profileimage) { -->
                <img [src]="profileData.users.profileimage || './assets/images/user-profile.png'" class="avatar-xxl rounded-circle mb-1" alt="default" loading="lazy" decoding="async">
              <!-- }
              @else {
                  <img  src="./assets/images/user-profile.png" class="avatar-xxl rounded-circle mb-1" alt="default" loading="lazy" decoding="async">
              } -->
            }
          </div>

          <div class="user-info">
            <h5 class=" mb-2">{{profileData && profileData.users?.name}}</h5>
            @if (!profileData) {
              <span class="line-skeleton w-50 d-block mx-auto mb-2"></span>
            }
            @if (!profileData) {
              <span class="line-skeleton w-50 d-block mx-auto mb-2"></span>
            }
            @if (!profileData) {
              <span class="line-skeleton w-50 d-block mx-auto mb-2"></span>
            }
            @if (profileData) {
              <span class="text-muted app-sidebar__user-name text-sm">{{ profileData && profileData.users?.roles?.[0]?.name! | translate}}</span>
            }
            <div class="allprofilerating">
              <ng-template #t let-fill="fill">
                <span class="profilerating" [class.full]="fill === 100" style="font-size:2rem">
                  <span class="ratingstar" [style.width.%]="fill">&#x2605;</span>&#x2605;
                </span>
              </ng-template>
              <ngb-rating [rate]="profileData ? profileData.avg ? profileData.avg : 0 : 0" [starTemplate]="t" [max]="5" class="ng-rating" [readonly]="true"></ngb-rating>
            </div>
          </div>
        </div>
      </div>
      <ul class="side-menu custom-ul open">
        <!-- 1st Level Menu -->
        @for (menuItem of menuItems; track menuItem) {
          @if (((menuItem.userPermission == true) || (menuItem.Domain == 'on' && profileData.users?.id == 1 ) || profileData.permissions?.['includes'](menuItem.userPermission.toString())) && (!menuItem.dashboardType || menuItem.dashboardType['includes'](profileData.users?.dashboard!.toLowerCase())) && (!menuItem.ENVATO_ON || (menuItem.ENVATO_ON == profileData.setting?.original?.ENVATO_ON)) ) {
            <li class="slide" #activeMenuItems
              [ngClass]="{active: menuItem.active, 'is-expanded': menuItem.active }">
              <!-- head title  -->
              @if (menuItem.headTitle) {
                <span class="nav-label">{{menuItem.headTitle | titlecase}}</span>
              }
              <!-- has-Link -->
              @if (menuItem.type === 'link') {
                <a class="side-menu__item"
                  [routerLink]="!menuItem.type ? null : [menuItem.path]" (click)="toggleNavActive(menuItem)" [ngClass]="{active: menuItem.active}">
                  <span class="shape1"></span>
                  <span class="shape2"></span>
                  @if (menuItem.icon) {
                    <span [innerHTML]="getSanitizedSVG(menuItem.icon)" class="sidemenu_icon"></span>
                  }
                  <span class="side-menu__label">{{menuItem.title! | translate | titlecase}}</span>
                </a>
              }
              @if (menuItem.type === 'external') {
                <a class="side-menu__item" [href]="menuItem.path" target="_blank">
                  <span class="shape1"></span>
                  <span class="shape2"></span>
                  @if (menuItem.icon) {
                    <span [innerHTML]="getSanitizedSVG(menuItem.icon)" class="sidemenu_icon"></span>
                  }
                  <span class="side-menu__label">{{menuItem.title! | translate | titlecase}}</span>
                </a>
              }
              <!-- has-empty -->
              @if (menuItem.type === 'empty') {
                <a class="side-menu__item" href="javascript:;" (click)="toggleNavActive(menuItem)">
                  <span class="shape1"></span>
                  <span class="shape2"></span>
                  @if (menuItem.icon) {
                    <span [innerHTML]="getSanitizedSVG(menuItem.icon)" class="sidemenu_icon"></span>
                  }
                  <span class="side-menu__label">{{menuItem.title! | translate| titlecase}}</span>
                </a>
              }
              <!-- has-clearCache -->
              @if (menuItem.type === 'clearCache') {
                <a class="side-menu__item" href="javascript:;" (click)="clearCache('cache')">
                  <span class="shape1"></span>
                  <span class="shape2"></span>
                  @if (menuItem.icon) {
                    <span [innerHTML]="getSanitizedSVG(menuItem.icon)" class="sidemenu_icon"></span>
                  }
                  <span class="side-menu__label">{{menuItem.title! | translate| titlecase}}</span>
                  @if (sendingResponse['cache']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </a>
              }
              <!-- has-Sub -->
              @if (menuItem.type === 'sub') {
                <a class="side-menu__item with-sub" [routerLink]="menuItem.type ? null: [menuItem.path]" [ngClass]="{active: menuItem.active}"
                  (click)="toggleNavActive(menuItem)" >
                  <span class="shape1"></span>
                  <span class="shape2"></span>
                  @if (menuItem.icon) {
                    <span [innerHTML]="getSanitizedSVG(menuItem.icon)" class="sidemenu_icon"></span>
                  }
                  <span class="side-menu__label">{{menuItem.title! | translate| titlecase}}</span>
                  @if (menuItem.badgeClass && menuItem.badgeValue) {
                    <span class="badge {{menuItem.badgeClass}} side-badge">
                      {{menuItem.badgeValue}}
                    </span>
                  }
                  <i class="angle fe fe-chevron-right" [ngClass]="{ 'd-none': menuItem.badgeClass}"></i>
                </a>
              }
              <!-- 2nd Level menu -->
              @if (menuItem.children) {
                <ul class="slide-menu custom-ul" [ngClass]="{'open': menuItem.active}">
                  @for (childrenItem of menuItem.children; track childrenItem) {
                    @if ((profileData.permissions?.['includes'](childrenItem.userPermission.toString()) || (childrenItem.userPermission == true))  && (!childrenItem.ENVATO_ON || (childrenItem.ENVATO_ON == profileData.setting?.original?.ENVATO_ON))) {
                      <li class="" activeMenuItems
                        [ngClass]="{'is-expanded': childrenItem.active, active: childrenItem.active, 'sub-slide': childrenItem.type === 'sub'}">
                        <!-- link -->
                        @if (childrenItem.type === 'link') {
                          <a class="slide-item" [routerLink]="!childrenItem.type ? null : [childrenItem.path] " 
                          [ngClass]="{active: childrenItem.active}"
                            (click)="toggleNavActive(childrenItem)">
                            {{childrenItem.title! | translate| titlecase}}
                          </a>
                        }
                        <!-- empty -->
                        @if (childrenItem.type === 'empty' ) {
                          <a class="slide-item" href="javascript:;" (click)="toggleNavActive(childrenItem)">
                            {{childrenItem.title! | translate | titlecase}}
                          </a>
                        }
                        <!-- sub -->
                        @if (childrenItem.type === 'sub') {
                          <a class="sub-side-menu__item" [ngClass]="{active: childrenItem.active}" [routerLink]="childrenItem.type ? null : [childrenItem.path]"
                            (click)="toggleNavActive(childrenItem)">
                            <span class="side-menu__label">{{childrenItem.title! | translate | titlecase}}</span>
                            <i class="angle fe fe-chevron-right"></i>
                          </a>
                        }
                        <!-- 3rd Level menu -->
                        @if (childrenItem.children) {
                          <ul class="sub-slide-menu" [ngClass]="{'open': childrenItem.active}">
                            @for (childrenSubItem of childrenItem.children; track childrenSubItem) {
                              @if ((profileData.permissions?.['includes'](childrenSubItem.userPermission.toString()) || (childrenSubItem.userPermission == true)) && (!childrenSubItem.ENVATO_ON || (childrenSubItem.ENVATO_ON == profileData.setting?.original?.ENVATO_ON))) {
                                <li class="" activeMenuItems
                                  [ngClass]="{'is-expanded': childrenSubItem.active}">
                                  <!-- link -->
                                  @if (childrenSubItem.type === 'link') {
                                    <a class="sub-slide-item" routerLinkActive="active" [routerLink]="!childrenSubItem.type ?  null : [childrenSubItem.path]"
                                      [routerLinkActiveOptions]="{exact : true}">
                                      {{childrenSubItem.title! | translate | titlecase}}
                                    </a>
                                  }
                                  <!-- empty -->
                                  @if (childrenSubItem.type === 'empty') {
                                    <a class="sub-slide-item" href="javascript:;">
                                      {{childrenSubItem.title! | translate | titlecase}}
                                    </a>
                                  }
                                </li>
                              }
                            }
                          </ul>
                        }
                      </li>
                    }
                  }
                </ul>
              }
            </li>
          }
        }
      </ul>
    </div>
  </ng-scrollbar>
</aside>
<!-- End Sidemenu -->