<div class="container-fluid-lg">
  <div class="row g-4">
    @if(storeService.skeletonLoader){ @for(item of skeletonItems(); track item){
    <div class="col-xxl-4 col-md-6">
      <app-skeleton-seller-store />
    </div>
    } }@else { @for(store of stores(); track store){
    <div class="col-xxl-4 col-md-6">
      <a class="seller-grid-box">
        <div class="grid-contain">
          <div class="seller-contact-details">
            <app-seller-contact-details [store]="store" />
          </div>
          <div class="contain-name">
            <div>
              <app-seller-store-name [store]="store" />
              <app-seller-store-rating [store]="store" />
              <a
                [routerLink]="['/seller/store/', store.slug]"
                class="btn btn-sm theme-bg-color text-white fw-bold w-max-content"
              >
                {{ 'visit_store' | translate }} <i class="ri-arrow-right-line ms-2"></i>
              </a>
            </div>
            <div class="grid-image">
              <a [routerLink]="['/seller/store/', store.slug]">
                <app-seller-store-logo [store]="store" />
              </a>
            </div>
          </div>
        </div>
      </a>
    </div>
    }@empty {
    <!-- No Data -->
    <app-no-data
      [class]="'no-data-added collection-no-data'"
      [image]="'assets/svg/no-product.svg'"
      [text]="'no_store_found'"
      [description]="'regret_inform_you_Store_currently_unavailable'"
    />
    } }
  </div>
</div>
