{% extends "base.html" %}
{% load static %}

{% block content %}
<article>
    <p><a href="{% url 'storefront:customer-detail' customer.pk %}">&larr; Back</a></p>
    <header>
        <h1>Order #{{order.pk}}</h1>
        <h3>Placed on {{order.created_at|date:"M j, Y"}}</h3>
    </header>
    <section>
        <table>
            <thead>
                <tr>
                    <th colspan="2">Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
            {% for item in order.lines.all %}
                <tr>
                {% with product=item.product %}
                    <td>
                        <img class="line__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                    </td>
                    <td>
                        <strong>{{product.name}}</strong><br>
                        {{item.customer_note}}
                    </td>
                    <td>{{item.quantity}}</td>
                    <td>${{product.price}}</td>
                    <td>${{item.get_total}}</td>
                {% endwith %}
                </tr>
            {% empty %}
                <tr>
                    <td colspan="5">No items in order</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>

    <section>
        <h4>Payment</h4>
        <table>
            <tr>
                <td>Subtotal</td>
                <td>${{order.total_net_amount}}</td>
            </tr>
            {% if order.coupon %}
            <tr>
                <td>Discount</td>
                <td>{{order.coupon.discount_value}} {{order.coupon.get_discount_value_type_display}}</td>
            </tr>
            {% endif %}
            <tr>
                <td>Shipping</td>
                <td>${{order.shipping_total}}</td>
            </tr>
            <tr>
                <th>Total</th>
                <td><strong>${{order.get_total_price_after_discount}}</strong></td>
            </tr>
        </table>
    </section>
</article>
{% endblock content %}
