
{% liquid
  assign block_settings = block.settings
  assign product = closest.product
  if request.visual_preview_mode and product == blank
    assign product = collections.all.products.first
  endif

  assign variant = closest.product.selected_or_first_available_variant
  assign inventory_quantity = variant.inventory_quantity
  assign inventory_policy = variant.inventory_policy

  if variant.inventory_management == 'shopify'
    assign inventory_managed = true
  endif

  assign can_add_to_cart = false
  assign add_to_cart_text = 'products.product.unavailable' | t

  if variant
    if variant.quantity_rule.min > variant.inventory_quantity and inventory_managed and inventory_policy == 'deny'
      assign quantity_rule_soldout = true
    endif

    if variant.available
      assign can_add_to_cart = true
      assign add_to_cart_text = 'products.product.add_to_cart' | t
    elsif inventory_managed and inventory_quantity <= 0 and inventory_policy == 'deny' or quantity_rule_soldout
      assign can_add_to_cart = false
      assign add_to_cart_text = 'products.product.sold_out' | t
    else
      assign can_add_to_cart = false
      assign add_to_cart_text = 'products.product.unavailable' | t
    endif
  endif
%}

<span
  class="buy-buttons-block buy-buttons-block--{{ block.id }}"
  {{ block.shopify_attributes }}
>
  {%- if product != blank -%}
    {%- assign product_form_id = 'BuyButtons-ProductForm-' | append: section.id -%}
    <product-form-component
      data-section-id="{{ section.id }}"
      data-product-id="{{ product.id }}"
      data-product-url="{{ product.url }}"
      on:submit="/handleSubmit"
      data-quantity-default="{% if product.selected_or_first_available_variant.quantity_rule.min %}{{ product.selected_or_first_available_variant.quantity_rule.min }}{% else %}1{% endif %}"
      data-quantity-error-max="{{ 'products.product.quantity_error_max' | t }}"
    >
      <div
        class="visually-hidden"
        aria-live="assertive"
        role="status"
        aria-atomic="true"
        ref="liveRegion"
      ></div>
      {%- form 'product', product, id: product_form_id, data-type: 'add-to-cart-form' -%}
        <input
          type="hidden"
          name="id"
          ref="variantId"
          value="{{ product.selected_or_first_available_variant.id }}"
        >
        {%- if block_settings.gift_card_form and product.gift_card? -%}
          {%- render 'gift-card-recipient-form', product: product, form: form, section: section, block: block -%}
          <span class="buy-buttons-block__bar">
        {%- endif -%}
        <div
          class="product-form-buttons spacing-style{% if block_settings.stacking %} product-form-buttons--stacked{% endif %}"
          style="{% render 'spacing-style', settings: block_settings %}"
          ref="productFormButtons"
        >
          {%- unless block_settings.gift_card_form and product.gift_card? -%}
            <span
              class="product-form-text__error hidden"
              ref="addToCartTextError"
            >
              <span class="svg-wrapper">
                {{- 'icon-error.svg' | inline_asset_content -}}
              </span>
            </span>
          {%- endunless -%}

          {%- liquid
            assign has_quantity_rules = false
            if variant.quantity_rule.min > 1 or variant.quantity_rule.increment > 1 or variant.quantity_rule.max != null
              assign has_quantity_rules = true
            endif
          -%}

          {%- if has_quantity_rules -%}
            {%- assign cart_quantity = cart | item_count_for_variant: variant.id -%}
            <div
              class="quantity-label"
              ref="quantityLabel"
            >
              {{ 'products.product.quantity' | t }}
              <span
                class="quantity-label__cart-count{% if cart_quantity == 0 %} hidden{% endif %}"
                ref="quantityLabelCartCount"
                >({{ cart_quantity }}
                {{ 'products.product.in_cart' | t }})</span
              >
            </div>
          {%- endif -%}

          {% content_for 'block', type: 'quantity', id: 'quantity' %}

          {%- if has_quantity_rules -%}
            <div
              class="quantity-rules"
              ref="quantityRules"
            >
              {%- if variant.quantity_rule.increment > 1 -%}
                <span class="quantity-rules__item">
                  {{ 'products.product.quantity_increments' | t: increment: variant.quantity_rule.increment }}
                </span>
              {%- endif -%}
              {%- if variant.quantity_rule.min > 1 -%}
                <span class="quantity-rules__item">
                  {{ 'products.product.quantity_minimum' | t: minimum: variant.quantity_rule.min }}
                </span>
              {%- endif -%}
              {%- if variant.quantity_rule.max != null -%}
                <span class="quantity-rules__item">
                  {{ 'products.product.quantity_maximum' | t: maximum: variant.quantity_rule.max }}
                </span>
              {%- endif -%}
            </div>
          {%- endif -%}

          {%- if product.quantity_price_breaks_configured? and variant.quantity_price_breaks.size > 0 -%}
            {%- liquid
              assign use_currency = settings.currency_code_enabled_product_pages
            -%}
            <volume-pricing
              class="volume-pricing"
              data-section-id="{{ section.id }}"
              ref="volumePricing"
            >
              <span class="volume-pricing__title">{{ 'content.volume_pricing' | t }}</span>
              <div class="volume-pricing__table">
                <div class="volume-pricing__row volume-pricing__row--even">
                  <span>{{ variant.quantity_rule.min }}+</span>
                  <span>
                    {%- if use_currency -%}
                      {{- variant.price | money_with_currency | strip -}}
                    {%- else -%}
                      {{- variant.price | money | strip -}}
                    {%- endif -%}
                    /{{ 'content.each_abbreviation' | t -}}
                  </span>
                </div>
                {%- for price_break in variant.quantity_price_breaks limit: 2 -%}
                  {%- liquid
                    assign row_index = forloop.index
                    if row_index == 1
                      assign row_class = 'volume-pricing__row volume-pricing__row--odd'
                    else
                      assign row_class = 'volume-pricing__row volume-pricing__row--even'
                    endif
                  -%}
                  <div class="{{ row_class }}">
                    <span>{{ price_break.minimum_quantity }}+</span>
                    <span>
                      {%- if use_currency -%}
                        {{- price_break.price | money_with_currency | strip -}}
                      {%- else -%}
                        {{- price_break.price | money | strip -}}
                      {%- endif -%}
                      /{{ 'content.each_abbreviation' | t -}}
                    </span>
                  </div>
                {%- endfor -%}

                {%- if variant.quantity_price_breaks.size > 2 -%}
                  <div class="volume-pricing__collapsible-wrapper">
                    {%- for price_break in variant.quantity_price_breaks offset: 2 -%}
                      {%- liquid
                        assign collapsed_index = forloop.index
                        assign total_index = collapsed_index | plus: 2
                        assign modulo_result = total_index | modulo: 2
                        if modulo_result == 1
                          assign row_class = 'volume-pricing__row volume-pricing__row--odd'
                        else
                          assign row_class = 'volume-pricing__row volume-pricing__row--even'
                        endif
                      -%}
                      <div class="{{ row_class }}">
                        <span>{{ price_break.minimum_quantity }}+</span>
                        <span>
                          {%- if use_currency -%}
                            {{- price_break.price | money_with_currency | strip -}}
                          {%- else -%}
                            {{- price_break.price | money | strip -}}
                          {%- endif -%}
                          /{{ 'content.each_abbreviation' | t -}}
                        </span>
                      </div>
                    {%- endfor -%}
                  </div>

                  <button
                    type="button"
                    class="volume-pricing__toggle button-unstyled"
                    ref="volumePricingToggle"
                    on:click="/toggleExpanded"
                  >
                    <span class="volume-pricing__toggle-text">
                      <span class="volume-pricing__show-more">+ {{ 'actions.show_more' | t }}</span>
                      <span class="volume-pricing__show-less">- {{ 'actions.show_less' | t }}</span>
                    </span>
                  </button>
                {%- endif -%}
              </div>
            </volume-pricing>
          {%- endif -%}
          {% content_for 'block',
            type: 'add-to-cart',
            id: 'add-to-cart',
            can_add_to_cart: can_add_to_cart,
            add_to_cart_text: add_to_cart_text
          %}

          {% content_for 'block',
            type: 'accelerated-checkout',
            id: 'accelerated-checkout',
            can_add_to_cart: can_add_to_cart,
            form_obj: form
          %}
        </div>
        {%- if block_settings.gift_card_form and product.gift_card? -%}
          </span>
        {%- endif -%}
      {%- endform -%}
    </product-form-component>
  {%- else -%}
    <div class="product-form-buttons">
      <button
        type="submit"
        name="add"
        class="button"
        disabled
      >
        {{ 'blocks.sold_out' | t }}
      </button>
    </div>
  {%- endif -%}
</span>

{% if block_settings.show_pickup_availability %}
  <script
    src="{{ 'local-pickup.js' | asset_url }}"
    type="module"
  ></script>

  {%- assign pick_up_availabilities = closest.product.selected_or_first_available_variant.store_availabilities
    | where: 'pick_up_enabled', true
  -%}

  <local-pickup
    class="spacing-style product__pickup-availabilities"
    {% if pick_up_availabilities.size == 0 %}
      hidden
    {% endif %}
    data-section-id="{{ section.id }}"
    data-product-url="{{ closest.product.url }}"
    data-variant-id="{{ closest.product.selected_or_first_available_variant.id }}"
    style="{% render 'spacing-style', settings: block_settings %}"
    ref="localPickupButton"
  >
    {% if can_add_to_cart %}
      <dialog-component>
        <div class="pickup-availability__row">
          <div class="pickup-availability__column">
            <span class="svg-wrapper">
              {% if pick_up_availabilities.first.available %}
                {{- 'icon-available.svg' | inline_asset_content -}}
              {% else %}
                {{- 'icon-unavailable.svg' | inline_asset_content -}}
              {% endif %}
            </span>
          </div>
          <div class="pickup-availability__column">
            {% if pick_up_availabilities.first.available %}
              <p class="pickup-location__text-sm">
                {{ 'content.pickup_available_at_html' | t: location: pick_up_availabilities.first.location.name }}
              </p>
              <p class="pickup-location__text-xs">
                {{ 'content.pickup_ready_in' | t: pickup_time: pick_up_availabilities.first.pick_up_time }}
              </p>
            {% else %}
              <p class="pickup-location__text-sm">
                {{ 'content.pickup_not_available' | t }}
              </p>
            {% endif %}
            <button
              on:click="/showDialog"
              class="button-unstyled pickup-location__button"
            >
              {{ 'actions.view_store_information' | t }}
            </button>
          </div>
        </div>
        <dialog
          ref="dialog"
          class="dialog-modal dialog-drawer pickup-location__dialog color-{{ settings.drawer_color_scheme }}"
          scroll-lock
          aria-labelledby="pickup-dialog-heading"
          data-testid="pickup-location-dialog"
        >
          <h2
            id="pickup-dialog-heading"
            class="visually-hidden"
          >
            {{ 'actions.view_store_information' | t }}
          </h2>
          <div class="pickup-availability__dialog-row pickup-availability__header-container">
            <div class="pickup-availability__column">
              <h4 class="pickup-location__h4">{{ closest.product.title }}</h4>
              {% unless closest.product.has_only_default_variant %}
                <p class="pickup-location__text-sm">
                  {{ closest.product.selected_or_first_available_variant.title }}
                </p>
              {% endunless %}
            </div>
            <button
              ref="closeButton"
              on:click="/closeDialog"
              class="button button-unstyled close-button pickup-location__close-button"
              aria-label="{{ 'actions.close_dialog' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-close.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>
          {% for pick_up_availability in pick_up_availabilities %}
            <div class="pickup-location__wrapper">
              <p class="pickup-location__text-bold">{{ pick_up_availability.location.name }}</p>
              <div class="pickup-location__address-wrapper">
                <span class="pickup-location__availability-wrapper">
                  {% if pick_up_availability.available %}
                    {{- 'icon-available.svg' | inline_asset_content -}}
                    {% assign pickup_time = pick_up_availability.pick_up_time | downcase %}
                    {{ 'content.pickup_available_in' | t: pickup_time: pickup_time }}
                  {% else %}
                    {{- 'icon-unavailable.svg' | inline_asset_content -}}
                    {{ 'content.pickup_not_available' | t }}
                  {% endif %}
                </span>
                <address class="pickup-location__address">
                  {{ pick_up_availability.location.address | format_address }}
                  {{ pick_up_availability.location.address.phone }}
                </address>
              </div>
            </div>
          {% endfor %}
        </dialog>
      </dialog-component>
    {% endif %}
  </local-pickup>
{% endif %}

{% render 'buy-buttons-styles' %}

{% schema %}
{
  "name": "t:names.product_buy_buttons",
  "tag": null,
  "settings": [
    {
      "type": "paragraph",
      "content": "t:content.resource_reference_product"
    },
    {
      "type": "checkbox",
      "id": "stacking",
      "label": "t:settings.always_stack_buttons",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_pickup_availability",
      "label": "t:settings.show_pickup_availability",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "gift_card_form",
      "label": "t:settings.gift_card_form",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "t:content.gift_card_form_description"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.product_buy_buttons",
      "category": "t:categories.product",
      "blocks": {
        "quantity": {
          "type": "quantity",
          "static": true
        },
        "add-to-cart": {
          "type": "add-to-cart",
          "static": true,
          "settings": {
            "style_class": "button-secondary"
          }
        },
        "accelerated-checkout": {
          "type": "accelerated-checkout",
          "static": true
        }
      }
    }
  ]
}
{% endschema %}
