{% 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
        a shipping method's rule are compatible with the shipping address. `craft.commerce.shippingMethods` only returns
        methods available to the user. If you require shipping and no methods are avaialable, create a catch all rule
        in a method that matches all addresses.
        #}

        {% if not craft.commerce.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 craft.commerce.availableShippingMethods|length %}
        <form method="POST">
            <input type="hidden" name="action" value="commerce/cart/updateCart">
            <input type="hidden" name="redirect" value="shop/checkout/payment">
            {{ getCsrfInput() }}

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

                        <input type="radio" name="shippingMethod" 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.request.path }}">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.request.path }}">Edit</a>{% endif %}
                {% else %}
                    <p>No billing address selected.</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}