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

{% block content %}
<article>
    <header class="object__header">
        <h1><img src="{% static "images/box.png" %}" alt=""> Order #{{order.pk}}</h1>
        <span class="order__status order__status--{{order.status}}">{{order.get_status_display}}</span>
    </header>
    <section class="object__list">
            <div class="object__item object__item--header">
                <span>Product</span>
                <span>SKU</span>
                <span>Quantity</span>
                <span>Price</span>
                <span>Total</span>
            </div>
        {% for item in order.lines.all %}
            <div class="object__item">
            {% with product=item.product %}
                <figure class="item__figure">
                    <img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
                    <figcaption><strong>{{product.name}}</strong></figcaption>
                </figure>
                <span>{{product.sku}}</span>
                <span>{{item.quantity}}</span>
                <span>${{product.price}}</span>
                <span>${{item.get_total}}</span>
            {% endwith %}
            </div>
        {% empty %}
            <p>No items in order yet.</p>
        {% endfor %}
            <div class="object__item">
                <a href="{% url 'dashboard:order-fulfill' order.pk %}" class="action-button order__fulfill">Fulfill &rarr;</a>
            </div>
    </section>

    <section class="object__panel">
        <div class="object__item object__item--header">
            <h4>Customer</h4>
        </div>
        {% with customer=order.customer %}
            <div class="panel__item">
                <p>
                    <strong>{{customer.get_full_name}}</strong><br>
                    <a href="{% url 'dashboard:customer-detail' customer.pk %}">View Profile</a>
                </p>
            </div>
            <div class="panel__item">
                <strong>Email address</strong><br>
                {{customer.email}}
            </div>
            <div class="panel__item">
                <strong>Shipping address</strong><br>
                {% with shipping_address=order.shipping_address  %}
                    <address>
                        {{shipping_address.first_name}}
                        {{shipping_address.last_name}}<br>
                        {{shipping_address.street_address_1}}<br>
                        {% if shipping_address.street_address_2 %}
                            {{shipping_address.street_address_2}}<br>
                        {% endif %}
                        {{shipping_address.city}}, {{shipping_address.state}}, {{shipping_address.postal_code}}
                    </address>
                {% endwith %}
            </div>
        {% endwith %}
    </section>

    <section class="object__panel">
        <div class="object__item object__item--header">
            <h4>PayPal</h4>
        </div>
        <div class="panel__item">
            <p>Transaction: <strong>{{order.transaction.paypal_id}}</strong><br>
                Status: <strong>{{order.transaction.get_status_display}}</strong>
            </p>
        </div>
    </section>
</article>
{% endblock content %}
