<header class="mall-quick-checkout__collapsible-header">
    <h2 class="mall-quick-checkout__heading">Shipping</h2>
    <div class="mall-quick-checkout__collapsible-summary">
        {{ cart.shipping_method.name }}
    </div>
</header>
<section class="mall-quick-checkout__collapsible-content">
    <div class="mall-quick-checkout__collapsible-inner">
        {% for method in __SELF__.shippingMethods %}
            {% set isActiveMethod = cart.shipping_method.id == method.id %}
            <a href="javascript:;" class="mall-quick-checkout__toggle-option
     {{ isActiveMethod ? 'mall-quick-checkout__toggle-option--active' : '' }}"
               data-request="onChangeShippingMethod"
               data-request-data="id: '{{ method.id }}'"
               data-request-success="$.publish('mall.cart.shippingMethodChanged', data)"
            >
                <div class="mall-quick-checkout__toggle-option-selection">
                    <div
                        class="mall-selection-indicator {{ isActiveMethod ? 'mall-selection-indicator--active' : '' }}">
                        &check;
                    </div>
                </div>
                <div class="mall-quick-checkout__toggle-option-text">
                    <h4 class="mall-quick-checkout__toggle-option-name">{{ method.name }}</h4>
                    <div class="mall-quick-checkout__toggle-option-meta">
                        {% if method.guaranteed_delivery_days %}
                            <p>
                                {% set days = method.guaranteed_delivery_days %}
                                {{ 'offline.mall::frontend.shipping_method.guaranteed_delivery_days'
                                | transchoice(days, {days: days}) }}
                            </p>
                        {% endif %}
                    </div>
                    <div class="mall-quick-checkout__toggle-option-price">
                        {#
                           If a shipping method has rates, we only display the price once it is selected.
                           This way we can re-use the TotalCalculator's logic and display the effective
                           price the user has to pay including the special rates.
                        #}
                        {% if method.rates.count > 0 %}
                            {{ isActiveMethod
                            ? (__SELF__.cart.totals.shippingTotal.totalPostTaxes | money )
                            : ( 'offline.mall::frontend.select_for_shipping_total' | trans ) }}
                        {% else %}
                            {{ method.price().integer > 0
                            ? (method.price().string | raw)
                            : ('offline.mall::frontend.no_additional_charges' | trans) }}
                        {% endif %}
                    </div>
                </div>
                {% if method.logo %}
                    <div class="mall-quick-checkout__toggle-option-logo">
                        <img class="mall-quick-checkout__toggle-option-image"
                             src="{{ method.logo.thumb(75, 75) }}" alt=""/>
                    </div>
                {% endif %}
            </a>
        {% else %}
            <p>No method available.</p>
        {% endfor %}
    </div>
</section>