<app-breadcrumb [breadcrumb]="breadcrumb" />

<section class="search-section">
  <div class="container-fluid-lg">
    <div class="row">
      <div class="col-xxl-6 col-xl-8 mx-auto">
        <div class="title d-block text-center">
          <h2>{{ 'search_for_products' | translate }}</h2>
          <span class="title-leaf">
            <svg class="icon-width">
              <use xlink:href="../assets/svg/leaf.svg#leaf"></use>
            </svg>
          </span>
        </div>
        <div class="search-box">
          <div class="input-group">
            <input type="text" class="form-control" [formControl]="search" />
            <app-button
              [class]="'btn theme-bg-color text-white m-0'"
              [type]="'button'"
              [id]="'search-btn'"
              [spinner]="false"
              (click)="searchProduct()"
            >
              {{ 'search' | translate }}
            </app-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-b-space">
  <div class="container-fluid-lg">
    <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]="gridClass">
        @if(productService.skeletonLoader){ @for(item of skeletonItems; track item){
        <app-skeleton-product-box />
        } }@else { @for(product of products; track product){
        <div class="col">
          <div class="search-product product-wrapper">
            <div>
              <app-product-box [product]="product" [style]="'horizontal'" />
            </div>
          </div>
        </div>
        } }
      </div>
    </div>

    @if(!(products && products.length) && !productService.skeletonLoader){
    <app-no-data
      [class]="'no-data-added collection-no-data'"
      [image]="'assets/svg/no-product.svg'"
      [text]="'sorry_cant_find_products_looking'"
      [description]="'please_check_misspelt_something_searching_other_way'"
    />
    }
  </div>
</section>
