@if(menuService.skeletonLoader){
<ul class="skeleton-menu navbar-nav">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
}
<ul class="navbar-nav">
  <div *ngTemplateOutlet="recursiveMenu; context: { $implicit: (menu$ |async)?.data }"></div>
  <ng-template #recursiveMenu let-menus>
    @for(menu of menus; track menu){ @if(menu.status === 1) {
    <li
      [ngClass]="[menu.link_type === 'sub' && menu.child ? 'nav-item dropdown' : 'nav-item', menu.mega_menu ? 'dropdown-mega' : '']"
      [class.new-nav-item]="menu.badge_text"
    >
      @if(menu.link_type === 'sub'){
      <a class="nav-link dropdown-toggle" (click)="toggle(menu)">
        {{ menu.title | translate }} @if(menu.badge_text){
        <label class="new-dropdown">{{ menu.badge_text | translate }}</label>
        }
      </a>
      } @if(menu.link_type === 'link' && menu.is_target_blank === 0){
      <a
        class="dropdown-item"
        [class.show]="menu.active"
        [class.nav-link]="!menu?.child?.length"
        (click)="redirect(menu.path)"
      >
        {{ menu.title | translate }} @if(menu.badge_text){
        <label class="menu-label {{ menu.badge_color }}">{{ menu.badge_text | translate }}</label>
        }
      </a>
      } @if(menu.is_target_blank === 1){
      <a class="dropdown-item" [class.show]="menu.active" href="{{ menu.path }}">
        {{ menu.title | translate }} @if(menu.badge_text){
        <label class="menu-label {{ menu.badge_color }}">{{ menu.badge_text | translate }}</label>
        }
      </a>
      } @if(menu.mega_menu === 1 && menu?.child?.length && menu.mega_menu_type !==
      'link_with_image'){
      <div class="dropdown-menu dropdown-menu-2" [class.show]="menu.active">
        <div class="row">
          @if(menu.mega_menu_type === 'side_banner'){
          <div class="col-9">
            <div class="row">
              @for(megaMenu of menu.child; track megaMenu){
              <div class="dropdown-column col-xl-4 mb-4">
                <app-link-box [menu]="megaMenu" />
              </div>
              }
            </div>
          </div>
          }@else { @for(megaMenu of menu.child; track megaMenu){
          <div class="dropdown-column col-xl-3 mb-4">
            <app-link-box [menu]="megaMenu" />
          </div>
          } } @if(menu.mega_menu_type === 'product_box'){
          <div class="dropdown-column col-xl-6 d-xl-block d-none">
            @if(menu.product_ids.length){
            <div class="menu-product-slider">
              <div
                [ngClass]="{ 'full_border': (themeOption$ | async)?.product?.full_border,
                            'product_img_bg': (themeOption$ | async)?.product?.image_bg,
                            'full_bg': (themeOption$ | async)?.product?.product_box_bg,
                            'product_border': (themeOption$ | async)?.product?.product_box_border }"
              >
                <div class="row">
                  @for(product of products; track product){
                  <div class="col-6">
                    <app-product-box
                      [product]="product"
                      [class]="'product-box-3'"
                      [style]="'horizontal'"
                    />
                  </div>
                  }
                </div>
              </div>
            </div>
            } @if(!(products && products.length)){
            <app-no-data [class]="'menu-no-data'" [text]="'no_product_found'" />
            }
          </div>
          } @if(menu.mega_menu_type === 'side_banner'){
          <div class="dropdown-column col-xl-3 d-xl-block d-none">
            <div class="menu-img-banner">
              <a routerLink="javascript:void(0)" class="text-title">
                <img
                  [src]="menu?.banner_image ? menu?.banner_image?.original_url : 'assets/images/menu_banner.jpg'"
                  alt="banner"
                  class="img-fluid"
                />
              </a>
            </div>
          </div>
          } @if(menu.mega_menu_type === 'bottom_banner'){
          <div class="dropdown-column col-xl-12 d-xl-block d-none">
            <div class="menu-img-banner rounded overflow-hidden mx-0 mt-3 mb-0">
              <img
                alt
                [src]="menu?.banner_image ? menu?.banner_image?.original_url :'assets/images/menu_banner_2.jpg'"
                class="img-fluid"
              />
            </div>
          </div>
          } @if(menu.mega_menu_type === 'blog_box'){
          <div class="dropdown-column col-xl-9 d-xl-block d-none">
            <div class="row">
              @for(blog of blogs; track blog){
              <div class="col-6">
                <div class="blog-box sticky-blog">
                  <div class="blog-box-image">
                    <a [routerLink]="['/blog/', blog?.slug]" class="blog-image">
                      <img
                        [src]="blog.blog_thumbnail ? blog?.blog_thumbnail?.original_url : 'assets/images/product.png'"
                        class="img-fluid"
                        [alt]="blog.title"
                      />
                    </a>
                  </div>

                  <a [routerLink]="['/blog/', blog?.slug]" class="blog-detail" tabindex="0">
                    <h6>{{ blog.created_at | date: 'dd MMM yyyy hh:mm:a' }}</h6>
                    <h5>{{ blog.title }}</h5>
                  </a>
                </div>
              </div>
              }
            </div>

            @if(!(blogs && blogs.length)){
            <app-no-data [class]="'menu-no-data'" [text]="'No Blog Found'" />
            }
          </div>
          }
        </div>
      </div>
      } @if(menu.mega_menu === 1 && menu.mega_menu_type === 'link_with_image' &&
      menu?.child?.length){
      <div class="dropdown-menu dropdown-menu-2 dropdown-image" [class.show]="menu.active">
        <div class="dropdown-column">
          @for(imageMenu of menu.child; track imageMenu){
          <a
            href="javascript:void(0)"
            class="dropdown-item text-center"
            (click)="redirect(imageMenu.path)"
          >
            <img
              [src]="imageMenu.item_image ? imageMenu.item_image.original_url : 'assets/images/menu_banner_3.jpg'"
              class="img-fluid"
              [alt]="imageMenu.title"
            />
            <span>{{ imageMenu.title }}</span>
          </a>
          }
        </div>
      </div>
      } @if(menu.child && !menu.mega_menu){
      <ul class="dropdown-menu" [class.show]="menu.active">
        <ng-container *ngTemplateOutlet="recursiveMenu; context: { $implicit: menu.child }" />
      </ul>
      }
    </li>
    } }
  </ng-template>
</ul>