<section class="section-b-space shop-section" id="filtered_products">
  <div class="container-fluid-lg">
    <div class="row">
      <div class="col-xxl-3 col-lg-4">
        <div class="left-box">
          <app-collection-sidebar [filter]="filter()!">
            <div class="vendor-detail-box">
              <img
                class="shop-roof"
                [src]="storageURL + (themeOptions$ | async)?.seller?.store_image_url"
                alt="seller"
              />
              <div class="vendor-name vendor-bottom">
                <div class="vendor-logo">
                  <app-seller-store-logo [store]="store" />
                  <div>
                    <app-seller-store-name [store]="store" />
                    <app-seller-store-rating [store]="store" />
                  </div>
                </div>

                <app-seller-store-description [store]="store" />
                <ul class="vendor-detail-list">
                  @if(!(store && store.hide_vendor_phone) && store.vendor){
                  <li>
                    <i class="ri-smartphone-line"></i>
                    <h5>+{{ store.vendor.country_code }} {{ store.vendor.phone }}</h5>
                  </li>
                  } @if(!(store && store.hide_vendor_email) && store.vendor){
                  <li>
                    <i class="ri-mail-line"></i>
                    <h5>
                      <a href="mailto:{{store.vendor.email}}">{{ store.vendor.email }}</a>
                    </h5>
                  </li>
                  }
                </ul>
              </div>
              <app-seller-store-social-links [store]="store" />
            </div>
          </app-collection-sidebar>
        </div>
      </div>
      <div class="col-xxl-9 col-lg-8">
        <app-collection-products [filter]="filter()" />
      </div>
    </div>
  </div>
</section>
