<div data-hook="variants">
  <fieldset class="no-border-top no-border-bottom">
    <div class="row">
      <div class="col-3">
        <div class="field" data-hook="sku">
          <%= f.label :sku %>
          <%= f.text_field :sku, class: 'fullwidth' %>
        </div>
      </div>
      <div class="col-3">
        <div class="field checkbox" data-hook="track_inventory">
          <label>
            <%= f.check_box :track_inventory %>
            <%= Spree::Variant.human_attribute_name(:track_inventory) %>
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="no-border-bottom">
    <legend><%= t(".options") %></legend>
    <div class="row">
      <% @product.option_types.each_with_index do |option_type, index| %>
          <div class="col-3">
            <div class="field" data-hook="presentation">
              <%= label 'option_value_ids', option_type.presentation %>
              <%= f.collection_select 'option_value_ids',
                                      option_type.option_values,
                                      :id,
                                      :presentation,
                                      { include_blank: true },
                                      {
                                        name: 'variant[option_value_ids][]',
                                        class: "custom-select fullwidth",
                                        id: "option_value_ids_#{option_type.presentation}"
                                      } %>
            </div>
          </div>
      <% end %>
    </div>
  </fieldset>
</div>

<div data-hook="admin_variant_form_additional_fields">
  <fieldset class="no-border-bottom">
    <legend><%= t(".properties") %></legend>
    <div class="row">
      <% [:weight, :height, :width, :depth].each_with_index do |field, index| %>
        <div class="col-3">
          <div class="field" data-hook="<%= field %>">
            <%= f.label field %>
            <%= f.text_field field,
                            value: number_with_precision(@variant.send(field), precision: 2),
                            class: 'fullwidth' %>
          </div>
        </div>
      <% end %>
    </div>
  </fieldset>
</div>

<div data-hook="admin_variant_form_fields">
  <fieldset class="no-border-bottom">
    <legend><%= t(".pricing") %></legend>
    <div class="alert alert-info"><%= t('.pricing_hint') %></div>

    <div class="row">
      <div class="col-3">
        <div class="field" data-hook="price">
          <%= f.label :price %>
          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency: @variant.default_price_or_build.currency %>
        </div>
        <% if show_rebuild_vat_checkbox? %>
          <%= render "spree/admin/shared/rebuild_vat_prices_checkbox", form: f, model_name: "variant" %>
        <% end %>
      </div>

      <div class="col-3">
        <div class="field" data-hook="cost_price">
          <%= f.label :cost_price %>
          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :cost_price, currency_attr: :cost_currency %>
        </div>
      </div>

      <div class="col-3">
        <div class="field" data-hook="tax_category">
          <%= f.label :tax_category %>
          <%= f.field_hint :tax_category %>
          <%= f.collection_select :tax_category_id,
                                  @tax_categories,
                                  :id,
                                  :name,
                                  { include_blank: t('.use_product_tax_category') },
                                  { class: 'custom-select fullwidth' } %>
        </div>
      </div>

      <div class="col-3">
        <div class="field" data-hook="shipping_category">
          <%= f.label :shipping_category %>
          <%= f.field_hint :shipping_category %>
          <%= f.collection_select :shipping_category_id,
                                  @shipping_categories,
                                  :id,
                                  :name,
                                  { include_blank: t('.use_product_shipping_category'), selected: @variant[:shipping_category_id] },
                                  { class: 'custom-select fullwidth' } %>
        </div>
      </div>
    </div>
  </fieldset>
</div>

<div class="clear"></div>
