{% extends "checkout/checkout.html" %}
{% load i18n bootstrap4 %}

{% block title %}
    {% trans "Shipping address" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'checkout/nav.html' with step=1 %}
{% endblock %}

{% block checkout_title %}{% endblock %}

{% block order_contents %}{% endblock %}

{% block shipping_address_preview %}{% endblock %}

{% block shipping_address %}
    <div class="col-lg-8 offset-lg-2 mt-5">
        <div class="card shadow-sm rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-2">
                        <h1>Shipping Address</h1>
                    </div>
                </div>
                {% if user.is_authenticated %}
                    {% if addresses %}
                        {% for address in addresses %}
                            {% block select_address_form %}
                                <div class="row mb-3">
                                    <div class="col-md-8">
                                        <address>
                                            {% block select_address_fields %}
                                                {% for field in address.active_address_fields %}
                                                    {% if not forloop.counter > 3 %}
                                                        <span>{{ field }}</span><br/>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endblock %}
                                        </address>
                                    </div>
                                    <div class="col-md-4">
                                        <form class="text-right" action="{% url 'checkout:shipping-address' %}"
                                              method="post"
                                              id="select_shipping_address_{{ address.id }}">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="ship_to"/>
                                            <input type="hidden" name="address_id" value="{{ address.id }}"/>
                                            <button type="submit" class="btn btn-primary ship-address btn-sm btn-hook"
                                                    data-loading-text="{% trans 'Saving...' %}">
                                                {% trans "Select" %}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            {% endblock %}
                        {% endfor %}
                    {% endif %}
                    <div class="row">
                        <div class="col-12">
                            <a href="#addAddress" class="text-primary strong" data-toggle="collapse" data-target="#addAddress"
                               aria-expanded="false" aria-controls="addAddress">
                                {% trans "Add a new address?" %}
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            {% block new_address_form %}
                                <div class="space-2"></div>
                                <div class="collapse" id="addAddress">
                                    <form action="{% url 'checkout:shipping-address' %}" method="post"
                                          id="new_shipping_address"
                                          class="form form-horizontal">
                                        {% csrf_token %}
                                        {% include 'partials/address_form.html' with form=form %}
                                        <div class="row">
                                            <div class="col-6 text-left">
                                                <a class="btn btn-primary btn-hook btn-lg"
                                                   href="{% url 'basket:summary' %}">
                                                    {% trans "Return to basket" %}
                                                </a>
                                            </div>
                                            <div class="col-6 text-right">
                                                <button type="submit" class="btn btn-lg btn-hook btn-primary"
                                                        data-loading-text="{% trans 'Continuing...' %}">
                                                    {% trans "Continue" %}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            {% endblock %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

{% endblock shipping_address %}

{% block shipping_method %}{% endblock %}
{% block payment_method %}{% endblock %}