{% render 'theme-drawer-styles' %}
{% 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 }}"
  {% if block_settings.text_color != blank %}
    style="--color: {{ block_settings.text_color }}; --color-rgb: {{ block_settings.text_color.rgb  }}"
  {% endif %}
  {{ 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>
                    <bdi>
                      {%- if use_currency -%}
                        {{- variant.price | money_with_currency | strip -}}
                      {%- else -%}
                        {{- variant.price | money | strip -}}
                      {%- endif -%}</bdi
                    >/{{ '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>
                      <bdi>
                        {%- if use_currency -%}
                          {{- price_break.price | money_with_currency | strip -}}
                        {%- else -%}
                          {{- price_break.price | money | strip -}}
                        {%- endif -%}</bdi
                      >/{{ '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>
                          <bdi>
                            {%- if use_currency -%}
                              {{- price_break.price | money_with_currency | strip -}}
                            {%- else -%}
                              {{- price_break.price | money | strip -}}
                            {%- endif -%}</bdi
                          >/{{ '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 %}
      {% if block_settings.text_color != blank %}
        --color: {{ block_settings.text_color }};
        --color-rgb: {{ block_settings.text_color.rgb }}
      {% endif %}
    "
    ref="localPickupButton"
  >
    {% if can_add_to_cart %}
      <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="#pickup-drawer-{{ block.id }}/toggle"
            class="button-unstyled pickup-location__button"
          >
            {{ 'actions.view_store_information' | t }}
          </button>
        </div>
      </div>
    {% endif %}
  </local-pickup>

  {% if can_add_to_cart %}
    <theme-drawer
      id="pickup-drawer-{{ block.id }}"
      class="pickup-drawer"
      data-skip-node-update
      no-persist
    >
      <dialog
        ref="panel"
        class="theme-drawer__dialog color-custom-drawer"
        aria-labelledby="pickup-dialog-heading-{{ block.id }}"
        data-testid="pickup-location-dialog"
      >
        <h2
          id="pickup-dialog-heading-{{ block.id }}"
          class="visually-hidden"
        >
          {{ 'actions.view_store_information' | t }}
        </h2>
        <div class="theme-drawer__header 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
            on:click="#pickup-drawer-{{ block.id }}/close"
            class="theme-drawer__close-button"
            type="button"
            aria-label="{{ 'actions.close' | 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>
    </theme-drawer>
  {% endif %}
{% endif %}

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

{% schema %}
{
  "name": "t:names.product_buy_buttons",
  "tag": null,
  "settings": [
    {
      "type": "checkbox",
      "id": "stacking",
      "label": "t:settings.always_stack_buttons",
      "default": false
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "t:settings.text_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "header",
      "content": "t:content.local_pickup"
    },
    {
      "type": "checkbox",
      "id": "show_pickup_availability",
      "label": "t:settings.show_pickup_availability",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "t:content.local_pickup_description"
    },
    {
      "type": "header",
      "content": "t:content.gift_card_products"
    },
    {
      "type": "checkbox",
      "id": "gift_card_form",
      "label": "t:settings.gift_card_form",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "t:content.gift_card_form_description"
    },
    {
      "type": "select",
      "id": "recipient_button_style",
      "label": "t:settings.button_style",
      "options": [
        {
          "value": "default",
          "label": "t:options.default"
        },
        {
          "value": "custom",
          "label": "t:options.custom"
        }
      ],
      "default": "default",
      "visible_if": "{{ block.settings.gift_card_form }}"
    },
    {
      "type": "color",
      "id": "recipient_button_background",
      "label": "t:settings.background",
      "default": "{{ settings.color_palette.background }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.recipient_button_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "recipient_button_text",
      "label": "t:settings.text",
      "default": "{{ settings.color_palette.foreground }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.recipient_button_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "recipient_button_border",
      "label": "t:settings.borders",
      "default": "{{ settings.color_palette.foreground }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.recipient_button_style == \"custom\" }}"
    },
    {
      "type": "select",
      "id": "selected_recipient_button_style",
      "label": "t:settings.selected_button_style",
      "options": [
        {
          "value": "default",
          "label": "t:options.default"
        },
        {
          "value": "custom",
          "label": "t:options.custom"
        }
      ],
      "default": "default",
      "visible_if": "{{ block.settings.gift_card_form }}"
    },
    {
      "type": "color",
      "id": "selected_recipient_button_background",
      "label": "t:settings.background",
      "default": "{{ settings.color_palette.foreground }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.selected_recipient_button_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "selected_recipient_button_text",
      "label": "t:settings.text",
      "default": "{{ settings.color_palette.background }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.selected_recipient_button_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "selected_recipient_button_border",
      "label": "t:settings.borders",
      "default": "{{ settings.color_palette.foreground }}",
      "alpha": true,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.selected_recipient_button_style == \"custom\" }}"
    },
    {
      "type": "select",
      "id": "input_style",
      "label": "t:settings.input_style",
      "options": [
        {
          "value": "default",
          "label": "t:options.input_field"
        },
        {
          "value": "custom",
          "label": "t:options.custom"
        }
      ],
      "default": "default",
      "info": "t:info.edit_input_field_in_theme_settings",
      "visible_if": "{{ block.settings.gift_card_form }}"
    },
    {
      "type": "color",
      "id": "input_background_color",
      "label": "t:settings.background",
      "default": "{{ settings.color_palette.background }}",
      "visible_if": "{{ block.settings.gift_card_form and block.settings.input_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "input_text_color",
      "label": "t:settings.text",
      "default": "{{ settings.color_palette.foreground }}",
      "visible_if": "{{ block.settings.gift_card_form and block.settings.input_style == \"custom\" }}"
    },
    {
      "type": "color",
      "id": "input_border_color",
      "label": "t:settings.borders",
      "default": "{{ settings.color_palette.foreground }}",
      "visible_if": "{{ block.settings.gift_card_form and block.settings.input_style == \"custom\" }}"
    },
    {
      "type": "range",
      "id": "border_width",
      "label": "t:settings.border_width",
      "min": 0,
      "max": 4,
      "step": 0.5,
      "unit": "px",
      "default": 1,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.input_style == \"custom\" }}"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "t:settings.border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 0,
      "visible_if": "{{ block.settings.gift_card_form and block.settings.input_style == \"custom\" }}"
    },
    {
      "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 %}