{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}


{% block page_product_detail_buy_quantity_container %}
    {% if showQuantitySelect %}
        <div class="col-3 d-flex justify-content-end">
            {% set selectQuantityThreshold = 100 %}
            {% block page_product_detail_buy_quantity %}
                {% block page_product_detail_buy_quantity_input_group %}
                    <div class="input-group product-detail-quantity-group quantity-selector-group" data-quantity-selector="true">
                        {% block page_product_detail_buy_quantity_input %}

                            <input type="hidden" class="js-quantity-selector">
                            <input type="hidden" class="js-btn-plus">
                            <input type="hidden" class="js-btn-minus">

                            <select class="form-select" name="lineItems[{{ product.id }}][quantity]">
                                <option selected="selected" value="{{ product.minPurchase }}">{{ product.minPurchase }}</option>
                                {% for i in range(product.minPurchase + 1, product.minPurchase + 5) %}
                                    <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>

                        {% endblock %}
                        {% block page_product_detail_buy_quantity_input_unit %}
                            {% if product.translated.packUnit %}
                                <span class="input-group-text">
                                                        {% if product.minPurchase > 1 and product.translated.packUnitPlural %}
                                                            {{ product.translated.packUnitPlural }}
                                                        {% elseif product.translated.packUnit %}
                                                            {{ product.translated.packUnit }}
                                                        {% endif %}
                                                    </span>
                            {% endif %}
                        {% endblock %}
                    </div>
                {% endblock %}
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}

{% block page_product_detail_buy_button_container %}
    <div class="col">
        {% block page_product_detail_buy_button %}
            <button class="btn btn-primary d-sm-inline-block d-block btn-buy h-100"
                    title="{{ "detail.addProduct"|trans|striptags }}"
                    aria-label="{{ "detail.addProduct"|trans|striptags }}">
                <i class="fa-kit fa-cart"></i> {{ "detail.addProduct"|trans|sw_sanitize }}
            </button>
        {% endblock %}
    </div>
{% endblock %}