%tr.variant{ :id => "v_{{variant.id}}", 'ng-repeat' => 'variant in product.variants', 'ng-show' => 'DisplayProperties.showVariants(product.id)', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
  %td.left-actions
    %a{ :class => "variant-item icon-caret-right", 'ng-hide' => "$last" }
    %a{ :class => "add-variant icon-plus-sign", 'ng-click' => "addVariant(product)", 'ng-show' => "$last", 'ofn-with-tip' => t('.new_variant') }
  %td{ 'ng-show' => 'columns.image.visible' }
  %td{ 'ng-show' => 'columns.producer.visible' }
  %td{ 'ng-show' => 'columns.sku.visible' }
    %input{ 'ng-model' => "variant.sku", :name => 'variant_sku', 'ofn-track-variant' => 'sku', :type => 'text' }
  %td{ 'ng-show' => 'columns.name.visible' }
    %input{ 'ng-model' => 'variant.display_name', :name => 'variant_display_name', 'ofn-track-variant' => 'display_name', :type => 'text', placeholder: "{{ product.name }}" }
  %td.unit_value{ 'ng-show' => 'columns.unit.visible' }
    %input{ 'ng-model' => 'variant.unit_value_with_description', :name => 'variant_unit_value_with_description', 'ofn-track-variant' => 'unit_value_with_description', :type => 'text', 'ofn-maintain-unit-scale' => true }
  %td.display_as{ 'ng-show' => 'columns.unit.visible' }
    %input{ 'ofn-display-as' => 'variant', 'ng-model' => 'variant.display_as', name: 'variant_display_as', 'ofn-track-variant' => 'display_as', type: 'text', placeholder: '{{ placeholder_text }}' }
  %td{ 'ng-show' => 'columns.price.visible' }
    %input{ 'ng-model' => 'variant.price', 'ofn-decimal' => :true, :name => 'variant_price', 'ofn-track-variant' => 'price', :type => 'text' }
  %td{ 'ng-show' => 'columns.on_hand.visible' }
    %input.field{ 'ng-model' => 'variant.on_hand', 'ng-change' => 'updateOnHand(product)', :name => 'variant_on_hand', 'ng-if' => '!variant.on_demand', 'ofn-track-variant' => 'on_hand', :type => 'number' }
    %span{ :name => 'variant_on_hand', 'ng-if' => 'variant.on_demand' }
      = t(:on_demand)
  %td{ 'ng-show' => 'columns.on_demand.visible' }
    %input.field{ 'ng-model' => 'variant.on_demand', :name => 'variant_on_demand', 'ofn-track-variant' => 'on_demand', :type => 'checkbox' }
  %td{ 'ng-show' => 'columns.category.visible' }
    %input.fullwidth{ type: 'text', id: "p{{product.id}}_category_id", 'ng-model' => 'variant.category_id', 'ofn-taxon-autocomplete' => '', 'ofn-track-variant' => 'category_id', 'multiple-selection' => 'false', placeholder: 'Category' }
  %td{ 'ng-show' => 'columns.tax_category.visible' }
    %select.select2{ name: 'variant_tax_category_id', "ofn-track-variant": 'tax_category_id', "ng-model": 'variant.tax_category_id', "ng-options": 'tax_category.id as tax_category.name for tax_category in tax_categories' }
      %option{ value: '' }= t(:none)
  %td{ 'ng-show' => 'columns.inherits_properties.visible' }
  %td{ 'ng-show' => 'columns.import_date.visible' }
    %span {{variant.import_date | date:"MMMM dd, yyyy HH:mm"}}
  %td.actions
    %a{ 'ng-click' => 'editWarn(product,variant)', :class => "edit-variant icon-edit no-text", 'ng-show' => "variantSaved(variant)", 'ofn-with-tip' => t(:edit)  }
  %td.actions
    %span.icon-warning-sign{ 'ng-if' => 'variant.variant_overrides_count > 0', 'ofn-with-tip' => "{{ 'spree.admin.products.index.products_variant.variant_has_n_overrides' | t:{n: variant.variant_overrides_count} }}" }
  %td.actions
    %a{ 'ng-click' => 'deleteVariant(product,variant)', "ng-class" => '{disabled: product.variants.length < 2}', :class => "delete-variant icon-trash no-text", 'ofn-with-tip' => t(:remove)  }
