- variant_detail_types = bundled_product.variant_details.keys
- optionized_id = "#{bundled_product.id.optionize}-#{key}"

.box{ id: "bundled-product-#{optionized_id}", data: { kit_variant_options_product: { counter: "#selected-#{optionized_id}" }.to_json } }
  = hidden_field_tag "components[#{key}][product_id]", bundled_product.id, id: nil

  .box__body
    .grid
      .grid__cell.grid__cell--60
        .grid.grid--auto
          .grid__cell= image_tag product_image_url(bundled_product.primary_image, :small), alt: bundled_product.name
          .grid__cell
            %h4.box__heading= bundled_product.name
            %span= t('workarea.admin.create_catalog_product_kits.variants.create.option_selection_prompt')
            = link_to t('workarea.admin.create_catalog_product_kits.variants.create.copy_product'), bundled_product_create_catalog_product_kit_path(@product, bundled_product_id: bundled_product.id), data: { remote: '', insert: "#bundled-product-#{optionized_id}", insert_after: '' }
            = link_to "#copy-product-info-#{key}", data: { tooltip: '' } do
              = inline_svg('workarea/admin/icons/help.svg', class: 'svg-icon svg-icon--small svg-icon--blue', title: t('workarea.admin.create_catalog_product_kits.variants.create.copy_product_info_title'))

        .tooltip-content{ id: "copy-product-info-#{key}" }= t('workarea.admin.create_catalog_product_kits.variants.create.copy_product_info_html')

      .grid__cell.grid__cell--40
        .grid.grid--auto.grid--right.grid--middle
          .grid__cell
            %span{ id: "selected-#{optionized_id}"}= t('workarea.admin.kit_variant_options.selected', count: 0)
          .grid__cell
            %span{ id: "count-#{optionized_id}" }
          .grid__cell= text_field_tag 'filter_options', '', id: nil, class: 'text-box text-box--medium', placeholder: t('workarea.admin.create_catalog_product_kits.variants.filter_placeholder'), data: { filterable_input: { group: "product_#{optionized_id}", counter: "#count-#{optionized_id}" }.to_json }
  .box__body
    .grid
      .grid__cell.grid__cell--25
        .property
          = label_tag "components[#{key}][quantity]", t('workarea.admin.fields.quantity'), class: 'property__name'
          = number_field_tag "components[#{key}][quantity]", 1, class: 'text-box text-box--small'

        - if bundled_product.variant_details?
          .property
            = label_tag "components[#{key}][details]", class: 'property__name' do
              = t('workarea.admin.create_catalog_product_kits.variants.create.copy_options')
              = link_to "#copy-options-info-#{key}", data: { tooltip: '' } do
                = inline_svg('workarea/admin/icons/help.svg', class: 'svg-icon svg-icon--small svg-icon--blue', title: t('workarea.admin.create_catalog_product_kits.variants.create.copy_options_info_title'))

            .tooltip-content{ id: "copy-options-info-#{key}" }= t('workarea.admin.create_catalog_product_kits.variants.create.copy_options_info_html')

            - variant_detail_types.each do |type|
              .grid
                .grid__cell.grid__cell--25
                  %span= type.titleize
                .grid__cell.grid__cell--75
                  = toggle_button_for "components[#{key}][details][#{type}][copy]", false, title_true: t('workarea.admin.create_catalog_product_kits.variants.create.copy_options_toggle_positive', type: type), title_false: t('workarea.admin.create_catalog_product_kits.variants.create.copy_options_toggle_negative', type: type), data: { toggle_button: '' } do
                    .toggle-button__more.toggle-button__more--below{ data: { toggle_button_negative_element: '' } }
                    .toggle-button__more.toggle-button__more--below{ data: { toggle_button_positive_element: '' } }
                      .property
                        = label_tag "components[#{key}][details][#{type}][rename]", t('workarea.admin.create_catalog_product_kits.variants.create.rename'), class: 'property_name'
                        = text_field_tag"components[#{key}][details][#{type}][rename]", type, class: 'text-box', id: "component_#{key}_details_#{type.optionize}_rename"

      .grid__cell.grid__cell--75
        - if bundled_product.variant_details?
          = label_tag "components[#{key}]", t('workarea.admin.create_catalog_product_kits.variants.create.option_selection_heading'), class: 'property__name'


          .grid
            - bundled_product.variant_details.each do |detail, values|
              .grid__cell.grid__cell--25.component-sku-table{ data: { kit_variant_option_set: '' } }
                %table
                  %thead
                    %tr
                      %th= check_box_tag "select_all_#{detail.optionize}", true, false, id: nil, data: { kit_variant_option_select_all: '' }
                      %th= detail.titleize
                  %tbody
                    - values.each do |value|
                      %tr{ data: { filterable: { group: "product_#{optionized_id}", value: "#{value.downcase} #{detail.downcase}" }.to_json } }
                        %td= check_box_tag "components[#{key}][details][#{detail}][values][]", value, false, id: "components_#{key}_#{detail.optionize}_#{value.optionize}_checkbox", data: { kit_variant_option: '' }
                        %td= value
        - else
          = label_tag "components[#{key}]", t('workarea.admin.create_catalog_product_kits.variants.create.sku_selection_heading'), class: 'property__name'

          .grid__cell.grid__cell--25.component-sku-table{ data: { kit_variant_option_set: '' } }
            %table
              %thead
                %tr
                  %th= check_box_tag "select_all_skus", true, false, id: nil, data: { kit_variant_option_select_all: '' }
                  %th= t('workarea.admin.fields.sku')
              %tbody
                - bundled_product.skus.each do |sku|
                  %tr{ data: { filterable: { group: "product_#{optionized_id}", value: sku }.to_json } }
                    %td= check_box_tag "components[#{key}][skus][]", sku, false, id: "components_#{key}_#{sku.optionize}_sku_checkbox", data: { kit_variant_option: '' }
                    %td= sku