{% extends 'oscar/dashboard/layout.html' %}
{% load currency_filters %}
{% load i18n %}

{% block body_class %}{{ block.super }} users{% endblock %}

{% block title %}{{ customer.email }} | {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'dashboard:users-index' %}">{% trans "Customers" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ customer.email }}</li>
        </ol>
    </nav>
{% endblock %}

{% block headertext %}{{ customer.email }}{% endblock %}

{% block dashboard_content %}
    <div class="row">
        {% block user_general_info %}
            <div class="col-md-12">
                <div class="table-header">
                    <h2>{% trans "General" %}</h2>
                </div>
                <table class="table table-bordered">
                    <tr>
                        <th>{% trans "Name" %}</th>
                        <td>{{ customer.get_full_name|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Email" %}</th>
                        <td>{{ customer.email }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Active" %}?</th>
                        <td>
                            {{ customer.is_active|yesno:_("Yes,No") }}
                        </td>
                    </tr>
                    <tr>
                        <th>{% trans "Superuser" %}?</th>
                        <td>{{ customer.is_superuser|yesno:_("True,False") }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Staff" %}?</th>
                        <td>{{ customer.is_staff|yesno:_("True,False") }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Last login" %}</th>
                        <td>{{ customer.last_login }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Date joined" %}</th>
                        <td>{{ customer.date_joined }}</td>
                    </tr>
                    {% if customer.userrecord %}
                        {% with record=customer.userrecord %}
                            <tr>
                                <th>{% trans "Products viewed" %}</th>
                                <td>{{ record.num_product_views|default:0 }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Number of orders" %}</th>
                                <td>{{ record.num_orders|default:0 }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Number of ordered items" %}</th>
                                <td>{{ record.num_order_items|default:0 }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Total spent" %}</th>
                                <td>{{ record.total_spent|default:0|currency }}</td>
                            </tr>
                        {% endwith %}
                    {% endif %}
                    <tr>
                        <th>{% trans "Reviews written" %}</th>
                        <td>{{ customer.reviews.count }}</td>
                    </tr>
                    {% block additional_general_info %}{% endblock additional_general_info %}
                    {% if customer.email %}
                        <tr>
                            <th>{% trans "Actions" %}</th>
                            <td>
                                <form id="password_reset_form" action="{% url 'dashboard:user-password-reset' pk=customer.id %}" method="post">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Sending...' %}">{% trans 'Send password reset email' %}</button>
                                </form>
                            </td>
                        </tr>
                    {% endif %}
                </table>
            </div>
        {% endblock %}
    </div>
    <div class="row">
        {% block user_additional_info %}
            <div class="tabbable dashboard col-md-12">
                {% block tab_nav %}
                    <ul class="nav nav-tabs mb-0" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#user_orders" data-toggle="tab">{% trans "Orders" %}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#user_addresses" data-toggle="tab">{% trans "Addresses" %}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#user_reviews" data-toggle="tab">{% trans "Reviews" %}</a>
                        </li>
                    </ul>
                {% endblock %}

                <div class="tab-content">
                    {% block user_orders %}
                        <div id="user_orders" class="tab-pane fade show active" role="tabpanel">
                            <table class="table table-striped table-bordered table-hover">
                                <caption>{% trans "Orders" %}</caption>
                                {% with orders=customer.orders.all %}
                                    {% if orders %}
                                        <tr>
                                            <th>{% trans "Order Number" %}</th>
                                            <th>{% trans "Num items" %}</th>
                                            <th>{% trans "Total value" %}</th>
                                            <th>{% trans "Date placed" %}</th>
                                            <th>{% trans "Status" %}</th>
                                            <th></th>
                                        </tr>
                                        {% for order in orders %}
                                            <tr>
                                                <td><a href="{% url 'dashboard:order-detail' order.number %}">{{ order.number }}</a></td>
                                                <td>{{ order.num_items }}</td>
                                                <td>{{ order.basket_total_incl_tax|currency }}</td>
                                                <td>{{ order.date_placed|date }}</td>
                                                <td>{{ order.status|default:"-" }}</td>
                                                <td><a href="{% url 'dashboard:order-detail' number=order.number %}" class="btn btn-info">{% trans "View" %}</a></td>
                                            </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr><td>{% trans "This customer has not placed any orders yet." %}</td></tr>
                                    {% endif %}
                                {% endwith %}
                            </table>

                        </div>
                    {% endblock %}

                    {% block user_addresses %}
                        <div id="user_addresses" class="tab-pane fade" role="tabpanel">
                            <h2>{% trans "Addresses" %}</h2>
                            <div class="row">
                                {% for address in customer.addresses.all %}

                                    <div class="col-md-3">
                                        <div class="card card-body bg-info">
                                            {% for field in address.active_address_fields %}
                                                {{ field }}<br/>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% if forloop.counter|divisibleby:4 %}
                                    </div>
                                    <div class="row">
                                    {% endif %}
                                {% empty %}
                                    <p>{% trans "This customer has not saved any addresses." %}</p>
                                {% endfor %}
                            </div>
                        </div>
                    {% endblock %}

                    {% block user_reviews %}
                        <div id="user_reviews" class="tab-pane fade" role="tabpanel">
                            <table class="table table-striped table-bordered table-hover">
                                <caption>{% trans "Reviews" %}</caption>
                                {% if customer.reviews.count %}
                                    <tr>
                                        <th>{% trans "Product ID" %}</th>
                                        <th>{% trans "Score" %}</th>
                                        <th>{% trans "Title" context "Product review title" %}</th>
                                        <th>{% trans "Body" %}</th>
                                        <th>{% trans "Date created" %}</th>
                                    </tr>
                                    {% for review in customer.reviews.all %}
                                        <tr>
                                            <td>{{ review.product_id }}</td>
                                            <td>{{ review.score }}</td>
                                            <td>{{ review.title }}</td>
                                            <td>{{ review.body }}</td>
                                            <td>{{ review.date_created }}</td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr><td>{% trans "This customer has not written any reviews yet." %}</td></tr>
                                {% endif %}
                            </table>

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