{% if selectedShippingMethodId is not defined %}
    {% set selectedShippingMethodId = context.shippingMethod.id %}
{% endif %}

<div class="shipping-method">
    {% block component_shipping_method_field %}
        <div class="shipping-form-group form-group">
            {% block component_shipping_method_control %}
                <div class="form-check shipping-method-radio">
                    {% block component_shipping_method_input %}
                        <input type="radio"
                               id="shippingMethod{{ shipping.id }}"
                               name="shippingMethodId"
                               value="{{ shipping.id }}"
                               {% if shipping.id is same as(selectedShippingMethodId) %}checked="checked"{% endif %}
                               class="form-check-input shipping-method-input"
                               data-focus-id="{{ shipping.id }}">
                    {% endblock %}

                    {% block component_shipping_method_label %}
                        <label class="form-check-label shipping-method-label"
                               for="shippingMethod{{ shipping.id }}">
                            {% block component_shipping_method_image %}
                                {% if shipping.media %}
                                    {% sw_thumbnails 'shipping-method-image-thumbnails' with {
                                        media: shipping.media,
                                        sizes: {
                                            default: '100px'
                                        },
                                        attributes: {
                                            class: 'shipping-method-image',
                                            alt: (shipping.media.translated.alt ?: shipping.translated.name),
                                            title: (shipping.media.translated.title ?: shipping.translated.name)
                                        }
                                    } %}
                                {% endif %}
                            {% endblock %}

                            {% block component_shipping_method_description %}
                                <div class="shipping-method-description">
                                    <strong>{{ shipping.translated.name }}</strong>
                                    {% if shipping.translated.description and shipping.id is same as(selectedShippingMethodId) %}
                                        {% set shippingDescription = shipping.translated.description|raw %}

                                        {% set shippingDescription = (shippingDescription|length > 75 ? shippingDescription[:75] ~ ' ...' : shippingDescription) %}

                                        <p class="mb-0" title="{{ shipping.translated.description|raw }}">{{ shippingDescription }}</p>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        </label>
                    {% endblock %}
                </div>
            {% endblock %}
        </div>
    {% endblock %}
</div>