<!-- Category Style Vertical -->
@if(style() === 'vertical'){
<div class="category-menu section-b-space">
  <h3>{{ title ? title : 'categories' | translate }}</h3>

  @if(categories && categories.length){
  <ul>
    @for(category of categories; track category){
    <li>
      <div class="category-list">
        <img
          [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
          [alt]="category?.name"
        />
        <h5>
          <a href="javascript:void(0)" [routerLink]="['/category', category.slug ]"
            >{{ category?.name }}</a
          >
        </h5>
      </div>
    </li>
    }
  </ul>
  } @if(!(categories && categories.length)){
  <ul>
    <li>
      <div class="category-list">
        <h5>
          <a href="javascript:void(0)">{{ "no_category_found" | translate }}</a>
        </h5>
      </div>
    </li>
  </ul>
  }
</div>
}

<!-- Category Classic Vertical -->
@if(style() === 'classic_vertical'){
<div class="shop-left-sidebar">
  <div class="back-button" (click)="closeCanvasMenu()">
    <h3>
      <a href="javascript:vois(0)" class="text-title">
        <i class="ri-close-fill"></i>
        <span>{{ 'back' | translate }}</span>
      </a>
    </h3>
  </div>

  @if(categories && categories.length){
  <ul class="nav nav-pills mb-3 custom-nav-tab">
    @for(category of categories; track categories; let i = $index){
    <li class="nav-item">
      <app-button
        [class]="selectedCategorySlug.length && selectedCategorySlug.includes(category.slug!) ? 'nav-link active' : 'nav-link'"
        [id]="'nav_link_btn'+i"
        [spinner]="false"
        (click)="redirectToCollection(category.slug!)"
      >
        {{ category.name }}
        <img
          [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
          [alt]="category?.name"
        />
      </app-button>
    </li>
    }
  </ul>
  } @if(!(categories && categories.length)) {
  <app-no-data [class]="'no-data-added bg-light'" [text]="'no_category_found'" />
  }
</div>
}

<!-- Category Style Horizontal -->
@if(style() === 'horizontal'){
<div class="product-wrapper no-arrow" [class]="'category-slider'">
  <owl-carousel-o [options]="sliderOption()!">
    @for(category of categories; track category){
    <ng-template carouselSlide>
      @if(theme() === 'paris'){
      <div>
        <a
          href="javascript:void(0)"
          [routerLink]="['/category', category.slug ]"
          class="category-box category-dark"
          [class.active]="selectedCategorySlug.length && selectedCategorySlug.includes(category.slug!)"
        >
          <img
            [src]="image ? image : 'assets/images/shape.png'"
            class="background-image"
            [alt]="category?.name"
          />
          <img
            [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
            [alt]="category?.name"
          />
          <h5>{{ category.name }}</h5>
        </a>
      </div>
      } @if(theme() === 'madrid'){
      <div>
        <a href="javascript:void(0)" [routerLink]="['/category', category.slug ]">
          <div class="category-box-list d-block">
            <a href="javascript:void(0)" class="category-name">
              <h4>{{ category.name }}</h4>
              <h6>{{ category.products_count }} {{ 'items' | translate }}</h6>
            </a>
            <div class="category-box-view">
              <a href="javascript:void(0)">
                <img
                  [src]="category?.category_image ? category?.category_image?.original_url : 'assets/images/category.png'"
                  class="img-fluid"
                  [alt]="category?.name"
                />
              </a>
              <app-button [class]="'btn shop-button'" [id]="'shop_now_btn'" [spinner]="false">
                <span>{{ 'shop_now' | translate }}</span>
                <i class="ri-arrow-right-s-line"></i>
              </app-button>
            </div>
          </div>
        </a>
      </div>
      } @if(theme() === 'rome'){
      <div>
        <div class="shop-category-box border-0">
          <a
            href="javascript:void(0)"
            [routerLink]="['/category', category.slug ]"
            class="circle-1"
          >
            <img
              [src]="category?.category_image ? category?.category_image?.original_url : 'assets/images/category.png'"
              [alt]="category?.name"
            />
          </a>
          <div class="category-name">
            <h6>{{ category.name }}</h6>
          </div>
        </div>
      </div>
      }
    </ng-template>
    }
  </owl-carousel-o>

  @if(!(categories && categories.length)){
  <app-no-data [class]="'no-data-added bg-light'" [text]="'no_category_found'" />
  }
</div>
}

<!-- Category Style classic -->
@if(style() === 'classic'){
<div>
  <owl-carousel-o [options]="sliderOption()!">
    @for(category of categories; track category){
    <ng-template carouselSlide>
      <div>
        <div class="shop-category-box border-0">
          <a
            href="javascript:void(0)"
            [routerLink]="['/category', category.slug ]"
            class="circle-1"
          >
            <img
              [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
              [alt]="category?.name"
            />
          </a>
          <div class="category-name">
            <h6>{{ category.name }}</h6>
          </div>
        </div>
      </div>
    </ng-template>
    }
  </owl-carousel-o>
  @if(!(categories && categories.length)){
  <app-no-data [class]="'no-data-added bg-light'" [text]="'no_category_found'" />
  }
</div>
}

<!-- Category Style Filter -->
@if(categories && categories.length && style() === 'filter'){
<ul class="nav nav-tabs tab-style-color-2 tab-style-color">
  <li class="nav-item">
    <app-button
      [class]="!selectedCategoryId() ? 'nav-link btn active' : 'nav-link btn' "
      [spinner]="false"
      [id]="'all_category'"
      (click)="selectCategory()"
    >
      All
    </app-button>
  </li>
  @for(category of categories; track category){
  <li class="nav-item">
    <app-button
      [class]="selectedCategoryId() === category.id ? 'nav-link btn active' : 'nav-link btn' "
      [spinner]="false"
      [id]="'category'+category.id"
      (click)="selectCategory(category.id)"
    >
      {{category?.name}}
    </app-button>
  </li>
  }
</ul>
}

<!--- Category Style Dropdown -->
@if(categories && categories.length && style() === 'dropdown'){
<ul class="category-list">
  @for(category of categories; track category){
  <li class="onhover-category-list">
    <a href="javascript:void(0)" [routerLink]="['/category', category.slug ]" class="category-name">
      <img
        [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
        [alt]="category?.name"
      />
      <h6>{{ category?.name }}</h6>
    </a>
  </li>
  }
</ul>
} @if(!(categories && categories.length) && style() === 'dropdown') {
<ul class="category-list">
  <li class="onhover-category-list">
    <a href="javascript:void(0)" class="category-name">
      <h6>{{ "no_category_found" | translate}}</h6>
    </a>
  </li>
</ul>
}

<!-- Input Category Dropdown -->
@if(style() === 'input_dropdown'){
<app-button
  [class]="'btn location-button'"
  [id]="'category_btn'"
  [spinner]="false"
  [type]="'button'"
>
  <select class="form-select locat-name">
    <option>{{ 'all_category' | translate }}</option>
    @for(category of categories; track category){
    <option>{{ category.name }}</option>
    }
  </select>
</app-button>
} @if(theme() === 'moscow'){
<div class="title">
  <h2>{{ title }}</h2>
</div>
<div class="row">
  <div class="col-12">
    <div class="position-relative">
      <div class="slider-9 book-category-slider">
        <owl-carousel-o [options]="sliderOption()!">
          @for(category of categories; track category){
          <ng-template carouselSlide>
            <div>
              <a
                href="javascript:void(0)"
                [routerLink]="['/category', category.slug ]"
                class="category-box"
              >
                <img
                  [src]="category?.category_image ? category?.category_image?.original_url : 'assets/images/category.png'"
                  [alt]="category?.name"
                  class="img-fluid"
                />
              </a>
            </div>
          </ng-template>
          }
        </owl-carousel-o>
      </div>
      <div class="shelf"></div>
    </div>
  </div>
</div>
} @if(theme() === 'cairo'){
<div class="feature-panel-slider">
  <owl-carousel-o [options]="sliderOption()!">
    @for(category of categories; track category){
    <ng-template carouselSlide>
      <a [routerLink]="['/category', category.slug ]" class="cate-box">
        <span>{{ category.name }}</span>
      </a>
    </ng-template>
    }
  </owl-carousel-o>
</div>
} @if(style() === 'cairo_classic'){
<div class="category-panel-slider no-arrow">
  <owl-carousel-o [options]="sliderOption()!">
    @for(category of categories; track category){
    <ng-template carouselSlide>
      <div class="cate-box">
        <a href="javascript:void(0)" [routerLink]="['/category', category.slug ]">
          <img
            [src]="category?.category_icon ? category?.category_icon?.original_url : 'assets/images/category.png'"
            [alt]="category?.name"
          />
        </a>
      </div>
    </ng-template>
    }
  </owl-carousel-o>
</div>
}
