<div >
  <mat-sidenav-container>
    <mat-sidenav EgretSideNavToggle class="shop-sidebar default-light-bg">
      <div class="shop-filters-wrap">
        <form [formGroup]="filterForm">
          <mat-accordion multi="true" displayMode="flat">
            <!-- Categories -->
            <mat-expansion-panel expanded="true">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Categories
                </mat-panel-title>
              </mat-expansion-panel-header>
              <ul class="product-categories">
                <li [ngClass]="{'fw-500': 'all' === activeCategory}" (click)="setActiveCategory('all')">All</li>
                <li *ngFor="let c of categories$ | async" [ngClass]="{'fw-500': c === activeCategory}" (click)="setActiveCategory(c)">{{c}}</li>
              </ul>
            </mat-expansion-panel>
            <!-- Price -->
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Price
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p class="m-0">Min: {{filterForm.controls['minPrice']['value'] || 20 | currency:'USD'}}</p>
              <mat-slider class="full-width mb-16 pl-0" [formControl]="filterForm.controls['minPrice']" [thumbLabel]="true" [max]="filterForm.controls['maxPrice']?.value - 5"
                [min]="20"></mat-slider>
  
              <p class="m-0">Max: {{filterForm.controls['maxPrice']['value'] || 40 | currency:'USD'}}</p>
              <mat-slider class="full-width pl-0" [formControl]="filterForm.controls['maxPrice']" [thumbLabel]="true" [max]="50" [min]="filterForm.controls['minPrice']?.value + 5"></mat-slider>
            </mat-expansion-panel>
            <!-- Ratings -->
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Ratings
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p class="m-0">Min: {{filterForm.controls['minRating']['value'] || 1}}</p>
              <mat-slider class="full-width mb-16" [formControl]="filterForm.controls['minRating']" [thumbLabel]="true" [max]="filterForm.controls['maxRating']?.value - 1"
                [min]="1"></mat-slider>
  
              <p class="m-0">Max: {{filterForm.controls['maxRating']['value'] || 5}}</p>
              <mat-slider class="full-width mb-16" [formControl]="filterForm.controls['maxRating']" [thumbLabel]="true" [max]="5" [min]="filterForm.controls['minRating']?.value + 1"></mat-slider>
            </mat-expansion-panel>
          </mat-accordion>
        </form>
      </div>
    </mat-sidenav>
    <div class="shop-wrap" fxLayout="row" fxLayoutWrap="wrap">
      <!-- Filters -->
      <!-- Right side -->
      <div class="full-width">
        <!-- Search Form -->
        <div fxLayout="row" fxLayout.lt-sm="column" class="shop-top-toolbar">
          <button mat-icon-button class="mr-16" (click)="toggleSideNav()"><mat-icon>short_text</mat-icon> </button>
          <div class="product-search-wrap">
            <form [formGroup]="filterForm">
              <input type="text" name="searchProduct" placeholder="Search product" class="product-search default-bg full-width" [formControl]="filterForm.controls['search']">
            </form>
          </div>
          <!-- View change buttons and cart -->
          <span fxFlex></span>
          <div [fxHide.lt-md]="true">
            <button mat-icon-button [color]="viewMode === 'list-view' ? 'primary' : ''" (click)="viewMode = 'list-view'">
              <mat-icon>format_list_bulleted</mat-icon>
            </button>
            <button mat-icon-button [color]="viewMode === 'grid-view' ? 'primary' : ''" (click)="viewMode = 'grid-view'">
              <mat-icon>apps</mat-icon>
            </button>
          </div>
          <span fxFlex="20px"></span>
          <button mat-raised-button color="primary" routerLink="/shop/cart">
            <mat-icon>shopping_cart</mat-icon> Cart ({{cartData.itemCount}})
          </button>
        </div>
        <!-- Products container -->
        <div class="product-container" 
        [ngClass]="{'list-view': viewMode === 'list-view'}">
          <!-- Product Box -->
          <div  
          class="product-wrap" 
          *ngFor="let product of products$ | async | paginate: { itemsPerPage: 6, currentPage: currentPage }; let i = index;"
          [@animate]="{value:'*',params:{delay: (i*100)+'ms', y:'50px'}}">
            <div class="product-inner default-bg">
              <div *ngIf="product?.badge?.text" class="product-badge mat-elevation-z7" [ngStyle]="{background: product?.badge?.color || '#f44336'}">
                <span>{{product?.badge?.text}}</span>
              </div>
              <div class="featured-img" [routerLink]="['/shop/products/', product._id]">
                <img [src]="product.photo" alt="">
              </div>
              <div class="info-wrap p-16">
                <div class="main-info">
                  <h3 class="title" [routerLink]="['/shop/products/', product._id]">{{product.name}}</h3>
                  <p class="text-muted p-line">{{product?.subtitle}}</p>
                  <p class="text-muted p-line">
                    <strong>Category:</strong> {{product?.category}}</p>
                  <p class="text-muted p-line">
                    <strong>Tags:</strong>
                    <span *ngFor="let t of product.tags">{{t}} </span>
                  </p>
                </div>
                <div class="actions">
                  <div class="price-rating">
                    <div class="product-rating" *ngIf="viewMode === 'grid-view'">
                      <star-rating [rating]="product.ratings.rating" [starType]="'svg'" [readOnly]="true" [size]="'small'" [staticColor]="'ok'"></star-rating>
                      <small class="text-muted">({{product.ratings.ratingCount}})</small>
                    </div>
                    <div class="price">
                      <span>{{product?.price?.sale | currency:'USD'}}</span>
                      <del class="text-muted">{{product?.price?.previous | currency:'USD'}}</del>
                    </div>
  
                  </div>
                  <div class="add-to-cart">
                    <span fxFlex></span>
                    <button mat-icon-button (click)="addToCart(product)">
                      <mat-icon>add_shopping_cart</mat-icon>
                    </button>
                  </div>
                </div>
              </div>
              <!-- Visible when viewMode === list-view -->
              <div class="more-info-wrap p-16" *ngIf="viewMode === 'list-view'">
                <div class="more-info">
                  <div class="more-actions mb-16">
                    <div class="product-rating">
                      <star-rating [starType]="'svg'" [readOnly]="true" [size]="'medium'" [staticColor]="'ok'" [rating]="4.63"></star-rating>
                      <small class="text-muted">(140)</small>
                    </div>
                    <span fxFlex></span>
                    <button mat-icon-button>
                      <mat-icon>playlist_add</mat-icon>
                    </button>
                    <button mat-icon-button>
                      <mat-icon>favorite</mat-icon>
                    </button>
                  </div>
  
                  <div>
                    <ul>
                      <li>
                        <mat-icon>check</mat-icon> Heavy duty</li>
                      <li>
                        <mat-icon>check</mat-icon> Water resistance</li>
                      <li>
                        <mat-icon>check</mat-icon> Clean design</li>
                      <li>
                        <mat-icon>check</mat-icon> High quality raw materials</li>
                    </ul>
                  </div>
  
                </div>
              </div>
  
            </div>
          </div>
          <!-- End Product -->
  
          <div class="products-pagination">
            <pagination-controls (pageChange)="currentPage = $event"></pagination-controls>
          </div>
  
        </div>
        <!-- End Products container -->
      </div>
  
    </div>
  </mat-sidenav-container>
</div>