{% set formAction = path('frontend.checkout.line-item.add') %}

{% block buy_widget_buy_form_inner %}
    <form
        id="productDetailPageBuyProductForm"
        action="{{ formAction }}"
        method="post"
        class="buy-widget"
        data-add-to-cart="true">

        {% set DOWNLOAD_STATE = constant('Shopware\\Core\\Content\\Product\\State::IS_DOWNLOAD') %}
        {% set showQuantitySelect = not product.states is defined or DOWNLOAD_STATE not in product.states or (DOWNLOAD_STATE in product.states and product.maxPurchase !== 1) %}
        {% set buyable = product.available and product.childCount <= 0 and product.calculatedMaxPurchase > 0 %}

        {% block buy_widget_buy_container %}
            {% if buyable %}
                <div class="row g-2 buy-widget-container">
                    {% block buy_widget_buy_quantity_container %}
                        {% if showQuantitySelect %}
                            <fieldset class="col-4 d-flex justify-content-end">
                                {% block buy_widget_buy_quantity_input_group %}
                                    <legend class="form-label visually-hidden">
                                        {{ 'component.product.quantitySelect.legend'|trans|striptags }}
                                    </legend>

                                    <div id="product-detail-quantity-group-{{ product.id }}" class="input-group product-detail-quantity-group quantity-selector-group" data-quantity-selector="true">
                                        <button type="button" class="btn btn-outline-light btn-minus js-btn-minus" aria-label="{{ 'component.product.quantitySelect.decrease'|trans|striptags }}">
                                            {% sw_icon 'minus' style {size: 'xs'} %}
                                        </button>
                                        <input
                                            type="number"
                                            name="lineItems[{{ product.id }}][quantity]"
                                            class="form-control js-quantity-selector quantity-selector-group-input"
                                            min="{{ product.minPurchase }}"
                                            max="{{ product.calculatedMaxPurchase }}"
                                            step="{{ product.purchaseSteps }}"
                                            value="{{ product.minPurchase }}"
                                            aria-label="{{ 'component.product.quantitySelect.label'|trans|striptags }}"
                                        />
                                        <button type="button" class="btn btn-outline-light btn-plus js-btn-plus" aria-label="{{ 'component.product.quantitySelect.increase'|trans|striptags }}">
                                            {% sw_icon 'plus' style {size: 'xs'} %}
                                        </button>
                                        {% 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 %}
                                    </div>

                                    {# Aria live region to tell the screen reader what quantity amount is selected when changing the quantity. #}
                                    {% block buy_widget_buy_quantity_live_area %}
                                        <div
                                            class="quantity-area-live visually-hidden"
                                            aria-live="polite"
                                            aria-atomic="true"
                                            data-aria-live-text="{{ 'component.product.quantitySelect.areaLiveText'|trans|striptags }}"
                                            data-aria-live-product-name="{{ product.translated.name }}">
                                            {# The live region content is generated by the `QuantitySelectorPlugin` #}
                                        </div>
                                    {% endblock %}
                                {% endblock %}
                            </fieldset>
                        {% endif %}
                    {% endblock %}

                    {% block buy_widget_buy_redirect_input %}
                        {# fallback redirect back to detail page is deactivated via js #}
                        <input type="hidden"
                               name="redirectTo"
                               value="frontend.detail.page">

                        <input type="hidden"
                               name="redirectParameters"
                               data-redirect-parameters="true"
                               value="{{ {productId: product.id}|json_encode }}">
                    {% endblock %}

                    {% block buy_widget_buy_product_buy_info %}
                        <input type="hidden"
                               name="lineItems[{{ product.id }}][id]"
                               value="{{ product.id }}">
                        <input type="hidden"
                               name="lineItems[{{ product.id }}][type]"
                               value="product">
                        <input type="hidden"
                               name="lineItems[{{ product.id }}][referencedId]"
                               value="{{ product.id }}">
                        <input type="hidden"
                               name="lineItems[{{ product.id }}][stackable]"
                               value="1">
                        <input type="hidden"
                               name="lineItems[{{ product.id }}][removable]"
                               value="1">
                    {% endblock %}

                    {% block buy_widget_product_buy_meta %}
                        <input type="hidden"
                               name="product-name"
                               value="{{ product.translated.name }}">
                        <input type="hidden"
                               name="brand-name"
                               value="{{ product.manufacturer.getName() }}">
                    {% endblock %}

                    {% block buy_widget_buy_button_container %}
                        <div class="{% if showQuantitySelect %}col-8{% else %}col-12{% endif %}">
                            {% block buy_widget_buy_button %}
                                <div class="d-grid">
                                    <button class="btn btn-primary btn-buy"
                                            type="submit"
                                            title="{{ 'detail.addProduct'|trans|striptags }}"
                                            aria-label="{{ 'detail.addProduct'|trans|striptags }}">
                                        {{ 'detail.addProduct'|trans|sw_sanitize }}
                                    </button>
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% endif %}
        {% endblock %}
    </form>
{% endblock %}