%table#new-products{ ng: { show: 'views.new.visible && filteredProducts.length > 0' } }
  %col.producer{ width: "20%" }
  %col.product{ width: "20%" }
  %col.variant{ width: "30%" }
  %col.add{ width: "15%" }
  %col.hide{ width: "15%" }
  %thead
    %tr
      %th.producer=t('admin.producer')
      %th.product=t('admin.product')
      %th.variant=t('admin.variant')
      %th.add=t('admin.variant_overrides.index.add')
      %th.hide=t('admin.variant_overrides.index.hide')
  %tbody{ ng: { repeat: 'product in filteredProducts | limitTo:productLimit' } }
    %tr{ id: "v_{{variant.id}}", ng: { repeat: 'variant in product.variants | inventoryVariants:hub_id:views' } }
      %td.producer{ ng: { bind: { html: '::producersByID[product.producer_id].name'} } }
      %td.product{ ng: { bind: '::product.name'} }
      %td.variant
        %span{ ng: { bind: '::variant.display_name || ""'} }
        .variant-override-unit{ ng: { bind: '::variant.unit_to_display'} }
      %td.add
        %button.fullwidth.icon-plus{ ng: { click: "setVisibility(hub_id,variant.id,true)" } }
          = t('admin.variant_overrides.index.add')
      %td.hide
        %button.fullwidth.icon-remove{ ng: { click: "setVisibility(hub_id,variant.id,false)" } }
          = t('admin.variant_overrides.index.hide')
