- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
= cache_with_locale do
  .small-3.columns.variant-name
    .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}
    .variant-unit {{ ::variant.unit_to_display }}
  .small-4.medium-3.columns.variant-price
    %price-breakdown{"price-breakdown" => "_", variant: "variant",
      "price-breakdown-append-to-body" => "true",
      "price-breakdown-placement" => "bottom",
      "price-breakdown-animation" => true}
    {{ variant.price_with_fees | localizeCurrency }}
    .unit-price.variant-unit-price
      %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.shopfront.unit_price_tooltip'"}
      {{ variant.unit_price_price | localizeCurrency }}&nbsp;/&nbsp;{{ variant.unit_price_unit }}

  .medium-3.columns.total-price
    %span{"ng-class" => "{filled: variant.line_item.total_price}"}
      {{ variant.line_item.total_price | localizeCurrency }}
  = render partial: "shop/products/shop_variant_no_group_buy"
  = render partial: "shop/products/shop_variant_with_group_buy"
