.label-block.left.six.columns.alpha{'ng-app' => 'admin.products', 'ng-controller' => 'variantUnitsCtrl'}
  .field
    = f.label :display_name, t('.display_name')
    = f.text_field :display_name, class: "fullwidth", placeholder: t('.display_name_placeholder')
  .field
    = f.label :display_as, t('.display_as')
    = f.text_field :display_as, class: "fullwidth", placeholder: t('.display_as_placeholder')

  - if @product.variant_unit != 'items'
    .field
      = label_tag :unit_value_human, "#{t('admin.'+@product.variant_unit)} ({{unitName(#{@product.variant_unit_scale}, '#{@product.variant_unit}')}})"
      = hidden_field_tag 'product_variant_unit_scale', @product.variant_unit_scale
      = number_field_tag :unit_value_human, nil, {class: "fullwidth", step: 0.01, 'ng-model' => 'unit_value_human', 'ng-change' => 'updateValue()'}
      = f.number_field :unit_value, {hidden: true, 'ng-value' => 'unit_value'}

  .field
    = f.label :unit_description, t(:spree_admin_unit_description)
    = f.text_field :unit_description, class: "fullwidth", placeholder: t('admin.products.unit_name_placeholder')

  %div
    .field
      = f.label :sku, t('.sku')
      = f.text_field :sku, class: 'fullwidth'
    .field
      = f.label :price, t('.price')
      = f.text_field :price, class: 'fullwidth', "ng-model" => "variant.price", "ng-init" => "variant.price = '#{number_to_currency(@variant.price, unit: '')&.strip}'"
    .field
      = hidden_field_tag 'product_variant_unit', @product.variant_unit
      = hidden_field_tag 'product_variant_unit_name', @product.variant_unit_name
      = f.field_container :unit_price do
        %div{style: "display: flex"}
          = f.label :unit_price, t(".unit_price"), {style: "display: inline-block"}
          %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
            "question-mark-with-tooltip-append-to-body" => "true",
            "question-mark-with-tooltip-placement" => "top",
            "question-mark-with-tooltip-animation" => true, 
            key: "'js.admin.unit_price_tooltip'"}
        %input{ "type" => "text", "id" => "variant_unit_price", "name" => "variant[unit_price]",
          "class" => 'fullwidth', "disabled" => true, "ng-model" => "unit_price"}
        %div{style: "color: black"}
          = t("spree.admin.products.new.unit_price_legend")
    %div{ 'set-on-demand' => '' }
      .field.checkbox
        %label
          = f.check_box :on_demand
          = t(:on_demand)
        %div{'ofn-with-tip' => t('admin.products.variants.to_order_tip')}
          %a= t('admin.whats_this')
      .field
        = f.label :on_hand, t(:on_hand)
        .fullwidth
          = f.text_field :on_hand

.right.six.columns.omega.label-block
  - if @product.variant_unit != 'weight'
    .field
      = f.label 'weight', t(:weight)+' (kg)'
      - value = number_with_precision(@variant.weight, precision: 3)
      = f.number_field 'weight', value: value, class: 'fullwidth', step: 0.001

  - [:height, :width, :depth].each do |field|
    .field
      = f.label field, t(field)
      - value = number_with_precision(@variant.send(field), precision: 2)
      = f.number_field field, value: value, class: 'fullwidth', step: 0.01

  .field
    = f.label :tax_category, t(:tax_category), for: :tax_category_id
    = f.collection_select(:tax_category_id, @tax_categories, :id, :name, { include_blank: t(:none) }, { class: 'select2 fullwidth' })

  .field
    = f.label :shipping_category_id, t(:shipping_categories)
    = f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, {}, { class: 'select2 fullwidth' })

  .field
    = f.label :primary_taxon, t('spree.admin.products.primary_taxon_form.product_category')
    = f.collection_select(:primary_taxon_id, Spree::Taxon.order(:name), :id, :name, { include_blank: true }, { class: "select2 fullwidth" })

  .field
    = f.label :supplier, t(:spree_admin_supplier)
    = f.collection_select(:supplier_id, @producers, :id, :name, {:include_blank => true}, {:class => "select2 fullwidth"})

.clear