{% extends 'shop/_layouts/checkout' %}

{% block content %}
    <h3>Shipping Method</h3>
    <div class="row">

        <div class="two-thirds column">

        {#
        Choosing a shipping method.
        Now that we know the cart's address, we need to show all available shipping methods. Only those that match
        at least one rule contained in the shipping method are compatible with the order. `cart.shippingMethods` only returns
        methods available to the order. If you require shipping and no methods are avaialable, create a catch all rule
        in a method that matches all addresses.
        #}

        {% if not cart.availableShippingMethods|length %}
            <p>No shipping methods available.<p><p> <a class="button button-primary" href="{{ url('shop/checkout/payment') }}">Continue to payment</a></p>
        {% endif %}

        {% if cart.availableShippingMethods|length %}
        <form method="POST">
            <input type="hidden" name="action" value="commerce/cart/update-cart">
            {{ redirectInput('shop/checkout/payment') }}
            {{ csrfInput() }}

            {% for handle, method in cart.availableShippingMethods %}
                <div class="shipping-select">
                    <label>

                        <input type="radio" name="shippingMethodHandle" value="{{ handle }}"
                               {% if handle == cart.shippingMethodHandle %}checked{% endif %} />
                        <strong>{{ method.name }}</strong>

                        <span class="price">
                            {{ method.amount|commerceCurrency(cart.currency) }}
                        </span>
                    </label>
                </div>
            {% endfor %}
            <span class="flash">{{ cart.getErrors('shippingMethod')|join }}</span>

            <p><input type="submit" class="button button-primary" value="Select Shipping Method"/></p>

        </form>
        {% endif %}

        </div>
        
        <div class="one-third column">
            <div class="address-card">
                <h5 class="label">Shipping Address</h5>
                {% if cart.shippingAddress %}
                    {% include 'shop/_includes/addresses/address' with {'address': cart.shippingAddress} %}
                {% else %}
                    <p>No shipping address selected.</p>
                {% endif %}
                {% if currentUser %}<a class="edit" href="{{ url('shop/customer/addresses/edit') }}?addressId={{ cart.shippingAddressId }}&redirect={{ craft.app.request.pathInfo }}">Edit</a>{% endif %}
            </div>
            <div class="address-card">
                <h5 class="label">Billing Address</h5>
                {% if cart.billingAddress %}
                    {% include 'shop/_includes/addresses/address' with {'address': cart.billingAddress} %}
                    {% if currentUser %}<a class="edit" href="{{ url('shop/customer/addresses/edit') }}?addressId={{ cart.billingAddressId }}&redirect={{ craft.app.request.pathInfo }}">Edit</a>{% endif %}
                {% else %}
                    <p>No billing address selected.</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}