{% extends "oscar/checkout/layout.html" %}
{% load currency_filters %}
{% load i18n %}
{% load image_tags %}
{% load purchase_info_tags %}

{% block title %}
    {% trans "Checkout" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'oscar/checkout/nav.html' %}
{% endblock %}

{% block content %}

    {% if error %}
        <div class="alert alert-danger">
            {{ error }}
        </div>
    {% endif %}

    <div class="row shipping-payment">
        {% block shipping_address %}
            <div class="col-sm-6">
                <div class="sub-header">
                    <h2>{% trans "Shipping" %}</h2>
                </div>
                {% if shipping_address %}
                    <div class="card card-body bg-light">
                        <h3>
                          {% trans "Address" %}
                          {% block shipping_address_actions %}
                            <a href="{% url 'checkout:shipping-address' %}" class="float-right">
                                {% trans "Change" %}
                            </a>
                        {% endblock %}</h3>
                        <address>
                            {% for field in shipping_address.active_address_fields %}
                                {{ field }}<br/>
                            {% endfor %}
                        </address>

                        {% if shipping_address.phone_number %}
                            <h4>{% trans "Contact" %}</h4>
                            <p>
                                {% trans "Phone" %}: {{ shipping_address.phone_number }}
                                {% if guest_email %}
                                    <br/>{% trans "Email" %}: {{ guest_email }}
                                {% endif %}
                            </p>
                        {% endif %}

                        {% if shipping_address.notes %}
                            <h4>{% trans "Instructions" %}</h4>
                            <p>{{ shipping_address.notes|linebreaks }}</p>
                        {% endif %}
                    </div>
                {% endif %}

                {% if shipping_method %}
                    <div class="card card-body bg-light card card-body bg-light-info">
                        <h3>
                          {% trans "Shipping method" %}
                          {% block shipping_method_actions %}
                            <a href="{% url 'checkout:shipping-method' %}" class="float-right">
                                {% trans "Change" %}
                            </a>
                          {% endblock %}
                        </h3>
                        <p>{{ shipping_method.name }}
                            {% if shipping_method.description %}
                                - {{ shipping_method.description|safe }}
                            {% endif %}
                        </p>

                    </div>
                {% endif %}
            </div>
        {% endblock shipping_address %}

        {# You will almost certainly want to override this block to provide a payment summary #}
        {% block payment_method %}
            <div class="col-sm-6">
                <div class="sub-header">
                    <h2>{% trans "Payment" %}</h2>
                </div>
                <div class="card card-body bg-light card card-body bg-light-success">
                    <h3>
                      {% trans "Payment" %}
                      <a href="{% url 'checkout:payment-details' %}" class="float-right">
                        {% trans "Change" %}
                      </a>
                    </h3>
                    <p>{% trans "Payment details to go here" %}</p>
                </div>
            </div>
        {% endblock payment_method %}
    </div>

    {% block order_contents %}
        <div class="sub-header">
            {% block order_contents_actions %}
                <a href="{% url 'basket:summary' %}" class="float-right">
                    {% trans "Edit order contents" %}
                </a>
            {% endblock %}

            <h2>{% trans "Order contents" %}</h2>
        </div>
        <div class="basket-title">
            <div class="row">
                <p class="col-sm-9 h4">{% trans "Item" %}</p>
                <p class="col-sm-1 h4 text-center">{% trans "Quantity" %}</p>
                <p class="col-sm-2 h4 text-right">{% trans "Total" %}</p>
            </div>
        </div>
        {% for line in basket.all_lines %}
            {% purchase_info_for_line request line as session %}
            <div class="basket-items">
                <div class="row">
                    <div class="col-sm-2">
                        <div class="image_container w-100">
                            {% with image=line.product.primary_image %}
                                {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
                                <a href="{{ form.instance.product.get_absolute_url }}">
                                    <img src="{{ thumb.url }}" alt="{{ product.get_title }}" class="img-thumbnail w-auto mx-auto my-0">
                                </a>
                            {% endwith %}
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <h3><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h3>
                        <span class="availability {{ session.availability.code }}">{{ session.availability.message }}</span>
                    </div>
                    <div class="col-sm-1 text-center">
                        {{ line.quantity }}
                    </div>
                    <div class="col-sm-2 text-right">
                        <p class="price_color">
                            {% if not show_tax_separately and line.is_tax_known %}
                                {{ line.line_price_incl_tax|currency:basket.currency }}
                            {% else %}
                                {{ line.line_price_excl_tax|currency:basket.currency }}
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        {% endfor %}

        <div class="row">
            <div class="col-sm-6">&nbsp;</div>
            <div class="col-sm-6">
                <div class="sub-header">
                    <h2>{% trans 'Totals' %}</h2>
                </div>
                {% include 'oscar/basket/partials/basket_totals.html' %}
            </div>
        </div>

    {% endblock order_contents %}

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

    {% block payment_details %}
    {% endblock payment_details %}

    {% block place_order %}
    {% endblock place_order %}

{% endblock content %}
