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

{% block content %}
<article>
    <header class="object__header">
        <h1><img src="{% static "images/customers.png" %}" alt=""> Customer: {{customer.get_full_name}}</h1>
        <div class="object__menu">
            <a href="{% url 'dashboard:customer-update' customer.pk %}" class="action-button">Edit</a>
        </div>
    </header>
    <section class="object__panel">
        <div class="object__item panel__header">
            <h4>Info</h4>
        </div>
        <div class="panel__item">
            <strong>Email address</strong><br>
            {{customer.email}}
        </div>
        <div class="panel__item">
            <strong>Default shipping address</strong><br>
            {% with shipping_address=customer.default_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>
                <a href="address-update">Edit</a>
            {% endwith %}
        </div>
        <div class="panel__item">
            <strong>Other addresses</strong><br>
            {% for address in customer.addresses.all  %}
                <p>
                    <address>
                        {{address.first_name}}
                        {{address.last_name}}<br>
                        {{address.street_address_1}}<br>
                        {% if address.street_address_2 %}
                            {{address.street_address_2}}<br>
                        {% endif %}
                        {{address.city}}, {{address.state}}, {{address.postal_code}}
                    </address>
                    <a href="address-update">Edit</a>
                </p>
            {% empty %}
                <p>No other addresses.</p>
            {% endfor %}
        </div>
        <div class="panel__item">
            <strong>Stripe ID</strong><br>
            <p>{{ customer.stripe_id }}</p>
        </div>
    </section>
    {% with order_list=customer.orders.all  %}
        <section class="object__list">
            <div class="object__item panel__header object__item--col4" href="order-detail">
                <span>Order #</span>
                <span>Date</span>
                <span>Status</span>
                <span>Total</span>
            </div>
        {% for order in order_list  %}
            <a class="object__item object__item--col4 object__item--link" href="{% url 'dashboard:order-detail' order.pk %}">
                <span>#{{order.pk}}</span>
                <span>{{order.created_at|date:"D, M j Y"}}</span>
                <span class="order__status--display">
                    <div class="status__dot order__status--{{order.status}}"></div>
                    {{order.get_status_display}}</span>
                <span>${{order.total_net_amount}}</span>
            </a>
        {% empty %}
            <span class="object__item">No orders</span>
        {% endfor %}
        </section>
    {% endwith %}
</article>
{% endblock content %}
