- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
= cache_with_locale do
  %form{action: main_app.cart_path}
    %products{"ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }

      = render partial: "shop/products/searchbar"

      .row
        .footer-pad.small-12.columns.product-listing
          .row.full
            .medium-12.large-9.columns.full
              = render partial: "shop/products/search_feedback"

              .pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading', "infinite-scroll-immediate-check": "false" }
                %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
                  = render "shop/products/summary"
                  .shop-variants
                    .variants.row{"ng-controller": "ShopVariantCtrl", variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
                      = render "shop/products/shop_variant"
                %product{"ng-show" => "Products.loading"}
                  .summary
                    .small-12.columns.text-center
                      = t :products_loading
                  .row.full
                    .small-12.columns.text-center
                      = render partial: "components/spinner"

            .hide-for-medium-down.large-1.columns
              -# Space between products and filters
              &nbsp;

            .sticky-shop-filters-container.thin-scroll-bar.hide-for-medium-down.large-2.columns
              %h5.filter-header
                = t(:products_filter_by)
                %span{ "ng-show": 'filtersCount()' }
                  = "({{ filtersCount() }} #{t(:products_filter_selected)})"
              = render partial: "shop/products/filters"

            .expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ "ng-show": 'showFilterSidebar', "ng-class": "{'shown': showFilterSidebar}" }
              .background{ "ng-click": 'toggleFilterSidebar()' }
              .sidebar
                %h5
                  = t(:products_filter_by)
                  %span{ "ng-show": 'filtersCount()' }
                    = "({{ filtersCount() }} #{t(:products_filter_selected)})"

                = render partial: "shop/products/filters"

                .sidebar-footer
                  %button.large.dark.left{ type: 'button', "ng-click": 'clearFilters()' }
                    = t(:products_filter_clear)
                  %button.large.bright.right{ type: 'button', "ng-click": 'toggleFilterSidebar()' }
                    = t(:products_filter_done)
