{% block component_line_item_quantity %}
    {% if redirectTo is not defined %}
        {% set redirectTo = 'frontend.checkout.cart.page' %}
    {% endif %}

    {% if formAction is not defined %}
        {% set formAction = path('frontend.checkout.line-item.change-quantity', { id: lineItem.id }) %}
    {% endif %}

    {% if showQuantitySelect is not defined %}
        {% set showQuantitySelect = true %}
    {% endif %}

    {# @var quantityInformation \Shopware\Core\Checkout\Cart\LineItem\QuantityInformation #}
    {% set quantityInformation = lineItem.quantityInformation %}
    {% if quantityInformation.maxPurchase %}
        {% set maxQuantity = quantityInformation.maxPurchase %}
    {% else %}
        {% set maxQuantity = config('core.cart.maxQuantity') %}
    {% endif %}

    {% set DOWNLOAD_STATE = constant('Shopware\\Core\\Content\\Product\\State::IS_DOWNLOAD') %}
    {% set isDigital = lineItem.states is defined and DOWNLOAD_STATE in lineItem.states and (DOWNLOAD_STATE not in lineItem.states or quantityInformation.maxPurchase === 1) %}

    {% block component_line_item_quantity_inner %}
        <div class="row line-item-quantity-row">
            {% block component_line_item_quantity_label %}
                <div class="line-item-quantity-label" {% if showQuantitySelect and lineItem.quantityInformation and lineItem.stackable and nestingLevel < 1 %} aria-hidden="true"{% endif %}>
                    {{ 'checkout.cartHeaderQuantity'|trans|sw_sanitize }}
                </div>
            {% endblock %}

            {% block component_line_item_quantity_select_wrapper %}
                <div class="line-item-quantity-select-wrapper">

                    {% if showQuantitySelect and lineItem.quantityInformation and lineItem.stackable and nestingLevel < 1 %}
                        {% block component_line_item_quantity_select_form %}
                            {% set autoSubmitOptions = {
                                delayChangeEvent: 800,
                                autoFocus: false,
                            } %}
                            <form action="{{ formAction }}"
                                  class="line-item-quantity-container {% if isDigital %}disabled{% endif %}"
                                  method="post"
                                  {% if displayMode == 'default' %}
                                  data-form-auto-submit="true"
                                  data-form-auto-submit-options="{{ autoSubmitOptions|json_encode }}"
                                  {% endif %}
                            >
                                {% block component_line_item_quantity_redirect %}
                                    <input type="hidden"
                                           name="redirectTo"
                                           value="{{ redirectTo }}">
                                    <input type="hidden"
                                           name="redirectParameters"
                                           value="{{ redirectParameters }}">
                                {% endblock %}

                                {% block component_line_item_quantity_select %}
                                    <fieldset>
                                        {% block component_line_item_quantity_select_input %}
                                            <legend class="form-label visually-hidden">
                                                {{ 'component.product.quantitySelect.legend'|trans|striptags }}
                                            </legend>

                                            {% set quantitySelectorOptions = {
                                                ariaLiveUpdateMode: 'onload',
                                            } %}
                                            <div
                                                id="line-item-quantity-group-{{ lineItem.id }}"
                                                class="input-group line-item-quantity-group quantity-selector-group"
                                                data-quantity-selector="true"
                                                data-quantity-selector-options="{{ quantitySelectorOptions|json_encode }}"
                                            >
                                                <button
                                                    {% if isDigital %}disabled="disabled"{% endif %}
                                                    type="button"
                                                    class="btn btn-outline-light btn-minus js-btn-minus"
                                                    aria-label="{{ 'component.product.quantitySelect.decreaseOfProduct'|trans({ '%product%': lineItem.label })|striptags }}"
                                                    data-focus-id="line-item-{{ displayMode }}-quantity-down-{{ lineItem.id }}"
                                                >
                                                    {% sw_icon 'minus' style {size: 'xs'} %}
                                                </button>
                                                <input
                                                    {% if isDigital %}disabled="disabled"{% endif %}
                                                    type="number"
                                                    name="quantity"
                                                    class="form-control js-quantity-selector quantity-selector-group-input quantity-input-{{ lineItem.id }} {% if displayMode === 'offcanvas' %} js-offcanvas-cart-change-quantity-number{% endif %}"
                                                    min="{{ quantityInformation.minPurchase }}"
                                                    max="{{ maxQuantity }}"
                                                    step="{{ quantityInformation.purchaseSteps }}"
                                                    value="{{ lineItem.quantity }}"
                                                    aria-label="{{ 'component.product.quantitySelect.labelWithProduct'|trans({ '%product%': lineItem.label })|striptags }}"
                                                    data-focus-id="line-item-{{ displayMode }}-quantity-{{ lineItem.id }}"
                                                />
                                                <button
                                                    {% if isDigital %}disabled="disabled"{% endif %}
                                                    type="button"
                                                    class="btn btn-outline-light btn-plus js-btn-plus"
                                                    aria-label="{{ 'component.product.quantitySelect.increaseOfProduct'|trans({ '%product%': lineItem.label })|striptags }}"
                                                    data-focus-id="line-item-{{ displayMode }}-quantity-up-{{ lineItem.id }}"
                                                >
                                                    {% sw_icon 'plus' style {size: 'xs'} %}
                                                </button>
                                            </div>

                                            {# Aria live region to tell the screen reader what quantity amount is selected when changing the quantity. #}
                                            {% block component_line_item_quantity_select_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="{{ lineItem.label }}">
                                                    {# The live region content is generated by the `QuantitySelectorPlugin` #}
                                                </div>
                                            {% endblock %}
                                        {% endblock %}
                                    </fieldset>
                                {% endblock %}
                            </form>
                        {% endblock %}
                    {% else %}
                        {% block component_line_item_quantity_display %}
                            <div class="d-flex justify-content-sm-center justify-content-end">
                                {{ lineItem.quantity }}
                            </div>
                        {% endblock %}
                    {% endif %}
                </div>
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}