.row
  .columns.small-12
    %h3{"ng-bind" => "::variant.extended_name"}

.row.variant-bulk-buy-price-summary
  .columns.small-6
    .variant-unit {{ ::variant.unit_to_display }}
  .columns.small-6
    {{ variant.line_item.total_price | localizeCurrency }}

.row
  .columns.small-12.medium-6
    .variant-bulk-buy-quantity-label
      {{ "js.shopfront.bulk_buy_modal.min_quantity" | t }}
    %div
      %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
        -# U+FF0D Fullwidth Hyphen-Minus
        －
      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}",
        ng: {model: "variant.line_item.quantity", max: "Infinity"}}>
      %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
        -# U+FF0B Fullwidth Plus Sign
        ＋
  .columns.small-12.medium-6
    .variant-bulk-buy-quantity-label
      {{ "js.shopfront.bulk_buy_modal.max_quantity" | t }}
    %div
      %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "addMax(-1)", disabled: "!canAddMax(-1)"}}>
        -# U+FF0D Fullwidth Hyphen-Minus
        －
      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}",
        ng: {model: "variant.line_item.max_quantity", max: "Infinity"}}>
      %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "addMax(1)", disabled: "!canAddMax(1)"}}
        -# U+FF0B Fullwidth Plus Sign
        ＋

%ng-include{src: "'partials/close.html'"}