.footer-pad.small-12.columns
  %products{"ng-controller" => "ProductsCtrl", "ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }

    // TODO: Needs an ng-show to slide content down
    .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
      .small-12.columns
        .alert-box.search-alert.ng-scope
          %a.right{"ng-click" => "clearAll()"}
            = t :products_clear_all
            %i.ofn-i_009-close
          %span.filter-label
            = t :products_showing
            %span.applied-properties
              {{ appliedPropertiesList() }}
            %span.applied-taxons
              {{ appliedTaxonsList() }}
            %span{ ng: { hide: "!query"} }
              %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
                = t :products_with
              %span.applied-search "{{ query }}"
    .row
      .small-12.medium-6.large-5.columns
        %input#search.text{"ng-model" => "query",
        placeholder: t(:products_search),
        "ng-debounce" => "200",
        "ofn-disable-enter" => true}

      .small-12.medium-6.large-6.large-offset-1.columns
        = render partial: "shop/products/filters"

    .row
      %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
        %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-variant{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}"}

        %product{"ng-show" => "Products.loading"}
          .row.summary
            .small-12.columns.text-center
              = t :products_loading
          .row
            .small-12.columns.text-center
              %img.spinner{ src: "/assets/spinning-circles.svg" }

        %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
          .row.summary
            .small-12.columns
              %p.no-results
                = t :search_no_results_html, query: "<strong>{{query}}</strong>".html_safe
      .row
        .small-12.columns
          %form{action: main_app.cart_path}
            %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
            %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
