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

.flex.variant-bulk-buy-price-summary{style: "justify-content: space-around;"}
  .variant-unit
    {{ ::variant.unit_to_display }}
  .div
    {{ variant.line_item.total_price | localizeCurrency }}

  .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,
    style: "margin-right: 5px",
    key: "'js.shopfront.unit_price_tooltip'"} 
    {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}

.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)", "ng-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", "ng-max": "Infinity" }>
      %button.bulk-buy-add.variant-quantity{ type: "button", "ng-click": "add(1)", "ng-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)", "ng-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", "ng-max": "Infinity" }>
      %button.bulk-buy-add.variant-quantity{ type: "button", "ng-click": "addMax(1)", "ng-disabled": "!canAddMax(1)" }
        -# U+FF0B Fullwidth Plus Sign
        ＋

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