{% extends "checkout/layout.html" %}
{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load staticfiles %}

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

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

{% block checkout_title %}{% endblock %}

{% block content %}
    <div class="col-12 text-center mt-5 mb-5">
        <h1 class="mb-3">{% trans 'Thank you for your order!' %}</h1>
        {% blocktrans with number=order.number %}
            <strong>Order Number: {{ number }}</strong>
        {% endblocktrans %}
        <p class="mb-5">You will receive a confirmation email shortly at {{ request.user.email }}</p>
        <p><a href="{{ homepage_url }}"
              class="btn btn-primary btn-hook">{% trans "Continue shopping" %}</a></p>

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

                            {% if order.shipping_address.phone_number %}
                                <strong>{% trans "Contact" %}</strong>
                                <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 %}
                                <strong>{% trans "Instructions" %}</strong>
                                <p>{{ order.shipping_address.notes|linebreaks }}</p>
                            {% endif %}
                        {% else %}
                            <p>{% trans "No shipping address required." %}</p>
                        {% endif %}

                        <strong>{% trans "Shipping method" %}</strong>
                        <p>{{ order.shipping_method }}</p>
                    </div>
                </div>
            {% endblock %}
            <div class="space-2"></div>
        </div>

        <div class="col-sm-6">
            {% block payment_info %}
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h3>{% trans "Payment" %}</h3>
                    </div>
                    <div class="card-body">
                        {% 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 %}
                            <strong>{% trans "Billing address" %}</strong>
                            <address>
                                {% for field in order.billing_address.active_address_fields %}
                                    {{ field }}<br/>
                                {% endfor %}
                            </address>
                        {% endif %}
                    </div>
                </div>
            {% endblock %}
            <div class="space-2"></div>
        </div>
    </div>

    {% block order_contents %}
        <div class="card shadow-sm">
            <div class="card-header">
                <h3>{% trans "Order contents" %}</h3>
            </div>
            <div class="card-body">
                <div class="basket-title">
                    <div class="row">
                        <p class="col-sm-8 h3">{% trans "Items purchased" %}</p>
                        <p class="col-sm-2 h3 text-center">{% trans "Quantity" %}</p>
                        <p class="col-sm-2 h3 text-center">{% 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">
                                    {% with image=line.product.primary_image %}
                                        {% thumbnail image.original "200x200" upscale=False as thumb %}
                                            <a href="{{ line.product.get_absolute_url }}">
                                                <img class="img-thumbnail img-fluid" src="{{ thumb.url }}"
                                                     alt="{{ product.get_title }}">
                                            </a>
                                        {% endthumbnail %}
                                    {% endwith %}
                                </div>
                            </div>
                            <div class="col-sm-6 text-left">
                                <h4><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h4>
                                <p>
                                    {% if line.upc %}{{ line.upc }}<br/>{% endif %}
                                    {% if line.est_dispatch_date %}
                                        {% blocktrans with date=line.est_dispatch_date %}
                                            Estimated dispatch: <strong>{{ date }}</strong>
                                        {% endblocktrans %}
                                    {% endif %}
                                </p>
                            </div>
                            <div class="col-sm-2 text-center">
                                {{ line.quantity }}
                            </div>
                            <div class="col-sm-2 text-center">
                                <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>
                    <div class="space-1"></div>
                {% endfor %}
            </div>
        </div>
        <div class="space-2"></div>
        {% block basket_totals %}
            <div class="row">
                <div class="col-sm-6 offset-sm-6">
                    <div class="card shadow-sm">
                        <div class="card-header"><h3>{% trans 'Totals' %}</h3></div>
                        <div class="card-body">
                            {% include 'order/partials/basket_totals.html' %}
                        </div>
                    </div>
                    <div class="space-2"></div>
                </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" %}</p>
            <a class="btn btn-primary"
               href="{% url 'customer:anon-order' order_number=order.number hash=order.verification_hash %}">{% trans "View order status" %}</a>
            .
        {% endif %}
    {% endblock %}


    {% block order_actions %}
        <div class="row">
            <div class="col-sm-3 offset-sm-3">
                <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-3">
                <p><a href="{{ homepage_url }}"
                      class="btn btn-primary btn-block btn-lg">{% trans "Continue shopping" %}</a></p>
            </div>
        </div>

        <div class="space-2"></div>
    {% endblock order_actions %}
    {% endcomment %}

{% endblock content %}

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