%td
  -# empty
%td.field.naked_inputs
  = f.hidden_field :id
  = f.text_field :display_name, 'aria-label': t('admin.products_page.columns.name'), placeholder: variant.product.name
  = error_message_on variant, :display_name
%td.field.naked_inputs
  = f.text_field :sku, 'aria-label': t('admin.products_page.columns.sku')
  = error_message_on variant, :sku
%td
  -# empty
%td.field.popout{'data-controller': "popout", 'data-popout-update-display-value': "false"}
  = f.button :unit_to_display, class: "popout__button", 'aria-label': t('admin.products_page.columns.unit'), 'data-popout-target': "button" do
    = variant.unit_to_display # Show the generated summary of unit values
  %div.popout__container{ style: 'display: none;', 'data-controller': 'toggle-control', 'data-popout-target': "dialog" }
    .field
      -# Show a composite field for unit_value and unit_description
      = f.hidden_field :unit_value
      = f.hidden_field :unit_description
      -# todo: create a method for value_with_description
      = f.text_field :unit_value_with_description,
          value: [number_with_precision((variant.unit_value || 1) / (variant.product.variant_unit_scale || 1), precision: nil, strip_insignificant_zeros: true), variant.unit_description].compact_blank.join(" "),
          'aria-label': t('admin.products_page.columns.unit_value'), required: true
    .field
      = f.label :display_as, t('admin.products_page.columns.display_as')
      = f.text_field :display_as, placeholder: VariantUnits::OptionValueNamer.new(variant).name
  = error_message_on variant, :unit_value
%td.field.naked_inputs
  = f.text_field :price, 'aria-label': t('admin.products_page.columns.price'), value: number_to_currency(variant.price, unit: '')&.strip # TODO: add a spec to prove that this formatting is necessary. If so, it should be in a shared form helper for currency inputs
  = error_message_on variant, :price
%td.field.popout{'data-controller': "popout"}
  %button.popout__button{'data-popout-target': "button", 'aria-label': t('admin.products_page.columns.on_hand')}
    = variant.on_demand ? t(:on_demand) : variant.on_hand
  %div.popout__container{ style: 'display: none;', 'data-controller': 'toggle-control', 'data-popout-target': "dialog" }
    .field
      = f.number_field :on_hand, min: 0, 'aria-label': t('admin.products_page.columns.on_hand'), 'data-toggle-control-target': 'control', disabled: f.object.on_demand
      = error_message_on variant, :on_hand
    .field.checkbox
      = f.label :on_demand do
        = f.check_box :on_demand, 'data-action': 'change->toggle-control#disableIfPresent change->popout#closeIfChecked'
        = t(:on_demand)
%td.align-left
  .content= variant.product.supplier&.name # same as product
%td.align-left
  .content= variant.primary_taxon&.name
%td.align-left
  .content= (variant.tax_category_id ? variant.tax_category&.name : t('.none_tax_category')) # TODO: convert to dropdown
%td.align-left
  -# empty
%td.align-right
  - if variant.persisted?
    = render(VerticalEllipsisMenu::Component.new) do
      = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(variant.product, variant)
      - if variant.product.variants.size > 1
        %a{ "data-controller": "modal-link", "data-action": "click->modal-link#setModalDataSetOnConfirm click->modal-link#open",
            "data-modal-link-target-value": "variant-delete-modal", "class": "delete",
            "data-modal-link-modal-dataset-value": {'data-current-id': variant.id}.to_json }
          = t('admin.products_page.actions.delete')
