{% block component_offcanvas_summary_content %}
    {% block component_offcanvas_summary_cart_live_update %}
        <div class="cart-live-update visually-hidden" role="alert" aria-live="assertive">
            {{ 'checkout.cartScreenReaderUpdate'|trans({
                '%count%': page.cart.lineItems|length,
                '%total%': page.cart.price.positionPrice|currency,
            })|sw_sanitize }}
        </div>
    {% endblock %}

    <div class="offcanvas-summary">
        <dl class="row offcanvas-summary-list" aria-label="{{ 'checkout.summaryOffCanvasLabel'|trans|striptags }}">
            {% block component_offcanvas_summary_total %}
                {% block component_offcanvas_summary_total_label %}
                    <dt class="summary-label summary-total">
                        {{ 'checkout.subtotalAmount'|trans|sw_sanitize }}
                    </dt>
                {% endblock %}

                {% block component_offcanvas_summary_total_value %}
                    <dd class="summary-value summary-total">
                        <strong>{{ page.cart.price.positionPrice|currency }}</strong>
                    </dd>
                {% endblock %}
            {% endblock %}
        </dl>

        {% if page.cart.deliveries is defined %}
            {% for activeShipping in page.cart.deliveries.elements %}
                {% block component_offcanvas_summary_content_info %}
                    <div class="row offcanvas-shipping-info">
                        <span class="shipping-label shipping-cost">
                            <strong>{{ 'checkout.summaryShipping'|trans|sw_sanitize }}</strong>
                            {% if loop.first %}
                                {% if page.shippingMethods|length %}
                                    <button class="btn btn-sm btn-link js-toggle-shipping-selection">
                                        ({{ activeShipping.shippingMethod.translated.name }})
                                    </button>
                                {% else %}
                                    <small>({{ activeShipping.shippingMethod.translated.name }})</small>
                                {% endif %}
                            {% endif %}
                        </span>

                        <span class="pb-2 shipping-value shipping-cost">
                            {% set shippingTotalPrice = activeShipping.shippingCosts.totalPrice ?? 0 %}
                            <strong>{{ shippingTotalPrice < 0 ? '&minus;' : '+' }} {{ shippingTotalPrice|abs|currency }}</strong>
                        </span>
                    </div>
                {% endblock %}
            {% endfor %}

            {% set activeShipping = page.cart.deliveries.elements|first %}

            {% block component_offcanvas_summary_content_shipping %}
                {% if page.shippingMethods|length %}
                    <div class="offcanvas-shipping-preference mb-2 mt-2 offcanvas-shipping-preference--hidden">
                        <form
                            action="{{ path('frontend.checkout.configure') }}"
                            name="confirmShippingForm"
                            method="post">

                            <input type="hidden" name="forwardTo" value="frontend.cart.offcanvas">

                            {% block component_offcanvas_summary_content_shipping_select %}

                                <select class="form-select mt-2 col-12" name="shippingMethodId">
                                    <option disabled>{{ 'checkout.confirmChangeShipping'|trans|sw_sanitize }}</option>

                                    {% for shippingMethod in page.shippingMethods %}
                                        <option
                                            value="{{ shippingMethod.id }}"
                                            {% if shippingMethod.id is same as(activeShipping.shippingMethod.id) %}selected="selected"{% endif %} >
                                            {{ shippingMethod.translated.name }}
                                        </option>
                                    {% endfor %}
                                </select>

                            {% endblock %}
                        </form>
                    </div>
                {% endif %}
            {% endblock %}
        {% endif %}
    </div>

    {% block component_offcanvas_summary_tax_info %}
        <p class="offcanvas-cart-tax">
            <small>
                {% if page.cart.price.taxStatus == 'gross' %}
                    {{ 'general.grossTaxInformation'|trans|sw_sanitize }}
                {% else %}
                    {{ 'general.netTaxInformation'|trans|sw_sanitize }}
                {% endif %}
            </small>
        </p>
    {% endblock %}
{% endblock %}