@if(setting?.CUSTOMER_TICKET == 'no'){
<div class="card">
  <div class="card-body text-center item-user" style='padding: "1.6rem"'>
    <a class="btn btn-secondary w-100 py-3 ms-auto" routerLink="/customer/create-tickets">
      {{'Create Ticket' | translate}}
    </a>
  </div>
</div>
}

<div class="card">
  <div class="support-sidebar">
    <ul class="side-menu custom-ul open p-0">
      <!-- 1st Level Menu -->
      @for (menuItem of menuItems; track menuItem) {
      <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>
          @if(menuItem.title == 'Quotations' && unviewedQuotations > 0){
                <span [ngStyle]="{ position: 'absolute', top: '11px', right: '10px', 'border-radius': '16rem' }"  class="badge badge-success badge-counter pulse-success side-badge">{{unviewedQuotations}}</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-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) {
          <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) {
              <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>
</div>

@if(addspace?.length){
<div class="card custom-card overflow-hidden card-style-2">
  <div class="swiper-wrapper">
    <swiper-container #swiperContainer class="swiper mySwiper" space-between="30" slides-per-view="1" [loop]="true" navigation="true"
      slides-per-group="1" autoplay-delay="2000" autoplay-disable-on-interaction="false">
      @for(image of addspace;track $index){
      <swiper-slide>
        <div class="w-100 br-5swiper-slide">
          <a [href]="image?.link" target="_blank"><img [src]="url + '/uploads/addspace/' + image.image" alt="Image 380*480"></a>
        </div>
      </swiper-slide>
      }
    </swiper-container>
  </div>
</div>
}