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

{% block title %}
    {% blocktrans with number=order.number %}
        Order {{ number }}: confirmation
    {% endblocktrans %} | {{ block.super }}
{% endblock title %}

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

{% block checkout_title %}
    {% blocktrans with number=order.number %}
        Order {{ number }}: confirmation
    {% endblocktrans %}
{% endblock %}

{% block content %}
    <p class="lead">
        {% blocktrans with number=order.number %}
        Your order has been placed and a confirmation email has been sent - your order number is
        <strong>{{ number }}</strong>.
        {% endblocktrans %}
        {% trans "Please make a note of this reference or print this page and quote it in any communication with us regarding your order." %}
    </p>

    <div class="row shipping-payment">
        <div class="col-sm-6">
            {% block shipping_info %}
                <div class="sub-header">
                    <h2>{% trans "Shipping" %}</h2>
                </div>
                <div class="card card-body bg-light">
                    <h3>{% trans "Address" %}</h3>
                    {% if order.shipping_address %}
                        <address>
                            {% for field in order.shipping_address.active_address_fields %}
                                {{ field }}<br/>
                            {% endfor %}
                        </address>

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

                        {% if order.shipping_address.notes %}
                            <h4>{% trans "Instructions" %}</h4>
                            <p>{{ order.shipping_address.notes|linebreaks }}</p>
                        {% endif %}
                    {% else %}
                        <p>{% trans "No shipping address required." %}</p>
                    {% endif %}
                </div>

                <div class="card card-body bg-light">
                    <h3>{% trans "Shipping method" %}</h3>
                    <p>{{ order.shipping_method }}</p>
                </div>
            {% endblock %}
        </div>

        <div class="col-sm-6">
            {% block payment_info %}
                <div class="sub-header">
                    <h2>{% trans "Payment" %}</h2>
                </div>
                <div class="card card-body bg-light">
                    <h3>{% trans "Payment" %}</h3>
                    {% for source in order.sources.all %}
                        <p>
                        {% if source.reference %}
                            {% blocktrans with amount=source.amount_allocated|currency:source.currency type=source.source_type.name reference=source.reference %}
                                Allocation of {{ amount }} from type {{ type }} (reference: {{ reference }})
                            {% endblocktrans %}
                        {% else %}
                            {% blocktrans with amount=source.amount_allocated|currency:source.currency type=source.source_type.name %}
                                Allocation of {{ amount }} from type {{ type }}
                            {% endblocktrans %}
                        {% endif %}
                        </p>
                    {% empty %}
                        <p>
                        {% trans "No payment was required for this order." %}
                        </p>
                    {% endfor %}

                    {% if order.billing_address %}
                        <h4>{% trans "Billing address" %}</h4>
                        <address>
                            {% for field in order.billing_address.active_address_fields %}
                                {{ field }}<br/>
                            {% endfor %}
                        </address>
                    {% endif %}
                </div>

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

    {% block order_contents %}
        <div class="sub-header">
            <h2>{% trans "Order contents" %}</h2>
        </div>

        <div class="basket-title">
            <div class="row">
                <p class="col-sm-9 h4">{% trans "Items purchased" %}</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 order.lines.all %}
            <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 "200x200" upscale=False as thumb %}
                                <a href="{{ line.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>
                        {% if line.upc %}<p>{{ line.upc }}</p>{% endif %}
                    </div>
                    <div class="col-sm-1 text-center">
                        {{ line.quantity }}
                    </div>
                    <div class="col-sm-2 text-right">
                        <p class="price_color">
                            {% if show_tax_separately %}
                                {{ line.line_price_before_discounts_excl_tax|currency:order.currency }}
                            {% else %}
                                {{ line.line_price_before_discounts_incl_tax|currency:order.currency }}
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        {% endfor %}

        {% block basket_totals %}
            <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/order/partials/basket_totals.html' %}
                </div>
            </div>
        {% endblock basket_totals %}

    {% endblock order_contents %}

    {% block order_tracking %}
        {% if not order.user %}
            <div class="sub-header">
                <h2>{% trans "Tracking your order" %}</h2>
            </div>
            <p>{% trans "You can track the status of your order" %}
                <a class="btn btn-primary" href="{% url 'customer:anon-order' order_number=order.number hash=order.verification_hash %}">{% trans "View order status" %}</a>.</p>
        {% endif %}
    {% endblock %}


    {% block order_actions %}
        <div class="form-group">
            <div class="row">
                <div class="col-sm-4">
                    <p><a onclick="window.print()" href="#" class="btn btn-primary btn-block btn-lg">{% trans "Print this page" %}</a></p>
                </div>
                <div class="col-sm-4 offset-sm-4">
                    <p><a href="{{ homepage_url }}" class="btn btn-primary btn-block btn-lg">{% trans "Continue shopping" %}</a></p>
                </div>
            </div>
        </div>
    {% endblock order_actions %}
{% endblock content %}

{% block tracking %}
    {% if send_analytics_event %}
        {% include "oscar/partials/google_analytics_transaction.html" %}
    {% endif %}
{% endblock %}
